[英]Delete Row With jQuery
我想知道是否有人可以帮助我。
下面的代码摘录成功创建了一个表,该表显示了与当前用户有关的记录。
/* display row for each location */
echo "<tr>\n";
$theID = $row['locationid'];
echo " <td style='text-align: Center'>{$row['locationname']}</td>\n";
echo " <td style='text-align: Left'>{$row['returnedaddress']}</td>\n";
echo " <td style='text-align: Center'>{$row['totalfinds']}</td>\n";
echo " <form name= 'locationsconsole' id= 'locationsconsole' action= locationsaction.php method= 'post'><input type='hidden' name='lid' value=$theID/> <td><input type= 'submit' name= 'type' value= 'Details'/></td><td><input type= 'submit' name= 'type' value= 'Images'/></td><td><input type= 'submit' name= 'type' value= 'Add Finds'/></td><td><input type= 'submit' name= 'type' value= 'View Finds'/></td><td><input type= 'submit' name= 'type' value= 'Delete'/></td></form>\n";
</tbody>
</table>
<div align="center"><p id="deletelocationresponse"></p></div>
在本节代码的最后,您将看到有一个Delete
按钮。 单击此按钮后,将从表中删除一条记录,并且删除功能可以正常工作。
除了删除按钮之外,您还会注意到还有一个名为deletelocationresponse
的div。 这将运行一个jquery脚本,以向用户提供屏幕消息,告诉用户删除是否成功。 下面的代码。
<script type="text/javascript">
$(document).ready(function(){
$('#locationsconsole').submit(function(){
//check the form is not currently submitting
if($(this).data('formstatus') !== 'submitting'){
//setup variables
var form = $(this),
formData = form.serialize(),
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMsg = $('#deletelocationresponse');
//add status data to form
form.data('formstatus','submitting');
//show response message - waiting
responseMsg.hide()
.addClass('response-waiting')
.text('Please Wait...')
.fadeIn(200);
//send data to server for validation
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success:function(data){
//setup variables
var responseData = jQuery.parseJSON(data),
klass = '';
//response conditional
switch(responseData.status){
case 'error':
klass = 'response-error';
break;
case 'success':
klass = 'response-success';
break;
}
//show reponse message
responseMsg.fadeOut(200,function(){
$(this).removeClass('response-waiting')
.addClass(klass)
.text(responseData.message)
.fadeIn(200,function(){
//set timeout to hide response message
setTimeout(function(){
responseMsg.fadeOut(300,function(){
$(this).removeClass(klass);
form.data('formstatus','idle');
});
},2000)
setTimeout(function() {
$('body').fadeOut(400, function(){
location.reload();
setTimeout(function(){
$('body').fadeIn(400);
}, 500);
window.scrollTo(x-coord, y-coord);
});
}, 2000);
});
});
}
});
}
//prevent form from submitting
return false;
});
});
</script>
<style type="text/css">
#deletelocationresponse {
display:inline;
margin-left:4px;
padding-left:20px;
font:Calibri;
font-size:16px;
}
.response-waiting {
background:url("images/loading.gif") no-repeat;
}
.response-success {
background:url("images/tick.png") no-repeat;
}
.response-error {
background:url("images/cross.png") no-repeat;
}
</style>
我遇到的问题是,单击“ Delete
按钮时,屏幕上的消息会停留在“ Please wait
消息上。
现在我知道此脚本有效,因为我在其他页面上使用了该脚本,显然相关字段已更改。 因此,我将其范围缩小为选择表单名称的问题,这是jQuery代码中的以下行: $('#locationsconsole').submit(function(){
。
在我的其他页面上,我的表单是通过HTML创建的,而此脚本使用的是PHP。
我已经尝试过对此进行研究,但是我对JavaScript并不特别精通,因此我不太确定我应该寻找什么。 有人可以告诉我,有没有办法用其他方式来调用表格?
任何帮助将不胜感激。
非常感谢和问候
第一步是进行基本调试。 FireBug或其他客户端调试工具可以为您提供强大的功能。 您也可以开始放入警报。 例如,您可以输入如下代码: alert('got here!');
在javascript中内联以查看具体是哪一行引发了错误。 如果您使用的是FireBug,则可以将其替换为console.log('got here');
如果发现问题出在响应中,console.log也将允许您转储嵌套变量。
其次,将呈现的页面另存为HTML,然后开始对其进行故障排除。 由于您遇到了HTML错误或AJAX请求的JSON响应中的错误,因此消除了调试的PHP端。
诸如Firebug之类的客户端调试工具还将使您看到AJAX请求和原始响应。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.