Ajax e Tabelas

Janeiro 11, 2008

Fala galera

Seguinte, usei AJAX para aplicações pequenas como inserir algo no BD e depois da um alert ou alterar dados de um formulário na mesma página.

Mas o cliente quer algo assim:

Tem um carrinho de compras, quando adicionar algo, deve ser adicionado com AJAX, ou seja, sem recarregar a página deve aparecer uma linha com o produto no carrinho, aparecer o novo valor (Ai acredito que seja só usar o innerhtml) e uma mensagem em alert (isso é o de menos).

E quando apagar algo, apagar a linha d atabela do item excluido.

Gostaria de saber a lógica para criar isso (ou seja, como manipular as linhas da tabela), ou quais elementos devo estudar para conseguir criar esta aplicação?

Agradeço desde já a atenção e a ajuda de todos.

Abração

fercosmig · Janeiro 11, 2008

da uma olhada

http://scriptbrasil.com.br/forum/index.php...st&p=293214

http://scriptbrasil.com.br/forum/index.php...st&p=293482

http://scriptbrasil.com.br/forum/index.php?showtopic=82408

KaKarotto · Janeiro 11, 2008

Olha DackAle, existem n jeitos de fazer. Olha o código do Beraldo:

http://scriptbrasil.com.br/forum/index.php?showtopic=96267

Em javascript você pode fazer de muitas maneiras...

Eu particularmente não gosto de usar tabelas em javascript, eu acho meio complicado.

Eu vou mostrar um exemplo implementando um algoritmo de listas. Supondo que você tenha um html como esse:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
#Caixa{
 width:150px; height:150px;
 border:1px solid silver;
 overflow-y:scroll;
 position:absolute; left:30%;
}
</style>
</head>
<body>
<div id="Caixa"></div>

Camiseta:<input type="button" value="Add" onclick="add(1, 401)" />
<br />
Blusa:<input type="button" value="Add" onclick="add(2, 121)" />
<br />
Shorts:<input type="button" value="Add" onclick="add(3, 009)" />
<br />
Meias:<input type="button" value="Add" onclick="add(4, 934)" />
<br />

</body>
</html>

Na seção head nós faríamos nosso script da seguinte forma: (Preste atenção nos comentários) Js

// Iniciaríamos a variável Lista do tipo array.
window.onload=function(){Lista=[]}

//Atualiza campo.

function atualiza(){
document.getElementById("Caixa").innerHTML=""
for(var x=0; x<Lista.length; x++)
document.getElementById("Caixa").innerHTML+="ID:"+Lista[x].id+"- Código:"+ Lista[x].cod +"<hr />"
}

//Função que adiciona item a lista.

function add(id, cod){
     
 Lista[Lista.length]={
 "id":arguments[0],
 "cod":arguments[1]
 }
atualiza()

}

Isso é o grãozinho de areia, está totalmente incompleto, porém com esse fragmento dá pra eu te mostrar o algoritmo implementando Listas. Ali no array Lista eu sempre vou adicionar um objeto que tem como propriedades "id" e "cod". Dessa forma, ao adicionarmos os 4 itens do input, a Lista ficaria assim:

Lista[0].id=1
Lista[0].cod=401

Lista[1].id=2
Lista[1].cod=121

Lista[2].id=3
Lista[2].cod=009

Lista[3].id=4
Lista[3].cod=934

Dessa forma você teria um vetor com n itens e facilmente você poderia excluir o produto pelo id do array. ASsim você poderia mandar para o servidor os valores bem organizados e de fácil acesso, o que é mais fácil do que acessar um elemento em um vetor?

A parte mais difícil eu já te passei, que é estrutura dos dados. Dá uma olhada no código do Beraldo, entenda direitinho e altere pois está todo em php, e o sistema que fará usará Ajax. Vai ser preciso algumas mudanças.

Entrar

Ajax e Tabelas

Pergunta

Guest --DackAle --

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades