[英]Add a row to a HTML table dynamically loaded and refresh it via AJAX and .load
我有一个HTML表,该表通过带有SQL语句的PHP代码段动态加载其值。 还有一个“选择”和一个按钮,用于向表中添加行。 Ajax过程将侦听此按钮,以将数据发送到php并将新行作为记录插入数据库中。 我当然想要表(不是所有页面)刷新信息。 为此,我使用了jQuery($)。load函数。 一切工作正常,数据库已更新,但是刷新HTML表时,它显示为空。 我做错了什么?
这是HTML表格:
<!-- Procedure Table-->
<div id=idProcedimientos class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Procedures <small></small></h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<div class="form-group">
<div class="col-md-2 col-sm-6 col-xs-12">
<? $qProcedure = "SELECT * FROM Procedures";
$resultsProcedure = mysqli_query($db, $qProcedure);
echo "<select id='idSelected_procedure' name='selected_procedure' class='form-control'>";
while ($rowProcedure = mysqli_fetch_assoc($resultsProcedure)) {
echo"<option value ='{$rowProcedure['IdProcedure']}'>{$rowProcedure['Name']}</option>";
};
echo "</select><br />";
?>
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-6 col-xs-12">
<button type="submit" id="idBttnProcedure-add" class="bttnProcedure-add btn btn-round btn-primary">Add Procedure</button><br /><br />
</div>
</div>
<div id="idProcedureTable" class="table-editable">
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Procedure</th>
<th>Date</th>
<th>Ok</th>
<th>Summary</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<?
$queryProcedure = "SELECT FoalingsP.IdFoaling, Procedures.Name, JournalProcedures.IdJournalFk, FoalingsP.Date, FoalingsP.Ok,
FoalingsP.Summary FROM FoalingsP, Procedures, JournalProcedures
WHERE
JournalProcedures.IdJournalFk=$row[IdJournal] AND
JournalProcedures.IdJournalProcedure=FoalingsP.IdJournalProcedureFk AND
JournalProcedures.IdProcedureFk=Procedures.IdProcedure
UNION
SELECT UltrasonographiesP.IdUltrasonography, Procedures.Name, JournalProcedures.IdJournalFk, UltrasonographiesP.Date,
UltrasonographiesP.Ok, UltrasonographiesP.Summary FROM UltrasonographiesP, Procedures, JournalProcedures
WHERE
JournalProcedures.IdJournalFk=$row[IdJournal] AND
JournalProcedures.IdJournalProcedure=UltrasonographiesP.IdJournalProcedureFk AND
JournalProcedures.IdProcedureFk=Procedures.IdProcedure";
$resultsProcedure = mysqli_query($db, $queryProcedure);
while ($rowProcedure = mysqli_fetch_assoc($resultsProcedure)){
echo " <tr><td>{$rowProcedure['Name']}</td>
<td>{$rowProcedure['Date']}</td>";
if($rowProcedure["Ok"]=="1") {echo "<td contenteditable='true'><label><input type='checkbox' checked></label></td>";};
if($rowProcedure["Ok"]=="0") {echo " <td contenteditable='true'><label><input type='checkbox'></label></td>";};
echo "<td>{$rowProcedure['Summary']}</td>
<td><span id='tableProcedure-remove' class='tableProcedure-remove table-remove glyphicon glyphicon-remove'></span></td></tr>";
};
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Procedure Table-->
这是脚本:
<script> $('.bttnProcedure-add').click(function () { var idJournal = "<?php echo $row[IdJournal]; ?>"; var idSelected_procedure = document.getElementById("idSelected_procedure").value; alert(idSelected_procedure); $.ajax({ type: "POST", url: "server.php", data: {mare_idJournal:idJournal, mare_idSelected_procedure:idSelected_procedure }, success: function(msg){ alert("Everything saved correctly"); $("#datatable-responsive").load("control_horse_journal.php #datatable-responsive"); } }); return false; }); </script>
非常感谢你。
感谢@epascarello的建议。 我找到了解决方案。 我放弃了.load函数,取而代之的是直接在.after后面附加一行。最终脚本如下所示:
<script type="text/javascript"> $('.bttnProcedure-add').click(function () { var idJournal = "<?php echo $row[IdJournal]; ?>"; var idSelected_procedure = document.getElementById("idSelected_procedure").value; var $TABLE_PROCEDURES = $('#idProcedureTable'); var selectedProcedure = document.getElementById("idSelected_procedure"); var name = selectedProcedure.options[selectedProcedure.selectedIndex].text; var rowP="<tr>" +"<td>" +name+"</td>" +"<td>"+"0000-00-00 00:00:00"+"</td>" +"<td contenteditable='true'><label><input type='checkbox'></label></td>" +"<td>"+""+"</td>" +"<td><span id='tableProcedure-remove' class='tableProcedure-remove table-remove glyphicon glyphicon-remove'></span></td>" +"</tr>"; $('#bodyTbProcedure tr:last').after(rowP); $.ajax({ type: "POST", url: "server.php", data: {mare_idJournal:idJournal, mare_idSelected_procedure:idSelected_procedure }, success: function(msg){ alert("Everything saved correctly"); //$("#datatable-responsive").load("control_horse_journal.php #datatable-responsive"); } }); return false; }); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.