Jump to content
security

Passar dados entre PHP MySQL com JSON

Recommended Posts

security

Boas,

eu estou a criar uma plataforma em PHP, onde tenho uma pagina com um formulario em que tem varios campos.

Nesse formulario ao escrever a referencia vai aparecendo as referencias iguais (tipo pesquisa do google), ate aqui nada de mais. esta a funcionar. o problema e apos ter a referencia pretendida selecionada é necessário que parte do formulario seja preenchido automaticamente. Aí chegamos à parte onde parei. tenho estado a procura de exemplos mas sinceramente nao estou a entender muito bem o funcionamento do json.

o formulário é o seguinte:

<form action="mysql.php" id="mat_list" name="mat_list" method="get" class="form-inline">
					<input name="ref"  id="ref" style="text-transform:uppercase;" size="5" class="form-control input-sm">
					<input id="designacao" name="designacao" size="12" type="text" placeholder="designacao" class="form-control input-sm">
					<select name="marca" id="marca" class="form-control input-sm" onfocus="javascript:abre_reg_marca()">
						<option value="0"> </option>
					<?PHP
						$sqlMarca = "SELECT ID_marca, marca FROM tb_marca WHERE ID_tipomarca=2  ORDER BY marca ASC";
						$rsMarca = mysql_query($sqlMarca);
						while ($m = mysql_fetch_array($rsMarca)){
							if ($m['ID_marca'] == $ID_marca){
								echo '<option value="'.$m["ID_marca"].'" selected>'.$m["marca"].'</option>';
							}
							echo '<option value="'.$m["ID_marca"].'">'.$m["marca"].'</option>';
						}
					?>
					</select>  
					<input id="qtd" name="qtd" type="text" size="3" placeholder="qtd" class="form-control input-sm">
					<select name="unimed" id="unimed" class="form-control input-sm">
					<?PHP
						$sqlUn = "SELECT * FROM tb_unit_medida";
						$rsUn = mysql_query($sqlUn);
						while ($Un = mysql_fetch_array($rsUn)){
							echo '<option value="'.$Un["ID_unimed"].'">'.$Un["unimed"].'</option>';
						}
					?>
					</select>
					<input id="precoUnit" name="precoUnit" size="2" type="text" placeholder="p unit" class="form-control input-sm">
					<input id="desc" name="desc" type="text" min="0" max="100" maxlength="3" size="4" placeholder="desc" class="form-control input-sm">
					<?php
						$sqliva = "SELECT * FROM tb_iva ORDER BY ID_iva DESC";
						$rsiva = mysql_query($sqliva);
					?>
					<select name="iva" id="iva" class="form-control input-sm">
							<?PHP
								while ($i = mysql_fetch_array($rsiva)){
									echo '<option value="'.$i["ID_iva"].'">'.$i["iva"].'%</option>';
								}
							?>
					</select>  
					<input id="v_liq" name="v_liq" type="text" size="2" onfocus="javascript:calc_valor_liq()" placeholder="vliq" class="form-control input-sm">
					<button id="btn_submit" name="btn_submit" value="mat_reg" class="btn btn-success fa fa-save"></button>
				</form>

A minha duvida é como posso fazer para quando selecionar a referencia ele pesquise os restantes dados associados e os coloque nos locais corretos textbox e selects


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

Boas,

podes mostar todo o código relevante?

Por exemplo, dizes:

ao escrever a referencia vai aparecendo as referencias iguais (tipo pesquisa do google)

mas o teu campo "ref" não tem nenhum javascript associado (pelo menos directamente) portanto gostava de perceber como fazes isso.

O processo para fazeres o que pretendes é semelhante a este do campo "ref" que dizes que já funciona, daí o meu pedido.

Edited by tiago.f

Share this post


Link to post
Share on other sites
security

Eu encontrei um exemplo na internet e apliquei-o. Esta o exemplo que usei nesta pasta zipada.

https://drive.google.com/file/d/0B01nZJPWd-skTUc5ZndVRGFZMlk/view?usp=sharing

no index contem o seguinte codigo

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>  
$(document).ready(function(){
	$("#ref").autocomplete("autocomplete.php", {
		selectFirst: true
	});
});
</script>

depois a o ficheiro autocomplete.php - ja pensei em usar este ficheiro para efetuar a pesquisa, afinal posso pesquisar os dados todos na mesma sql

<?php
 $q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
$mysqli=mysqli_connect('localhost','root','','nomeDB') or die("Database Error");
$sql="SELECT ref, designacao FROM tb_material WHERE ref LIKE '%$my_data%' ORDER BY designacao";
$result = mysqli_query($mysqli,$sql) or die(mysqli_error());
if($result){
while($row=mysqli_fetch_array($result)) {
				$dados = $row['designacao'];
				echo $row['ref']."\n";
}
}
?>

Edited by security

"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

Bem, o jquery autoconplete não vai servir para isso e não deves alterar o teu autoconplete.php.

Usando Ajax deves chamar outro php que vai pesquisar a tua BD pela referência. Se encontra tirar 1 e só 1 registo deve devolver os dados associados (marca,preço,etc) que depois deves usar para preencher os respectivos campos.

Php json_encode

$.ajax (faz parte do Jquery)

E combina os dois

Share this post


Link to post
Share on other sites
security

mas como é que isso é???

é precisamente isso que nao sei fazer?

Crio outra estrutura igual?

mas depois como passo os dados para os respetivos campos


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

Por alto

Cria um novo php, por exemplo, getReferencia.php

$referencia = $_GET['referencia"];
// fazer queries à BD com a referencia
// se existir 1 e só 1 resultado vamos criar a variavel $res
// com a dados necessarios (a partir do resultado do query)
$res = [
"ref" => "1234",
"marca" => "mercedes"
];
// devolver o resultado
echo json_encode($res);

depois no teu html/javascript:

<script>
   function getRef(event) {
       var ref = event.target.value;

           $.ajax({
               url: "getReferencia.php",
               dataType: 'json',
               type:"GET"
               data: "?referencia=" + ref,
               success: function(response) {
                   // response é um objecto
                   if (response.marca !== undefined ) {
                       $("#marca").val(response.marca);
                   }
                   // preencher outros
               }                             
           });
   }
</script>
<input name="ref"  id="ref"  onchange="getRef()">

ps: nao testei isto, mas a lógica é esta...

Edited by tiago.f

Share this post


Link to post
Share on other sites
security

ou seja o script no index fica assim?!

<script>
   function getRef(event) {
    var ref = event.target.value;
	    $.ajax({
		    url: "psqMat.php",
		    dataType: 'json',
		    type:"GET"
		    data: "?ref=" + ref,
		    success: function(response) {
			    // response é um objecto
			    $("#designacao").val(response.designacao);
			    if (response.marca !== undefined ) {
				    $("#marca").val(response.marca);
			    }
			    if (response.uniMed !== undefined ) {
				    $("#unimed").val(response.uniMed);
			    }
			    $("#precoUnit").val(response.precoUnit);
			    if (response.iva !== undefined ) {
				    $("#iva").val(response.iva);
			    }
		    }							
	    });
   }
</script>

e a pagina que crio a parte fica deste genero???

include 'includes/conexao.php';
   $ref = $_GET['ref'];
   $sql = "SELECT ref, designacao, ID_marca, ID_unimed, precoUnit, ID_iva FROM tb_material WHERE ref=".$ref;
   $result = mysql_query($sql);
   // fazer queries à BD com a referencia se existir 1 e só 1 resultado vamos criar a variavel $res / com a dados necessarios (a partir do resultado do query)
   if ($r = mysql_fetch_array($result)){
       $res = [
           "ref" => $r['ref'],
           "designacao" => $r['designacao'],
           "marca" => $r['ID_marca'],
           "uniMed" => $r['ID_unimed'],
           "precoUnit" => $r['precoUnit'],
           "iva" => $r['ID_iva']
       ];
   }// devolver o resultado
   echo json_encode($res);

Desta forma nao me está a devolver nenhum valor


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

Devia ser mysql_fetch_assoc certo?

A função Javascript getRef é chamada onde? Puseste o onchange do input "ref"?

Share this post


Link to post
Share on other sites
security

sim coloquei no <input name="ref" id="ref" onchange="getRef()" ... >


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
security

o ficheiro auxiliar de pesquisa (psqMat.php)

<?php
   include 'includes/conexao.php';
   $ref = $_GET['ref'];
   $sql = "SELECT ref, designacao, ID_marca, ID_unimed, precoUnit, ID_iva FROM tb_material WHERE ref=".$ref;
   $result = mysql_query($sql);
   $res = array();
   // fazer queries à BD com a referencia se existir 1 e só 1 resultado vamos criar a variavel $res / com a dados necessarios (a partir do resultado do query)
   while ($r = mysql_fetch_assoc($result)){
       $res = [
               "ref" => $r['ref'],
               "designacao" => $r['designacao'],
               "marca" => $r['ID_marca'],
               "uniMed" => $r['ID_unimed'],
               "precoUnit" => $r['precoUnit'],
               "iva" => $r['ID_iva']
           ];   
   } 
   echo json_encode($res);
?>

O ficheiro index.php (onde esta o script)

<script>
   function getRef(event) {
       var ref = event.target.value;

           $.ajax({
               url: "psqMat.php",
               dataType: 'json',
               type:"GET"
               data: "?ref=" + ref,
               success: function(response) {
                   // response é um objecto
                   $("#designacao").val(response.designacao);
                   if (response.marca !== undefined ) {
                       $("#marca").val(response.marca);
                   }
                   if (response.uniMed !== undefined ) {
                       $("#unimed").val(response.uniMed);
                   }
                   $("#precoUnit").val(response.precoUnit);
                   if (response.iva !== undefined ) {
                       $("#iva").val(response.iva);
                   }
               }                             
           });
   }
</script>

e por fim o fomulario


<form action="mysql.php" id="mat_list" name="mat_list" method="get" class="form-inline">
    <input name="ref" onchange="getRef()" id="ref" style="text-transform:uppercase;" size="5" class="form-control input-sm">
...


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

Parece tudo bem.

Terás que fazer debug do php (qual o valor de $res num caso em que a referência exista?) e do Java script (ele chama a função getRef? Entra dentro do "success"?

Share this post


Link to post
Share on other sites
security

eu usei o netbeans para fazer o debugging e ele nao pega a função. ja experimentei mudar a situação em que deve pegar mas nada


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

<input name="ref" onchange="getRef(this)" id="ref" style="text-transform:uppercase;" size="5" class="form-control input-sm">

function getRef(elem) {
	var ref = elem.value;

NOTA: o onchange só é disparado quando o cursor "sai" do campo. V~e o evento "oninput" (html5) a ver se é mais aedquado..

Edited by Rui Carlos

Share this post


Link to post
Share on other sites
security

ja tentei tudo isso ja alterei os parametros e nada. nao funciona. nem se quer chama a função


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

ja viste a consola do browser?

falta uma virgula em

type:"GET"

De qq modo isto funciona:

<html>
<head>
<script>
   function getRef(o) {
    var ref = o.value;

    $.ajax({
	    url: "psqMat.php",
	    dataType: 'json',
	    type:"GET",
	    data: "?ref=" + ref,
	    success: function(response) {
		    // response é um objecto
		    $("#designacao").val(response.designacao);
		    if (response.marca !== undefined ) {
			    $("#marca").val(response.marca);
		    }
		    if (response.uniMed !== undefined ) {
			    $("#unimed").val(response.uniMed);
		    }
		    $("#precoUnit").val(response.precoUnit);
		    if (response.iva !== undefined ) {
			    $("#iva").val(response.iva);
		    }
	    }							
    });
   }
</script>
</head>
<body>
<form action="mysql.php" id="mat_list" name="mat_list" method="get" class="form-inline">
 <input name="ref" oninput="getRef(this)" id="ref" style="text-transform:uppercase;" size="5" class="form-control input-sm">
   </form>
</body>

Share this post


Link to post
Share on other sites
security

A consola do browser da-me isto:

psqMat.js:1 Uncaught ReferenceError: $ is not defined

sb-admin-2.js:3 Uncaught TypeError: $(...).metisMenu is not a function


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

O segundo erro não sei. O primeiro é porque estas a carregar o jquery depois do psqMat

Share this post


Link to post
Share on other sites
security

??? o jquery carrega antes das funções do javascript!!!

Mas para despiste de erros ja alterei o posição do js mas mesmo assim nao da nada...


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
security

É o seguinte,

no input alterei o onchange por onblur ficando assim

<input name="ref" onblur="getRef(this)" id="ref" style="text-transform:uppercase;" size="5" class="form-control input-sm">

entretanto coloquei um alert em varios locais do script para perceber ate onde chega.

o 1º foi logo a seguir à variavel que recebe o valor do input. e ate aqui os dados chegam. daqui para a frente não consegui obter mais nada.


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

mostra o html todo sff.

e a seguir ao "success" acrescenta a callback de erro:

	    success: function(response) {
		   ....
	    },
	    error: function (textStatus, errorThrown) {
		    alert("shit happened: " + textStatus);
	    }

Share this post


Link to post
Share on other sites
security

o alert que falou para colocar da o seguinte:

shit happened: [object XMLHttpRequest]

o index ate ao <body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh1tml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oficina Marcelo - Gestão de clientes</title>

<script type='text/javascript' src='js/psqMat.js'></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>

<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>

<script src="dist/js/sb-admin-2.js"></script>

<script type="text/javascript" src="func.js"></script>

<!-- Bootstrap Core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- MetisMenu CSS -->
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="dist/css/sb-admin-2.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
	$("#ref").autocomplete("autocomplete.php", {
		selectFirst: true
	});
});
</script>
<script type="text/javascript">
function getRef(o) {
	var ref = o.value;
   alert("a referencia a pesquisar é: " + ref); //Ate aqui chega e passa o valor da text
	$.ajax({
		url: "psqMat.php",
		dataType: 'json',
		type:"GET",
		data: "?ref=" + ref,
		success: function(response) {

// response é um objecto
			alert("Chegou!!!");
			$("#designacao").val(response.designacao);
			if (response.marca !== undefined ) {
				$("#marca").val(response.marca);
			}
			if (response.uniMed !== undefined ) {
				$("#unimed").val(response.uniMed);
			}
			$("#precoUnit").val(response.precoUnit);
			if (response.iva !== undefined ) {
				$("#iva").val(response.iva);
			}
		}							
	});
}
</script>

</head>

<body>
 

o formulario


<td colspan="8">

				<form action="mysql.php" id="mat_list" name="mat_list" method="get" class="form-inline">
					<input name="ref" onblur="getRef(this)" id="ref" style="text-transform:uppercase;" size="5" class="form-control input-sm">
					<input id="designacao" name="designacao" size="12" type="text" placeholder="designacao" class="form-control input-sm">
					<select name="marca" id="marca" class="form-control input-sm" onfocus="javascript:abre_reg_marca()">
						<option value="0"> </option>
					<?PHP
						$sqlMarca = "SELECT ID_marca, marca FROM tb_marca WHERE ID_tipomarca=2  ORDER BY marca ASC";
						$rsMarca = mysql_query($sqlMarca);
						while ($m = mysql_fetch_array($rsMarca)){
							if ($m['ID_marca'] == $ID_marca){
								echo '<option value="'.$m["ID_marca"].'" selected>'.$m["marca"].'</option>';
							}

							echo '<option value="'.$m["ID_marca"].'">'.$m["marca"].'</option>';
						}
					?>
					</select>  
					<input id="qtd" name="qtd" type="text" size="3" placeholder="qtd" class="form-control input-sm">
					<select name="unimed" id="unimed" class="form-control input-sm">
					<?PHP
						$sqlUn = "SELECT * FROM tb_unit_medida";
						$rsUn = mysql_query($sqlUn);
						while ($Un = mysql_fetch_array($rsUn)){
							echo '<option value="'.$Un["ID_unimed"].'">'.$Un["unimed"].'</option>';
						}
					?>
					</select>
					<input id="precoUnit" name="precoUnit" size="2" type="text" placeholder="p unit" class="form-control input-sm">
					<input id="desc" name="desc" type="text" min="0" max="100" maxlength="3" size="4" placeholder="desc" class="form-control input-sm">
					<?php
						$sqliva = "SELECT * FROM tb_iva ORDER BY ID_iva DESC";
						$rsiva = mysql_query($sqliva);
					?>
					<select name="iva" id="iva" class="form-control input-sm">
							<?PHP
								while ($i = mysql_fetch_array($rsiva)){
									echo '<option value="'.$i["ID_iva"].'">'.$i["iva"].'%</option>';
								}
							?>
					</select>  
					<input id="v_liq" name="v_liq" type="text" size="2" onfocus="javascript:calc_valor_liq()" placeholder="vliq" class="form-control input-sm">
					<button id="btn_submit" name="btn_submit" value="mat_reg" class="btn btn-success fa fa-save"></button>

				</form>
						<span class="help-block"><a href="#" class="fa fa-maxcdn" data-toggle="modal" data-target="#modal_marca"> Adicionar marca</a></span>
					</td>
 

"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

Se deu shit então o script php está a dar erro. Faz debug e diz nos qual é.

Já agora, carregar 3 vezes o jquery não me parece boa ideia.

Também continuas a ter o psqMat.js antes do jquery....

Edited by tiago.f

Share this post


Link to post
Share on other sites
security

Não estou a conseguir... ja tentei remover o jquery mas removendo-o o autocomplete nao funciona.

tambem ja coloquei o psqMat.js depois do jquery e tudo mais mas continua sem dar


"Innovation distinguishes between a leader and a follower." Steve jobs.

Share this post


Link to post
Share on other sites
tiago.f

explica isto sff

<script type='text/javascript' src='js/psqMat.js'></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
[...]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
[....]
<script type="text/javascript" src="jquery.js"></script>

pq 3 jquerys ?

pq o psqMat.js antes do jquery ?

Share this post


Link to post
Share on other sites

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.