在success函数中更新表的特定行

时间:2016-04-28 09:25:22

标签: php jquery ajax

我有一张表格可以编辑其中的特定行:

<table class="table table-hover" id="patient_name_table">
                    <tr id="after_tr_2">
                      <th>Patient</th>
                      <th>Phone</th>
                      <th>D.O.B</th>
                      <th>Address</th>
                      <th>Edit</th>
                    </tr>
                    <tbody>
                      <?php foreach($name_array as $tabName) { ?>
                      <tr id="<?php echo $tabName['id']; ?>">
                        <td id="nameid"><?php echo '<a href="patients.php?patient='.$tabName['id'].'">'.$tabName['patient_name'].'</a>';?></a>
                        </td>
                        <td id="phoneid"><?php echo $tabName['phone']?></td>
                        <td id="dobid"><?php echo $tabName['dob']?></td>
                        <td id="addressid"><?php echo $tabName['patient_address']?></td>
                        <td><button type="button" class="btn btn-info" id="editInfo">Edit</button>
                      </tr>
                      <?php } ?>
                    </tbody>
                  </table>

现在我使用jquery来获取所选的行ID,并出现一个对话框:

$(document).ready(function()
{
  $("#patient_name_table #editInfo").on('click', function()
  {
    var id = $(this).closest('tr').attr('id');
    var row = $(this).closest('tr');
    $('#dialog').dialog({
                      autoOpen: false, 
                      hide: "puff",
                      show : "slide",
                      width: 800,
                      modal: true
    });
    $( "#dialog" ).dialog( "open" );

    $.ajax({
      url: 'info.php',
      data: {patient_id: id},
      type: 'POST',
      dataTyoe: 'JSON',
      success:function(res2)
      {
        $("#name_upd").val(res2['patient_name']);
        $("#phone_upd").val(res2['phone']);
        $("#dob_upd").val(res2['dob']);
        $("#address_upd").val(res2['address']);
      },
      error:function(res2)
      {
        console.log("Error");
      }
      });
    $("#upd_info").on('click', function()
      {
        var upd_name = $("#name_upd").val();
        var upd_dob = $("#dob_upd").val();
        var upd_phone = $("#phone_upd").val();
        var upd_address = $("#address_upd").val();
        $.ajax({
          url: 'upd_patient.php',
          data: {upd_id: id, n: upd_name, d: upd_dob, p:upd_phone, a:upd_address},
          type: 'POST',
          dataType: 'JSON',

          success:function(res3)
          {
            $( "#dialog" ).dialog( "close" );

          },
          error:function(res3)
          {
            console.log("Error Updating info");
          }
        });
    });
  });
});

这是对话框:

enter image description here

现在,在成功更新信息后,我需要更改此特定行的数据,而不刷新页面。

文件upd_patient.php脚本:

    $sql = "UPDATE patient_info SET patient_name = :n, patient_address = :a, phone = :p, dob = :d WHERE id = :id AND id_logged = :idl";
    $stmt = $conn->prepare($sql);
    $stmt->bindValue(":n", $name);
    $stmt->bindValue(":a", $address);
    $stmt->bindValue(":p", $phone);
    $stmt->bindValue(":d", $dob);
    $stmt->bindValue(":id", $id);
    $stmt->bindValue(":idl", $id_logged);
    $exec = $stmt->execute();

    $res3 = array("patient_name"=>$name, "dob"=>$dob, "phone"=>$phone, "address"=>$address);
}
catch(PDOException $e)
{
    echo $e->getMessage();
}

echo json_encode($res3);

所以我的问题是,如何将添加到数组res3中的新更新信息附加到我表中的更新行而不刷新页面。

0 个答案:

没有答案