ajaxの更新後にtdの内容を変更する方法

Question

ajaxの更新後に一意のIDを持つmy tdの内容を更新する必要があります。

私のアプローチはうまくいきませんが、ajaxは成功ですが、tdはページのリロード後にのみ更新されます。

$(document).ready(function(){ 
     $('body').on('click', '.editButton', function(e){ 

      var postID = $(this).val(); 
      var postURL = "../Controller/update.php"; 
      var postNama = $("#nama"+postID).val(); 
      var postMSISDN = $("#msisdn"+postID).val(); 
      var postSMS = $("#sms"+postID).val(); 

      $.ajax({ 
       type: "POST", 
       url: postURL, 
       data: 
       { 
        nama: postNama, 
        msisdn: postMSISDN, 
        sms: postSMS, 
        id: postID 
       }, 
       success: function(data){ 
        $("#nama"+postID).html(postNama); 
        $("#msisdn"+postID).html(postMSISDN); 
        $("#sms"+postID).html(postSMS); 
       } 
      }); 
      e.preventDefault(); 

     }); 
    }); 

私はエコーのhtml：

      <tr id='tr".$data['id']."'> 
          <td>".$data['id']."</td> 
          <td id='nama".$data['id']."'>".$data['nama']."</td> 
          <td id='msisdn".$data['id']."'>".$data['msisdn']."</td> 
          <td id='sms".$data['id']."'>".$data['sms']."</td> 
          <td><button type='button' class='btn btn-default' data-toggle='modal' data-target='#editModal".$data['id']."'>Edit</button></td> 
          <td><button type='button' class='btn btn-danger' data-toggle='modal' data-target='#deleteModal".$data['id']."'>Delete</button></td> 
         </tr> 

update.phpを：

<?php 
require_once "../Model/Model.php"; 

$nama = $_POST["nama"]; 
$msisdn = $_POST["msisdn"]; 
$sms = $_POST["sms"]; 
$id = $_POST["id"]; 

updateData($nama, $msisdn, $sms, $id); 
?> 

model.php：

function updateData($nama, $msisdn, $sms, $id){ 
    try{ 
     $conn = new PDO('mysql:host=localhost; dbname=crud', 'root', ''); 

     $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    } 
    catch(PDOException $e){ 
     echo 'ERROR: ' . $e->getMessage(); 
    } 
    $conn->prepare("UPDATE data SET nama = ?, msisdn = ?, sms = ? WHERE id = ?")->execute([$nama, $msisdn, $sms, $id]); 
} 

Answer 1

私はこの問題は、あなたがからデータを取得し、あなたがデータを埋めようとしている要素されている入力に同じIDを使用していることだと思います。あなただけ変更する必要があるのでtd要素のIDを取得し、それに従ってスクリプトを編集します。同様に：

$(document).ready(function(){ 
    $('body').on('click', '.editButton', function(e){ 

     var postID = $(this).val(); 
     var postURL = "../Controller/update.php"; 
     var postNama = $("#nama"+postID).val(); //there are ids of the inputs 
     var postMSISDN = $("#msisdn"+postID).val(); 
     var postSMS = $("#sms"+postID).val(); 

     $.ajax({ 
      type: "POST", 
      url: postURL, 
      data: 
      { 
       nama: postNama, 
       msisdn: postMSISDN, 
       sms: postSMS, 
       id: postID 
      }, 
      success: function(data){ 
       $("#nama-td-"+postID).html(postNama); //and there for the td elements 
       $("#msisdn-td-"+postID).html(postMSISDN); 
       $("#sms-td-"+postID).html(postSMS); 
      } 
     }); 
     e.preventDefault(); 

    }); 
}); 

そしてもちろんの

はそれに応じてHTMLを変更します。

     <td id='nama-td-".$data['id']."'>".$data['nama']."</td> 
         <td id='msisdn-td-".$data['id']."'>".$data['msisdn']."</td> 
         <td id='sms-td-".$data['id']."'>".$data['sms']."</td> 

データはエラーとdonnt変更を印刷保存エラーがない場合、私はまた、サーバー上で確認することをお勧めだろう

もしあれば値。

Answer 2

はおそらく、あなたが戻り値のデータを渡す必要がありますこのように、データパラメータがデータを送信するために使用されるので サーバー。あなたのコメントに基づいて

success: function(data){ 
    $("#nama"+postID).html(data); 
    $("#msisdn"+postID).html(data); 
    $("#sms"+postID).html(data); 
} 

Answer 3

サーバーがJSONを返すなら、あなたは以下の手法を使用することができます。

私たちはあなたのようにのように返すJSONデータを果たすと仮定しましょう：

{name:"somename",msisdn:"9898989898",sms:"some_sms"} 

その後、あなたは次のように適用することができます

を

success: function(data){ 
$("#nama"+postID).html(data.name); 
$("#msisdn"+postID).html(data.msisdn); 
$("#sms"+postID).html(data.sms); 
} 

サーバがコンテンツタイプを送信しない場合は、application/jsonヘッダーにデータが格納されていれば、応答を最初に解析する必要があります。

success: function(data){ 
var parsedData = JSON.parse(data); 
$("#nama"+postID).html(parsedData.name); 
$("#msisdn"+postID).html(parsedData.msisdn); 
$("#sms"+postID).html(parsedData.postSMS); 
}