Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

PhantOmL0rd

[Resolvido] Sugestão de código

Por , em Javascript

Recommended Posts

PhantOmL0rd    0

PhantOmL0rd
Postado

Olá galera, estava precisando de uma sugetão para eu conseguir resolver o seguinte problema:

 

Eu tenho umas informações e preciso criar uma lista delas para poder adicionar no banco de dados a lista. Mais ou menos como um carrinho de compras, mas preciso adicionar itens nessa lista sem que a página recarregue.

Segue uma img que ajudará na explicação...

 

Imagem Postada

 

Espero que me ajudem, desde já agradecido.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jaime_Pinheiro    0

Jaime_Pinheiro
Postado

NO botão adicionar faça uma chamada ajax em que submete os valores de Tipo Inscrição e Letreiro. O servidor receberá esses dados e os registrará em banco. Em caso de sucesso na operação, faça uma nova listagem e envie de retorno a solicitação ajax. A mesma função que fez o envio inicial receberá o retorno do servidor e verificará o sucesso na operação. Em caso de sucesso, apaga os campos e a tabela e com os dados recebidos do servidor monta uma tabela atualizada. Em caso de fracasso, exibe uma mensagem ou algo do tipo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Desnecessário usar ajax nesse ponto.. pois se o cara desistir do cadastro, você terá sujeiras no teu banco de dados.

 

 

prefira fazer inicialmente sem ajax, apenas colocando as informações na tabela com um .innerHTML, tendo as resgatado acessando o atributo .value de cada campo. (javascript)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jaime_Pinheiro    0

Jaime_Pinheiro
Postado

Desnecessario talvez armazenar em banco. Utilize sessão, até a confirmação. Dependendo do tamanho do trabalho que o usuario tiver, é sempre bom mantê-lo no servidor do que numa tabela. Aí é uma questão de requisitos do sistema. O cliente, ao recarregar a página (sei lá porque razão, usuario é imprevisível) pode não gostar que os itens desapareçam da listagem e desacreditar a solução. Cada desenvolvedor trabalha de uma maneira diferente, mas é melhor fazer a coisa da maneira em que acredita ser a ideal e deixar a preguiça de lado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Certamente... exemplo com js puro:

<html>
<head>
<script type="text/javascript">
window.onload = function()
{
	id('adicionar').onclick = function()
	{
		add( id('tipo'), id('letreiro') );
	}
}
function id( el ){
	return document.getElementById( el );
}
function cE( el ){
	return document.createElement( el );
}
function tN( text ){
	return document.createTextNode( text );
}
function add( tipo, letreiro )
{
	if( tipo.value!='' && letreiro.value!='' )
	{
		var tbody = id('exibicao').getElementsByTagName('tbody')[0]; 
		
		var row = cE('tr');
		var td = cE('td');
		var td2 = cE('td');
		
		td.appendChild( tN( tipo.value ) );
		td2.appendChild( tN( letreiro.value ) );
		
		row.appendChild( td );
		row.appendChild( td2 );
		tbody.appendChild( row );
		
		tipo.value = '';
		letreiro.value = '';
	}
	else
		alert( 'Preencha os dois campos!' );
}
</script>
</head>
<body>

	<form action="" method="">
		<input type="text" name="tipo" id="tipo" />
		<textarea name="letreiro" id="letreiro" ></textarea>
		
		<input type="button" name="adicionar" value="Adicionar" id="adicionar" />
	</form>
	
	<table id="exibicao">
		<thead>
			<tr>
				<th>Tipo de Inscrição</th><th>Letreiro</th>
			</tr>
		</thead>
		<tbody>		
		</tbody>
	</table>
</body>
</html>
daqui pra frente, seria apenas adicionar os hiddens, trabalhando com vetores, para conseguir capturar tudo de uma vez no submit desse form.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

daqui pra frente, seria apenas adicionar os hiddens, trabalhando com vetores, para conseguir capturar tudo de uma vez no submit desse form.

William, se ele caprichar no DOM, é possível enviar o HTML da <table> completo e tratá-la como um XML válido, dispensando o uso dos inseguros hiddens.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

^_^ bacana @Edvandro, se puder postar um exemplo do envio da tabela HTML via POST.. acredito que será muito útil.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

^_^ bacana @Edvandro, se puder postar um exemplo do envio da tabela HTML via POST.. acredito que será muito útil.

 

Evandro!! http://forum.imasters.com.br/public/style_emoticons/default/excl.gif :angry:

 

 

Se der antes dos 30 min, edito esse post.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

recebe os dados

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http-~~-//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="" method="post">
	<fieldset id="cadastro">
		<legend>Cadastro de alunos</legend>
		<label for="nome">Nome:</label><input type="text" id="nome" />
		<label for="idade">Idade:</label><input type="text" size="3" id="idade" />
		<button type="button">OK</button>
	</fieldset>
</form>
<table cellpadding="0" cellspacing="0" border="1">
	<thead>
		<tr>
			<th>Nome</th>
			<th>Idade</th>
		</tr>
	</thead>
	<tbody id="dados">
	</tbody>
</table>
<button id="envia">Enviar dados!</button>
<script type="text/javascript">
	window.onload = function(){
		document.getElementById('cadastro').getElementsByTagName('button').item(0).onclick = cadastra;
		document.getElementById('envia').onclick = envia;
	}
	function cadastra(){
		linha = document.createElement('tr');
		nome = document.createElement('td');
		idade = document.createElement('td');
		source_nome = document.getElementById('cadastro').getElementsByTagName('input').item(0);
		source_idade = document.getElementById('cadastro').getElementsByTagName('input').item(1);
		if(source_nome.value == "" || source_idade.value == "") {
			alert('preencha os dois campos!')
			return;
		}
		nome.innerHTML = source_nome.value;
		idade.innerHTML = source_idade.value;
		linha.appendChild(nome);
		linha.appendChild(idade);
		document.getElementById('cadastro').form.reset();
		source_nome.focus();
		document.getElementById('dados').appendChild(linha);			
	}

	function envia(){
		valores = '<?xml version="1.0" encoding="utf-8"?><root>';
		valores += document.getElementById('dados').innerHTML;
		valores += "</root>";
		recipient = document.createElement('form');
		recipient.action = "processa.php";
		recipient.method = "post";
		dados = document.createElement('textarea');
		dados.name = 'dados';
		dados.value = valores;
		recipient.appendChild(dados);
		recipient.submit();
	}
</script>
</body>
</html>

 

 

trata os dados

 

<h1>Dados recebidos:</h1>

<?php
$indexes = array("Nome","Idade");

$xml = new SimpleXMLElement($_POST['dados']);
foreach($xml as $line){
$line = (array)$line;
echo '<p>';
foreach($line['TD'] as $index=>$data) echo "\t<b>{$indexes[$index]}:</b> {$data}\n";
echo "</p>\n";
}
?>

 

 

Mas, como o Jaime já citou, basta atualizar a página para perder todo o trabalho.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Batista Neto    448

João Batista Neto
Postado

Ok Senhores,

 

 

Como as soluções apresentadas baseiam-se em Javascript, o tópico está sendo movido:

 

Movido:

 

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito