[英]div reloading wrong after ajax call
I have a script for adding and removing entries from a table.我有一个用于在表中添加和删除条目的脚本。 it does this using ajax to call a php script.
它使用ajax调用php脚本来做到这一点。 On success it's supposed to reload the div containing the table.
成功后,它应该重新加载包含该表的 div。 At the moment it just empties the div.
目前它只是清空 div。
Here is my javascript这是我的 javascript
$(document).ready(function(){
$("#add_height_weight").click(function(){
var corp_hw_name = $("#corp_hw_name").val();
var corp_hw_height = $("#corp_hw_height").val();
var corp_hw_weight = $("#corp_hw_weight").val();
var client_id = $("#cient_id").val();
var ff_id = $("#ff_id").val();
var task = "add";
var dataString = "task=" + task + "&client_id=" + client_id + "&ff_id=" + ff_id + "&corp_hw_name=" + corp_hw_name + "&corp_hw_height=" + corp_hw_height + "&corp_hw_weight=" + corp_hw_weight;
$.ajax({
type:"POST",
url:"/organiseit/fact_finds/processors/corp_health.php",
data: dataString,
success: function(){
alert("Height/Weight Updated");
$("input,textarea,option").css("background-color","#fff");
$("#height_weight_table").load(" #height_weight_table");
}
});
});
});
And here's the content of the div这是 div 的内容
<div id="height_weight_table">
<table>
<tr>
<td>Name</td><td>Height</td><td>Weight</td><td>Delete</td>
</tr>
<?php
$ff_height_weight = fetch_all("SELECT * FROM ff_height_weight WHERE ff_id='$ff_id'");
foreach($ff_height_weight as $entry){
?>
<tr>
<td><?php echo $entry['name']; ?></td>
<td><?php echo $entry['height']; ?></td>
<td><?php echo $entry['weight']; ?></td>
<td><button class="delete_act" onclick="delete_height_weight('<?php echo $entry['id']; ?>')">X</button></td>
</tr>
<?php } ?>
<tr>
<td><input type='text' id="corp_hw_name"></td>
<td><input type='number' id="corp_hw_height"></td>
<td><input type='number' id="corp_hw_weight"></td>
<td><button class='new_note_submit' id="add_height_weight">+</button></td>
</tr>
</table>
</div>
Does anyone have any suggestions why this would reload an empty div?有没有人有任何建议为什么这会重新加载一个空的 div?
I have similar code running elsewhere in the project for adding/deleting from a notes table.我在项目的其他地方运行了类似的代码,用于从笔记表中添加/删除。 The following code works perfectly but I can't see how it differs from the code above:
以下代码完美运行,但我看不出它与上面的代码有何不同:
javascript javascript
if(proceed === "TRUE"){
$.ajax({
type:"POST",
url:"/organiseit/clients/update_client_notes.php",
data: noteString,
success: function(){
alert("data submitted");
$("#notes_table").load(" #notes_table");
$("#new_note").css("background-color","#fff");
}
});
div on the page页面上的div
<div class="notes_area" id="notes_area">
<table class="notes_table" id="notes_table">
<tr>
<td class="note_body"><strong>Note</strong></td>
<td><strong>Created by</strong></td>
<td><strong>Created for</strong></td>
<td><strong>Date Created</strong></td>
<td><strong>Completion by</strong></td>
<td><strong>Delete</strong></td>
</tr>
<?php
if(!empty($id)){
$get_note = fetch_all("SELECT * FROM client_notes WHERE client_id=$id ORDER BY id DESC");
foreach($get_note as $note){?>
<tr>
<td><?php echo $note["note"];?></td>
<td><?php echo $note["created_by"];?></td>
<td><?php echo $note["note_for"];?></td>
<td><?php echo $note["date"];?></td>
<td><?php echo $note["completion_by"];?></td>
<td style="text-align:center;"><button class="delete_note" onclick="delete_note(<?php echo $id.",".$note["id"];?>)"><strong>X</strong></button></td>
</tr>
<?php
}
}
?>
</table>
</div>
In your second example, (the working one) you are targeting the table which has an id
of "#notes_table"
.在您的第二个示例中,(工作示例)您的目标是
id
为"#notes_table"
。 This is why the ajax request is successful in finding the table.这就是ajax请求成功找到表的原因。
//What you are targeting in AJAX request
$("#notes_table").load(" #notes_table");
//the actual markup for the page is correct for the request
<div class="notes_area" id="notes_area">
<table class="notes_table" id="notes_table">
In your first example you are targeting the parent div, not the table itself, your ajax request is trying to get the entire div not the table:在您的第一个示例中,您的目标是父 div,而不是表本身,您的 ajax 请求试图获取整个 div 而不是表:
//What you are targeting in AJAX request
$("#height_weight_table").load(" #height_weight_table");
//here you are actually targeting the parent div not the table
<div id="height_weight_table">
<table>
Try switching the id
for the <div>
to the <table>
element.尝试将
<div>
的id
切换到<table>
元素。
<div>
<table id="height_weight_table">
You're not loading the received data in the div
.您没有在
div
加载接收到的数据。 You have to declare and use that data in the success
function.您必须在
success
函数中声明和使用该数据。 Try this...尝试这个...
$.ajax({
type:"POST",
url:"/organiseit/fact_finds/processors/corp_health.php",
data: dataString,
dataType: 'html',
success: function(data) {
alert("Height/Weight Updated");
$("div#height_weight_table").replaceWith(data);
$("input,textarea,option").css("background-color","#fff");
}
});
I hope it helps我希望它有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.