2016-05-17 5 views
1

jQueryを通じてダイナミック入力テキストボックスフィールドを作成しています。ユーザーがリンクをクリックすると、2つの入力フィールドが作成されます。左の入力では、ユーザーはコード(またはDB表ID)を入力できます。右の入力では、IDに関連する名前が結果として表示されます。ダイナミックフィールドを使用したAJAX/jQueryによるデータベース情報の取得に関する問題

これを達成するために、私は'blur'イベントを添付してAJAXリクエストをPHPスクリプトに送り、データベースに情報を取得するように問い合わせます。しかし、私のコードは動作していません。

ここで私はこれまで試したものです:

consulta.php

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

      var contenedor  = $("#contenedor"); 
      var AddButton  = $("#agregarCampo"); 

      var x = $("#contenedor div").length + 1; 
      var FieldCount = x-1; 

      $(AddButton).click(function (e) 
      { 
       if(x) 
       { 
        FieldCount++; 
        $(contenedor).append('<div class="added"><input type="text" name="codigo[]" id="campo'+FieldCount+'" placeholder="Ingrese codigo ID '+ FieldCount +'"/><input type="text" name="nombre" id="nombre'+FieldCount+'" value=""></div>'); 
        x++; 
       } 
      return false; 
      }); 

      }); 
</script> 
</head> 
<body> 
    <div id="cliente"> 
<table> 
    <tr> 
    <td> 
     Codigo 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <div id="contenedor"> 
       <div class="added"> 
       <input type="text" name="codigo[]" id="codigo" placeholder="Ingrese codigo ID" required/> 
       <input type="text" name="nombre" id="nombre" value=""> 
       </div> 
      </div> 
     <p> 
     <a id="agregarCampo" href="#">Agregar Campo</a> 
     </p> 

    </td> 
    </tr> 
</table> 
</div> 
    <script type="text/javascript" src="cliente.js"></script> 
</body> 
</html> 

cliente.js

$(function(){ 
    $('#cliente').on('blur','#codigo',function(){ 
    var id = $(this).parents('div').attr('id'); 
     var valor = this.value; 
     if(valor.length>=1){ 
     var consulta = $.ajax({ 
      type:'POST', 
      url:'cliente.php', 
      data:{codigo:valor}, 
      dataType:'JSON' 
     }); 

     consulta.done(function(data){ 
      if(data.error!==undefined){ 
       $('#estado').html('Ha ocurrido un error: '+data.error); 
       return false; 
      } else { 
       if(data.nombre!==undefined){$("#cliente #nombre").val(data.nombre);} 
       return true; 
      } 
     }); 

     } 
    }); 
}); 

cliente.php

<?php 

$codigo=$_POST['codigo']; 
$conexion=mysqli_connect("localhost","root","","gabu"); 
if (mysqli_connect_errno($conexion)) { 
    echo "Fallo al conectar a MySQL: " . mysqli_connect_error(); 
} 

$registros=mysqli_query($conexion, "select * from estudiantes where estudiante_id='$codigo'") or 
    die("Problemas en el select:".mysqli_error()); 

if ($reg=mysqli_fetch_array($registros)) 
{ 
    $return = array('nombre' => $reg['nombre_estudiante']); 
} else { 
    $return = array('nombre'=>'No existe el registro'); 
} 
    die(json_encode($return)); 
?> 

このようになります。助けてください。ありがとう。

enter image description here

+1

その不明確あなたはより多くのことをあなたの質問を更新してください求めているもの正確な問題とあなたがスクリプトにしたいものを簡潔にしてください。 – cmorrissey

答えて

0

あなたにはいくつか問題があります。一番際立つものは、HTML IDとクラスです。参照のためにクラスを使用できるので、IDを動的に作成する理由はありません。また、PHPでは、mysqliの正しい構文を使用して、適切なJSONをヘッダーと共に返す必要があります。

これは私がどうなるのかです:

HTML/JS:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 

       var $contenedor = $("#contenedor"); 
       var $AddButton = $("#agregarCampo"); 

       $AddButton.click(function (e) { 
        e.preventDefault(); 
        var FieldCount = $contenedor.children('div').length + 1; 
        $contenedor.append('<div class="added">\ 
              <input type="text" class="codigo_input" placeholder="Ingrese codigo ID ' + FieldCount + '"/>\ 
              <input type="text" class="nombre_input" >\ 
              </div>'); 
       }); 

      }); 
     </script> 
    </head> 
    <body> 
     <div id="cliente"> 
      <table> 
       <tr> 
        <td> 
         Codigo 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <div id="contenedor"> 
          <div class="added"> 
           <input type="text" class="codigo_input" placeholder="Ingrese codigo ID" required/> 
           <input type="text" class="nombre_input" value=""> 
          </div> 
         </div> 
         <p> 
          <a id="agregarCampo" href="#">Agregar Campo</a> 
         </p> 

        </td> 
       </tr> 
      </table> 
     </div> 
     <script> 
      $(function() { 
       $('#cliente').on('blur', '.codigo_input', function() { 
        var $container = $(this).closest(".added"); 
        var valor = $(this).val(); 

        if (valor.length >= 1) { 

         var consulta = $.ajax({ 
          type: 'POST', 
          url: 'cliente.php', 
          data: {codigo: valor}, 
          dataType: 'JSON' 
         }); 

         consulta.done(function (data) { 
          if (data.error !== undefined) { 
           $('#estado').html('Ha ocurrido un error: ' + data.error); 
           return false; 
          } else { 
           if (data.nombre !== undefined) { 
            $container.find('.nombre_input').val(data.nombre); 
           } 
           return true; 
          } 
         }); 

         consulta.error(function(a,b,c){ 
          console.log(a); 
          console.log(b); 
          console.log(c); 
         }); 

        } 
       }); 
      }); 
     </script> 
    </body> 
</html> 

PHP

$codigo = $_POST['codigo']; 
$conexion = mysqli_connect("localhost", "root", "", "gabu"); 
if (mysqli_connect_errno()) { 
    echo "Fallo al conectar a MySQL: " . mysqli_connect_error(); 
} 

$registros = mysqli_query($conexion, "select * from estudiantes where estudiante_id='$codigo'") or 
die("Problemas en el select:" . mysqli_error($conexion)); 

if (mysqli_num_rows($registros) > 0) { 
    $reg = mysqli_fetch_assoc($registros); 
    $return = array('nombre' => $reg['nombre_estudiante']); 
} else { 
    $return = array('nombre' => 'No existe el registro'); 
} 

header('Content-Type: application/json'); 
echo json_encode($return); 
+1

本当にありがとう、これは私が必要なものでした...ありがとう、私は理解していないので、今私は理解しています。 @CodeGodie – HerAsd

0

私は別にフロントエンドとバックエンドをデバッグすることをお勧めしたいです。

私だけ表示JSON

<?php 

$codigo=$_POST['codigo']; 

$return = $_POST; 
$return = array('nombre' => 1337); 

die(json_encode($return)); 
?> 

にclinte.phpを書き換えたのだが、それが働いているようです。

IDの列で選択する場合は、数字である必要がありますか?

DB構造も追加できますか?

+0

コードを入れて名前を持ってきたのですが、コードがあると表示されていなければ、すでに解決していますが、あなたが正しいと思うのですが、mysqliはあなたに感謝します。 @リチャード – HerAsd

関連する問題