我想知道是否有人能帮我。
下面代码的摘录成功创建了一个表,显示了与当前用户相关的记录。
/* 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
按钮。单击此按钮后,将从表中删除一条记录,并且删除功能正常工作。
除了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或其他客户端调试工具可以为您提供强大的功能。您也可以开始设置警报。例如,您可以在javascript中内联一个类似alert('got here!');
的代码,以查看具体是哪一行引发了错误。如果你正在使用FireBug,你可以用console.log('got here');
代替它
如果您在响应中发现问题,console.log还允许您转储嵌套变量。
其次,将渲染的页面保存为HTML,然后开始对此进行故障排除。这消除了调试的PHP方面,因为AJAX请求的JSON响应中要么有HTML错误,要么有错误。
像Firebug这样的客户端调试工具也可以让您看到AJAX请求和原始响应。