使用jQuery删除行

Question

我想知道是否有人能够帮助我。

下面代码的提取成功创建了一个表，显示与当前用户相关的记录。

/* 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按钮时粘在​​信息屏幕上的信息。

现在我知道这个脚本的作品了，因为我在其他页面上使用它，显然在相关字段发生了变化。所以我把它缩小到了一个问题，它提取了我的表单名称，这是jQuery代码中的这一行：$('#locationsconsole').submit(function(){。

在我的其他页面上，我的表单是通过HTML创建的，而此脚本使用PHP。

我试过研究这个，但是我对JavaScript并不是很熟练，所以我不太清楚我应该在找什么。请问有人可能会告诉我，有没有办法以不同的方式调用表单？

任何帮助将不胜感激。

非常感谢和亲切的问候

Answer 1

第一步是做基本的调试。 FireBug或其他客户端调试工具可以为您提供强大的功能。您也可以开始投入警报。例如，您可以在JavaScript中插入一个类似alert('got here!');的代码，以查看哪条线专门引发错误。如果您使用FireBug，则可以用console.log('got here');

替换它。如果您发现问题出在您的响应中，console.log也将允许您转储嵌套变量。

其次，将呈现的页面保存为HTML，然后开始对其进行故障排除。这消除了调试的PHP方面，因为您有来自AJAX请求的JSON响应中的HTML错误或错误。

像Firebug这样的客户端调试工具也会让你看到AJAX请求和原始响应。