2016-04-03 12 views
0

MySQL satırlarını getirdim ve Bootstrap modal ile döngüye girdim ve verilerin ajax yardımıyla PHP betiğine (update.php) gönderildiği bir form hazırladım. Ama karşılığında sadece son satırın çıktısını alıyorum. Özgün kimliğine sahip belirli bir öğrencinin kaydını almam gerekiyor.Tablodan önyükleme türüne PHP'den nasıl değer aktarılır?

HTML: Bu test edilmemiştir

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
<table class="table table-responsive"> 
         <thead> 
         <tr> 
          <th>NAME</th> 
          <th>ROLL NUMBER</th> 
          <th>CONTACT NO</th> 
          <th>ADDRESS</th> 
          <th>EDIT</th> 
         </tr> 
         </thead> 
         <tbody> 

           <?php 


      $query = "SELECT * FROM students ORDER BY id DESC"; 
      $query_run = mysqli_query($connection, $query); 
      if($query_run){ 

       while($row = mysqli_fetch_assoc($query_run)){ 
        $id = $row['id']; 
        $name = $row['name']; 
        $rollno = $row['rollno']; 
        $contact = $row['contact']; 
        $address = $row['address']; 
        echo "<tr>"; 
        echo '<td>' . $name . '</td>'; 
        echo '<td>' . $rollno . '</td>'; 
        echo '<td>' . $contact . '</td>'; 
        echo '<td>' . $address . '</td>'; 
        echo "<td><button class='btn btn-link btn-custom dis' data-toggle='modal' data-target='#myModal$id'> 
    EDIT</button> </td>"; 
        echo '</tr>'; 
        ?> 

                <div class="modal fade" id="myModal<?php echo $id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
            <div class="modal-dialog" role="document"> 
             <div class="modal-content"> 
              <div class="modal-header"> 
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
               <h4 class="modal-title" id="myModalLabel">EDIT RECORD</h4> 
              </div> 
              <div class="modal-body"> 

               <form id="updateValues" action="update.php" method="POST" class="form"> 
                <div class="form-group"> 
                 <label for="name">NAME</label> 
                 <input type="text" class="form-control" name="name" id="name" value="<?php echo $name; ?>"> 
                </div> 
                <div class="form-group"> 
                 <label for="rollno">ROLL NO</label> 
                 <input type="text" class="form-control" name="rollno" id="rollno" value="<?php echo $rollno; ?>"> 
                </div> 
                <div class="form-group"> 
                 <label for="contact">CONTACT</label> 
                 <input type="text" class="form-control" name="contact" id="contact" value="<?php echo $contact; ?>"> 
                </div> 
                <div class="form-group"> 
                 <label for="address">ADDRESS</label> 
                 <textarea class="form-control" rows="3" name="address" id="address"><?php echo $address; ?></textarea> 
                </div> 
                <input type="hidden" name="id" value="<?php echo $id; ?>"> 
                <input type="submit" class="btn btn-primary btn-custom" value="Save changes"> 
               </form> 

              </div> 
              <div class="modal-footer"> 
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
               <div id="results"></div> 
              </div> 

             </div> 
            </div> 
           </div> 
        <?php } 
      }?> 
         </tbody> 
        </table> 
</body> 
</html> 




JS: 



       $(document).ready(function(){ 

        var values, url; 


         $('#updateValues').submit(function(e){ 

          e.preventDefault(); 
          values = $(this).serialize(); 
          url = $(this).attr('action'); 


          $.post(url, values, function(data){ 
          $('#results').html(data); 
          }); 
         }); 
       }); 

Update.php: 

<?php 


if(isset($_POST['name'])&&isset($_POST['rollno'])&&isset($_POST['contact'])&&isset($_POST['address'])){ 
    $id = $_POST['id']; 
    $name = $_POST['name']; 
    $rollno = $_POST['rollno']; 
    $contact = $_POST['contact']; 
    $address = $_POST['address']; 

    echo "$id $name $rollno $contact $address"; 
}else{ 
    echo 'ERROR!'; 
} 

?> 
+1

ids benzersiz olması gerekir, 'updateValues' – kero

cevap

2

/debug ama buna benzer kodunuzu refactor:

<?php 
    $query = "SELECT * FROM students ORDER BY id DESC"; 
    $query_run = mysqli_query($connection, $query); 
    if($query_run){ 

    $out = ' 
     <table class="table table-responsive"> 
      <thead> 
      <tr> 
       <th>NAME</th> 
       <th>ROLL NUMBER</th> 
       <th>CONTACT NO</th> 
       <th>ADDRESS</th> 
       <th>EDIT</th> 
      </tr> 
      </thead> 
      <tbody> 
    '; 

     while($row = mysqli_fetch_assoc($query_run)){ 
      $out .= '<tr class="trID_' .$row['id']. '">'; 
      $out .= '<td class="td_name">' . $row['name'] . '</td>'; 
      $out .= '<td class="td_rollno">' . $row['rollno'] . '</td>'; 
      $out .= '<td class="td_contact">' . $row['contact'] . '</td>'; 
      $out .= '<td class="td_address">' . $row['address'] . '</td>'; 
      $out .= "<td><button class='td_btn btn btn-link btn-custom dis'>EDIT</button> </td>"; 
      $out .= '</tr>'; 
     } 
     $out .= '</tbody></table> 
     echo $out; 
?> 

<script> 
    $(document).ready(){ 
     $('.td_btn').click(function(){ 
      var $row = $(this).closest('tr'); 
      var rowID = $row.attr('class').split('_')[1]; 
      var name = $row.find('.td_name').val(); 
      var rollno = $row.find('.td_rollno').val(); 
      var contact = $row.find('.td_contact').val(); 
      var address = $row.find('.td_address').val(); 
      $('#frm_id').val(rowID); 
      $('#frm_name').text(name); 
      $('#frm_rollno').text(rollno); 
      $('#frm_contact').text(contact); 
      $('#frm_address').text(address); 
      $('#myModal').modal('show'); 
     }); 
    });//END document.ready 
</script> 

     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="myModalLabel">EDIT RECORD</h4> 
        </div> 
        <div class="modal-body"> 

         <form id="updateValues" action="update.php" method="POST" class="form"> 
          <div class="form-group"> 
           <label for="name">NAME</label> 
           <input type="text" class="form-control" name="name" id="frm_name"> 
          </div> 
          <div class="form-group"> 
           <label for="rollno">ROLL NO</label> 
           <input type="text" class="form-control" name="rollno" id="frm_rollno"> 
          </div> 
          <div class="form-group"> 
           <label for="contact">CONTACT</label> 
           <input type="text" class="form-control" name="contact" id="frm_contact"> 
          </div> 
          <div class="form-group"> 
           <label for="address">ADDRESS</label> 
           <textarea class="form-control" rows="3" name="address" id="frm_address"></textarea> 
          </div> 
          <input type="hidden" name="frm_id"> 
          <input type="submit" class="btn btn-primary btn-custom" value="Save changes"> 
         </form> 

        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <div id="results"></div> 
        </div> 

       </div> 
      </div> 
     </div> 
<?php 
     } 
    } 
?> 

Notlar:

(1) oluştur bir tablonun tüm değişkeninde, sonra değişkeni bir kerede çıktıya alın.

(2) Her tablo satırı için yalnızca bir kalıcı, bir modele ihtiyacınız vardır. Bu nedenle, döngü sırasında iç oluşturma modunu kaldırın.

(3) için jQuery kullanın:
      (a) üst üste düğmesine tıklayın tespit
      (b) modal
      (c) doldurmak alanlar o satırın tablo verileri almak
      (d) display modal
Eğer jQuery kullanan Bootstrap kullanıyorsunuz, bu yüzden jQuery'yi kullanmak için mantıklısınız.

(4) giriş alanları genel Tablo hücreleri değerleri almak için jQuery kullanarak:
      (a) '.text() - Tablo hücrelerden
      (b)' .val() - <input> veya <textarea>


Here is a jsFiddle Demo ile oynayabilirsiniz, tıklatılan satıra göre modal oluşturmak için jQuery'yi nasıl kullanabileceğinizi gösterir.

+0

değerleri görüntülenmiyor düzenleme modal göstermiyor –

+0

@UmairKhan Fixed. Bunu yakaladığın için teşekkürler. – gibberish

+0

şimdi güzel görünüyor –

İlgili konular