使用jQuery删除行


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按钮。单击此按钮后,将从表中删除一条记录,并且删除功能正常工作。

除了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请求和原始响应。