Help para atualizar apenas o select em uma página com java script

cde
(usa Slackware)

Enviado em 15/09/2015 - 15:04h

Colegas estou precisando de uma ajudinha com relação a atualização de parte de página (especificamente no select) de um projetinho que estou fazendo com php, mysql e java script. (de java script eu não entendo quase nada ainda)

Vou dar um exemplo simples do que estou precisando:

Imaginem uma página chamada index.php com um formulário que possui apenas uma caixa de texto para digitar um nome e um select que é carregado com nomes de pessoas existentes na base de dados. Ao Digitar um nome "João" na caixa de texto e clicar no botão enviar do formulário este nome é acrescentado na base de dados. (até aqui consegui fazer tudo funcionar perfeitamente).

Eu preciso que a página index.php seja atualizada mas apenas a parte do select para que o nome Maurício que acabou de ser inserido apareça dentro do select (o restante da página tem que permanecer sem atualizar). Só preciso da ajuda de vocês na parte de atualizar select após um novo nome ser inserido na base de dados porque o povoamento do select no carregamento da página pela primeira vez eu já fiz. Vocês podem me ajudar nisso?

Já peguei muitas e muitas dicas na internet, mas até agora não consegui sair do lugar.

Agradeço

rai3mb
(usa Outra)

Enviado em 15/09/2015 - 23:01h

Já que por enquanto seu objetivo não é o JavaScript, recomendo ver um pouco de um framework, como o Jquery.

Caso já tenha ele importado na sua página, pode fazer uma função para enviar os dados para o PHP registrar no banco e este mesmo PHP deve retornar os registros cadastrados, para vc poder atualizar a página. Pode retornar apenas os dados usando JSON (veja: json_encode)

function addPessoa() {

	// codigo para pegar os dados da pessoa

	$.getJSON('/pagina/pagina.php', {nome:xxx,idade:xxxx}, function(resp) {

		$('select[name=pessoas]').empty(); // limpa os dados do select

		 $.each( resp.pessoas, function( i, pessoa ) { // adiciona os dados retornados em JSON

        	$('select[name=pessoas]').append( "<option>" + pessoa.nome + "</option>" );

		});

      });

}