2013-10-10 50 views
1

我有jQuery $ .post函數的問題。我用這個功能很多,相同功能的正常工作,除了在一種情況下,我不明白爲什麼它一直被執行腳本後重定向我,這裏是JS代碼:

var record;  

$('.delbtt').on('click', function(e){ 
     e.preventDefault(); 
     var deleteid = $(this).parent().parent().find('#id').text(); 
     record = $(this).parent().parent(); 
     $('#delrecord').empty().val(deleteid); 
    }); 

$(document).on('submit', '#delteform', function() { 
     var formData = $(this).serialize(); 
     $.post('includes/delete.php',formData,processData); 
     function processData(data){ 
      record.remove();  
     }; 
    }); 

HTML:

<!-- Modal --> 
<div class="modal fade" id="deleteFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <form id="deleteform" class="form-horizontal" role="form" action="includes/delete.php" method="POST"> <!-- --> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Delete record</h4> 
      </div> 
      <div class="modal-body"> 
        <p>Are you sure you want to delete this person?</p> 
      </div> 
       <input type="hidden" id="delrecord" name="delrecord" value="" /> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default empty" data-dismiss="modal">Cancel</button> 
       <button id="delentry" type="submit" class="btn btn-danger">Delete Person</button> 
      </div> 
     </form> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

我知道這個函數執行成功,因爲如果我在record.remove();之後加上alert("Why is this not working?");,我可以看到alert和後臺代碼被執行,但是不是停留在同一頁面,而是將我重定向到'includes/delete.php'。我試圖禁用所有其他$ .post函數,我在我的JS,我嘗試使用$('#deleteform').submit(),我試圖把它放在我的主要$(document).ready(function() {});以外的結果...總是相同的結果它重定向我後,功能完成,而不是留在一個頁面。有沒有人知道我爲什麼會得到這種行爲?

PHP代碼:

<?php 
include('budgetprop/Initialize.php'); 
Database::GetInstance()->ConnectToServer($errors); 
$record = $_POST['delrecord']; 

# CONNECT TO DB 
if(Database::GetInstance()->ConnectToServer($errors)){ 
    $insertSQL1 = "DELETE FROM salaries WHERE record_id = '".$record."' "; 
    $stmt1 = sqlsrv_query(Database::GetInstance()->databaseConnection, $insertSQL1); 
    # IF THERE IS AN ERROR 
    if(!$stmt1){ 
       echo "Error, cannot delete record"; 
    }else{ 
     Database::GetInstance()->LastInsertId($stmt1); 
    } 
    # IF ALL QUERIES WERE SUCCSESSFUL, COMMIT THE TRANSACTION, OTHERWISE ROLLBACK 
    if($stmt1 && !$errors){ 
     sqlsrv_commit(Database::GetInstance()->databaseConnection); 
     # FREE THE STATEMENT 
     Database::GetInstance()->FreeDBStatement($stmt1); 
     echo "success"; 
     return true; 
    }else{ 
     sqlsrv_rollback(Database::GetInstance()->databaseConnection); 
     # FREE THE STATEMENT 
     Database::GetInstance()->FreeDBStatement($stmt1); 
     return false; 
    } 
    # NO CONNECTION WAS MADE 
}else{ 
    return false; 
}; 
?> 

preventDefault()無法正常工作或

+1

這種PHP相關的方式是什麼? –

+0

'prevent.Default()'不正確。這不是我在發佈的代碼中所說的。 – Archer

+0

@archer,my bad,錯誤輸入 – zuboje

回答

4

這聽起來像您的形式仍然被提交,因此重定向。你可以用preventDefault()阻止它......

$(document).on('submit', '#deleteform', function(e) { 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    $.post('includes/delete.php',formData,processData); 
    function processData(data){ 
     record.remove();  
    }; 
}); 
+0

是的,添加JS提交處理程序本身不會阻止HTML提交處理程序發生,所以您的處理程序正在運行,然後表單正常提交。 – sevenseacat

+0

@Archer我試過了,結果相同... – zuboje

+0

'post'不會做重定向,所以別的東西肯定是在做。你能告訴我們表單和'record.remove()'嗎? – Archer

0

假設「deleteform」是你的頁面上的表單元素,在其中你有一個輸入或類型的按鈕「提交」的ID,我會建議改變delentry按鈕有一個「按鈕」類型。

大多數瀏覽器會在單擊該按鈕時具有輸入或提交類型按鈕的表單上執行POST/GET。

我會再更新您的jQuery的事件處理程序來選擇按鈕並指定一個onclick事件:

$('#delentry').click(function() { 
    ... 
}); 

如果你想保持某種形式的適度降級,你可以離開標記爲提交式按鈕和$(document).ready()上,將按鈕的類型更新爲「按鈕」。