[英]Jquery / AJAX update table on link / button click
I have a table populated from MySQL, I'm trying to update values by a click of a button, but I'm not really sure where to start. 我有一个从MySQL填充的表,我试图通过单击按钮来更新值,但是我不确定如何从哪里开始。
I am just getting into Jquery / AJAX, and haven't really figured it out quite yet so don't be too harsh on me. 我只是进入Jquery / AJAX,还没有真正弄清楚它,所以不要对我太苛刻。
In my example I have a HTML table that looks like this: 在我的示例中,我有一个如下所示的HTML表:
ID Status Set Status
1 Pending Yes / No
2 Pending Yes / No
3 Pending Yes / No
4 Pending Yes / No
5 Pending Yes / No
Now when I click on ID 3 Yes, MySQL entry with ID 3
should be updated to Yes
现在,当我点击ID 3是的,与MySQL入门
ID 3
应更新Yes
My question is, how do I find out which Yes / No
of which row was clicked ? 我的问题是,如何找出单击的
Yes / No
的哪一行? How do I pass that to the processing script via AJAX ? 如何通过AJAX将其传递给处理脚本?
My Yes / No
Links have the ID of the entry attached like so: 我的
Yes / No
链接的条目ID如下所示:
<a href="status.php?set=yes&id=3">
I'm fine with the PHP part I think, my problem is getting the correct data to it. 我认为PHP部分很好,我的问题是要获取正确的数据。
//Edit, this is the table: //编辑,这是表:
<table class="table table-striped table-bordered table-hover datatable">
<thead>
<tr>
<th><div class="checkbox"><input type="checkbox" /></div></th>
<th>ID</th>
<th>Status</th>
<th>Set Status</th>
</tr>
</thead>
<tbody>
<?php
$query=mysql_query( "select * from test");
if(mysql_num_rows($query)>0){
while($data=mysql_fetch_array($query,1)){
?>
<tr>
<td><div class="checkbox"><input type="checkbox" /></div></td>
<td><?php echo $data['id']; ?></td>
<td>
<?php
if($data['status'] == 'pending')
{
echo "<span class=\"label label-warning\">Pending</span>";
}
elseif($data['status'] == 'yes')
{
echo "<span class=\"label label-success\">Yes</span>";
}
elseif($data['status'] == 'no')
{
echo "<span class=\"label label-danger\">No</span>";
}
?></td>
<td>
<?php
if($data['status'] == 'pending')
{
echo "<a href=\"" . "status?set=yes&id=" . $data['id'] ."\" class=\"btn btn-success btn-xs\"><i class=\"icon-ok-sign\"></i> Yes</a>" . " <a href=\"" . "status?set=no&id=" . $data['id'] ."\" class=\"btn btn-danger btn-xs\"><i class=\"icon-remove\"></i>No</a>";
} ?>
</td>
</tr>
<?php
}
} ?>
</tbody>
</table>
/// EDIT 2 ///编辑2
Utilizing user574632's answer, I got the simple AJAX GET to work as to updating the table, now I'm trying to get some feedback posted back to the user and hiding the 2 buttons. 利用user574632的答案,我得到了用于更新表的简单AJAX GET,现在我试图将一些反馈发布回用户并隐藏2个按钮。
status.php status.php
$id = $_GET['id'];
$status = $_GET['set'];
if($_GET['set'] == 'yes') {
$result = mysql_query("UPDATE test SET status='yes' WHERE id='$id'")
or die(mysql_error());
echo "Status Changed to Yes";
exit(); }
if($_GET['set'] == 'no') {
$result = mysql_query("UPDATE test SET status='no' WHERE id='$id'")
or die(mysql_error());
echo "Status Changed to No";
exit(); }
Whilst you probably want to display some kind of feedback to the user, this simplest way to acheive this would be like so: 虽然您可能想向用户显示某种反馈,但是实现这一目标的最简单方法是这样的:
$('#tableid a').click(function(){
event.preventDefault();
var href = $(this).attr('href');
$.get( href );
})
provided the html table has an id='tableid'. 如果html表具有id ='tableid'。
What this does is stop the link being followed, then grap the href attribute, and perform a get request via ajax. 这样做是停止跟踪链接,然后获取href属性,并通过ajax执行获取请求。
You would probably want to indicate success/fail etc, but without seeing your status.php i cant elaborate 您可能希望指示成功/失败等,但是没有看到您的status.php,我无法详细说明
EDIT per comment: To get data back from the php file: 按评论编辑:要从php文件中获取数据,请执行以下操作:
$('#tableid a').click(function(){
event.preventDefault();
var href = $(this).attr('href');
$.get( href, function( data ) {
//append data to a div, hide buttons etc.
//alert used as example
alert( data );
});
});
Y ÿ
Added class to your anchor tag so it will look like <a class="mylink" href="status.php?set=yes&id=3">
在您的锚标记中添加了类,因此其外观类似于
<a class="mylink" href="status.php?set=yes&id=3">
Now add a jquery to initiate ajax request when you click on the link. 现在,当您单击链接时,添加一个jquery以启动ajax请求。 This is how your jquery should be.
这就是您的jquery应该是的样子。
jQuery(document).ready(function($){
$(".mylink").click(function(e) {
$.post($(this).attr(),{},function(res){
console.log(res);
});
return false;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.