Atualizar select após outro select receber valor

[peripatus 0]

Estou desenvolvendo um projeto científico para catalogação de um museu. O que acontece é o seguinte: eu devo selecionar o MATERIAL que a obra foi feita, e ao selecionar o material preciso que o selectbox abaixo dele atualize, com as TÉCNICAS referentes àquele material.

 

No caso, tenho o campo do material:

 

<label for="">Material:</label>
									
									<?php 
											$sql = "SELECT nome, codMaterial FROM material";
											$result = mysql_query($sql) or die (mysql_error());	
											
											echo "<select id='small' name='mat1'>";
											while($row = mysql_fetch_assoc($result)){
												echo "<option value=" . $row["codMaterial"] . ">" . $row["nome"] . "</option>";
											}
											echo "</select>";
											mysql_free_result($result);
									?>

Em baixo dele, tenho o campo Técnica (que ainda não fiz):

 

<label for="">Técnica:</label>
									
									<select id="small" name="tec1">
									    	<option> </option>
									</select>

 

Quando selecionar um material tipo MADEIRA, quero que atualize o campo TÉCNICA com os valores de madeira (que estão no banco de dados já modelado). Se o usuário colocar VIDRO, os valores mudam, de acordo com as técnica cadastradas para o material tipo VIDRO.

 

Consultas em PHP eu sei. JavaScript sei quase nada. Se alguém puder me ajudar agradeço!!

 

[]'s

[angelorubin 142]

Boa noite,

 

Com jQuery você pode fazer da seguinte forma:

 

1 - Utilize o método on com o evento change para pegar a mudança do select de materiais.

2 - Feito isso envie via $.ajax para a sua pagina PHP que irá receber este dados, pesquisar no banco e retornar.

$.ajax({
	url: "tecnica.php",
	type:'post',
	data: $('#mat').val(),
	success: function(dadosRetorno){
	     // Loop com os dados retornados para popular o select tecnica
	}
})

 

3 - Retorne o resultado com json_encode (por exemplo) para o $.ajax solicitado.

4 - Com o resultado é só popular o select técnica.

 

Segue os respectivos links do que vai precisar na explicação, siga-os e monte algo que vamos te ajudando conforme necessário.

[cristianoolv 93]

http://forum.imasters.com.br/topic/502663-digitar-num-campo-e-carregar-outros/#entry1989214

 

nu seu caso, é só por pra criar tags option, ou simplesmente as altera-las.

[peripatus 0]

$(document).ready(function(){
	$('#mat1').on('change', function(){
		$.ajax({
			url:"tecnicas.php",
			type:'post',
			data: $('#mat1').val(),
			success: function (dadosRetorno){

			}

		});
	});
});

forms.js

 

<?php
	$tipoMateril = $_POST['mat1'];

	$sql = "SELECT t.nome FROM tecnica AS t WHERE t.codTecnica IN ( SELECT mt.codTecnica FROM material_tecnica AS mt WHERE mt.codMaterial = 1 )";
	$result = mysql_query($sql) or die (mysql_error());	

	$i = 0;
	while($row = mysql_fetch_assoc($result)){
		$tecnica[0] = $row["nome"];
		$i = $i + 1;
	}
?>

tecnicas.php

 

Como faço o envio do codigo PHP para o JS? Não sei como enviar de um e receber no outro. Na verdade não entendi como fazer os 2 se comunicarem!

 

 

[cristianoolv 93]

echo ('String que vai pro javascript !');

[peripatus 0]

Não consegui fazer funcionar ainda !!!!

 

Olhem o código:

 

#####################

forms.js

$(document).ready(function(){
	$('#mat1').on('change', function(){
		$.ajax({
			url:'tecnicas.php?id=' + $(this).val(),
			type:'GET',
			dataType:'text',
			data: $('#mat1').val(),
			success: function (dadosRetorno){
				console.log(dadosRetorno);
			}
		});
	});
});

 

#####################

tecnicas.php

<?php	
	$id = $_GET['id'];
	echo $id;
?>

###################

 

 

Na hora que eu vou na página, e dou um change no valor do meu campo.No console do chrome é escrito:

No database selected

 

Alguém poderia me ajudar ?!

[angelorubin 142]

Olá,

 

Pode fazer assim:

 

jQuery

$(function(){
    $('#mat1').on('change', function(){
    /* Este objeto é necessário mesmo? neste caso nem tanto, 
       porém caso deseje passar mais informações um dia, já saberá como fazer. 
    */
        var objDados = {
            valor: $(this).val()
        }
        $.ajax({
            url:'tecnicas.php',
            type:'post',
            data: objDados,
            success: function (retorno){
                console.log(retorno);
            }
        });
    });
});

PHP

print_r($_POST);

Espero que ajude.

[peripatus 0]

O erro continua! No database selected!

[angelorubin 142]

Olá,

 

No seu arquivo tecnicas.php, como você esta fazendo a consulta ao banco?

[peripatus 0]

Consegui arrumar!

Um dos erros que estava acontecendo era o tratamento de exceção do SQL. Não estava deixando executar o restante do código.

O código ficou assim:

 

############### tecnicas.php ############

<?php

	include ("configBd.php");

	$id_material = $_POST['mat1'];
	
	$sql = "SELECT t.nome, t.codTecnica FROM tecnica AS t WHERE t.codTecnica IN ( SELECT mt.codTecnica FROM material_tecnica AS mt WHERE mt.codMaterial = " . $id_material . ")";
	$result = mysql_query($sql) or trigger_error(mysql_error()." ".$sql);	
	
	$html = "";
	while($row = mysql_fetch_assoc($result)){
			$html .= "<option value=" . $row['codTecnica'] . ">" . $row['nome'] . "</option>";
			echo '<script type="text/javascript">alert ("' . $row['nome'] . '");</script>';
	}

	echo $html;
?>

 

######### forms.js ###########

 

$(document).ready(function() {
    $('#mat1').on('change', function(){        
        $.ajax({
            url:'scripts/tecnicas.php',
            type:'post',
            data: {mat1 : $('#mat1').val()},
            success: function (data){
             	$('#tec1').empty().append(data);
            }
        });
    });
});

 

######## configBd.php ########

 

<?php
	$host = "localhost";
	$database = "museu";
	$login_db = "root";
	$senha_db = "";
	
	mysql_connect($host, $login_db) or die (mysql_error());
	mysql_select_db($database) or die (mysql_error()); 
?>

[angelorubin 142]

OK, que bom que conseguiu !