Jump to content

Recommended Posts

Posted

Boas,

Estou aqui a trabalhar num site para a minha PAP, mas estou a ter dificuldades na parte do carrinho.

Esta é a função em javascript:

function RefreshTable(data) 
{
	$("#carrinho").load("index.php?s=carrinho #carrinho");
	alert(data);
}

Que é chamada aqui:

$(document).ready(function()
{
	$("#removecart_' . get_carrinho()[$i][id] . '").click(function(){
      $.ajax({
          url: "http://localhost/pap_pina_quadros/inc/functions.inc.php",
          type: \'post\',
          data: { function2call: \'delete_carrinho\', cliente: $(\'#cliente\').val(), id: $(\'#carinho_id_'.get_carrinho()[$i][id].'\').val()},
          success: function(data) {
              RefreshTable(data);
          }
		})
      })
	})

Que por sua vez está dentro desta table:

                            <table id="produtoscarrinho" class="tg" style="width: 569px">
                                <tr>
                                    <th class="tg-2tx9">Nome</th>
                                    <th class="tg-2tx9">Preço</th>
                                    <th class="tg-2tx9">Editar</th>
                                </tr>
                                <?php
                                $total_s_iva = 0;
                                $total_c_iva = 0;
                                $total_iva = 0;

                                for ($i = 0; $i < count(get_carrinho()); $i++) {
                                    echo '
                                        <script>
                                            $(document).ready(function(){
                                                $("#removecart_' . get_carrinho()[$i][id] . '").click(function(){
                                                    $.ajax({
                                                        url: "http://localhost/pap_pina_quadros/inc/functions.inc.php",
                                                        type: \'post\',
                                                        data: { function2call: \'delete_carrinho\', cliente: $(\'#cliente\').val(), id: $(\'#carinho_id_' . get_carrinho()[$i][id] . '\').val()},
                                                        success: function(data) {
                                                            RefreshTable(data);
                                                        }
                                                    })
                                                })
                                            })
                                        </script>
                                    <tr>
                                        <th class="tg-7wxi">' . get_carrinho()[$i][nome] . '</th>
                                        <th class="tg-7wxi">' . get_carrinho()[$i][preco_com_iva] . '</th>
                                        <th class="tg-7wxi"><input id="removecart_'.get_carrinho()[$i][id].'" type="button" value="X"/><input type="hidden" id="carinho_id_'.get_carrinho()[$i][id].'" value="'.get_carrinho()[$i][id].'" /></th>
                                    </tr>';

                                    $total_s_iva += get_carrinho()[$i][preco_sem_iva];
                                    $total_c_iva += get_carrinho()[$i][preco_com_iva];
                                    $total_iva2 = get_carrinho()[$i][preco_com_iva] - get_carrinho()[$i][preco_sem_iva];
                                    $total_iva += $total_iva2;

                                }
                                ?>
                            </table>

A função de apagar o item do carrinho está a funciona, mas só funciona 1 vez por reload à página.

Alguém me pode ajudar?

Obrigado

Posted
1 minuto atrás, HappyHippyHippo disse:

podes ser mais claro quendo referes "1 vez por reload à página" ?

Ao clicar no botão de Apagar (<input id="removecart_'.get_carrinho()[$i][id].'" type="button" value="X"/>) a div dá reload, mas se voltar a clicar (noutro artigo) não faz nada, tenho de dar reload à página para poder voltar a clicar no botão e ele apagar o artigo e dar reload.

Posted

se fazes "reload" do elemento do DOM que tem os registos dos eventos, então perdes esses eventos.

no entanto, existe outra maneira de fazer de forma a não perder esses registos de eventos (no Jquery que pareces usar)

- registar o event listener no elemento pai que não irá ser eliminado no teu processo de "reload", que irá então ser delegado como "tratador" desses eventos

- usar uma escolha mais inteligente do elemento a ser seleccionado assim como uma forma mais HTML de guradar o valor a ser usado dentro do event listener

 

doc : http://api.jquery.com/on/

  • Vote 1
IRC : sim, é algo que ainda existe >> #p@p
Posted

Acho que e isto que tu queres

Fiz em javascript + html sem usar jquery

<html>

	<head>
		<style>
		
			#listaCarrinho
			{
				padding: 10px;
				border: 1px solid #ccc;
			}
			
			#listaCarrinho .listItem 
			{
				margin-top: 4px;
				display: block;
				padding: 5px;
				border: 1px solid #ccc;
			}
			
			#listaCarrinho .listItem .text 
			{
				display: block;
			}
			
			#listaCarrinho .listItem button 
			{
				margin-top: 10px;
			}
			
		</style>
	</head>
	
	<div id="listaCarrinho">
		vazio
	</div>
	
	<div>Computador Nivel 1<button onclick="addCarrinho('Computador Nivel 1')">Adicionar ao carinho</button></div>
	<div>Computador Nivel 2<button onclick="addCarrinho('Computador Nivel 2')">Adicionar ao carinho</button></div>
	<div>Computador Nivel 3<button onclick="addCarrinho('Computador Nivel 3')">Adicionar ao carinho</button></div>
	<div>Computador Nivel 4<button onclick="addCarrinho('Computador Nivel 4')">Adicionar ao carinho</button></div>
	
	<script type="text/javascript">
	
		//Carinho do usuario
		var carrinhoCliente = [];
		//Adicionar item ao carinho
		function addCarrinho(itemText)
		{
			//Adicona o item ao Array 'carrinhoCliente'
			carrinhoCliente.push(itemText);
			//Criat html lista
			createHtml();
			
		}
		//
		function removeCarrinho(index)
		{
			//Remove item pelo index
			carrinhoCliente.splice(index, 1);
			//Criat html lista
			createHtml();
		}
		//
		function createHtml()
		{
			//O html que vai existir dentro da div 'listaCarrinho'
			var html = "";
			//Faz o loop dos item do 'carrinhoCliente'
			for(var i = 0; i < carrinhoCliente.length; i++)
			{
				//Vai adiconar a varivael html 
				html += "<div class=\"listItem\"><label class=\"text\">" + carrinhoCliente[i] + "</label><button onclick=\"removeCarrinho(" + i + ")\">Remover do carinho</button></div>";
			}
			//Entao insere na div 'listaCarrinho' o 'html' que tem todos o item que o cliente adiciona ao cariinho
			document.getElementById('listaCarrinho').innerHTML = html;
		}
	
	</script>
	
</html>

 

Aqui esta a lista do cliente

"Computador Nivel 1", "Computador Nivel 2", "Computador Nivel 3"

//Carinho do usuario
var carrinhoCliente = [];

Funcao para adicionar 

function addCarrinho( itemText )

Funcao para remover

removeCarrinho( index )

 Espero ter ajudado

  • Vote 1
Posted

Acho que já tenho umas ideias de como fazer...

Um amigo deu me um código de um trabalho dele que faz exatamente o que preciso. A tabela está configurada no AJAX e assim só tem de se executar a função que faz a tabela ser apresentar.

		function show_product(){
		    $.ajax({
		        type  : 'ajax',
		        url   : '<?php echo site_url('Dashboard/get_produtos')?>',
		        async : false,
		        dataType : 'json',
		        success : function(data){
		            var html = '';
		            var i;
		            for(i=0; i<data.length; i++){
		                html += '<tr>'+
		                        '<td>'+data[i].nome_prod+'</td>'+
		                        '<td>'+data[i].cat_nome+'</td>'+
                                '<td>'+data[i].preco_prod+'</td>'+
                                '<td>'+data[i].stock_prod+'</td>'+
                                '<td>'+data[i].data_prod+'</td>'+
		                        '<td style="text-align:right;">'+
                                    '<a href="javascript:void(0);"  data-toggle="modal" data-target="#Modal_" class="btn btn-info btn-sm item_edit" data-product_code="'+data[i].id_prod+'" data-product_name="'+data[i].nome_prod+'" data-price="'+data[i].preco_prod+'">Edit</a>'+' '+
                                    '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-product_code="'+data[i].id_prod+'">Delete</a>'+
                                '</td>'+
		                        '</tr>';
		            }
		            $('#show_data').html(html);
		        }

		    });
		}

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.