使用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請求和原始響應。