jQuery函數有時會在AJAX請求完成後重定向，有時會保留在頁面上？

Question

我有一個頁面，可讓您添加/編輯/刪除「項目任務」，並使用jQuery的AJAX功能將數據保存到數據庫以保存POST數據。

我目前在頁面上有2個按鈕。

按鈕1.save-tasks-ajax-redirect - 你點擊它，它使一個普通的非Ajax後到我的後臺，你會被重定向到另一個項目頁面。此按鈕沒有點擊事件。也許最好的辦法可能是簡單地爲這個按鈕類創建一個新的點擊事件，然後讓它調用我的保存功能，但它可以傳遞一個變量來表明它需要重定向？在我發佈這些問題之前，我有點希望能讓這兩個按鈕共享相同的點擊事件和所有內容，但也許這是一個更好的主意？

按鈕2.save-tasks-ajax - 你點擊它，它使用AJAX來保存數據，你可以留在頁面編輯多。

現在我的目標是修改Button 1的工作原理。我不希望做一個普通的HTTP POST，而是希望它能夠做一個AJAX保存，但是當它完成時，我希望它重定向到一個項目頁面。

所以下面我有我的2個按鈕的HTML代碼。在下面，我有我的AJAX保存按鈕（按鈕2）和下面的我的jQuery Click事件，我有我的按鈕調用的ajaxSaveTasks()函數進行保存。

我想修改這個函數，也許所有這些代碼，以便我的Button 1可以使用相同的功能來做一個AJAX保存，但不知何故它需要區分自己，以便它也可以在AJAX保存後做一個重定向做完了。

看看下面的基本代碼，我怎麼可以修改它來做到這一點？

<button type="submit" class="save-tasks-ajax-redirect">Save Tasks and Return to Project</button> 

<button type="submit" class="save-tasks-ajax">Save Tasks and Continue Editing</button> 



$(window).load(function() { 

    // AJAX Save and Continue editing 
    $('#content').on('click', '.save-tasks-ajax', function() { 
     console.log('AJAX Save and Continue Editing Button Clicked!'); 
     ajaxSaveTasks(); 
     return false; // avoid to execute the actual submit of the form. 
    }); 

}); 



function ajaxSaveTasks(){ 
    console.log('ajaxSaveChanges() Ran and Tasks Saved.'); 

    // Reset Flag that Triggers Un-Saved Alert on page exit 
    window.unsavedChanges = false; 

    // Show a Loading/Saving Spinner 
    jQuery('#project_tasks').showLoading(); 

    // Display a message to the user that we are Saving 
    flipNotify.show({ 
     message: 'Project Tasks Saved!', 
     icon: 'tick', 
     delay: 2, 
     sticky: false 
    }); 

    var url = "index.php?module=apoll_Web_Projects"; 

    $.ajax({ 
      type: "POST", 
      url: url, 
      data: $("#editTasksForm").serialize(), // serializes the form's elements. 
      success: function(data) 
      { 
       // Hide Header Un-Saved Changes Div 
       hideTaskUnSavedChangesHeaderBar() 

       // Hide Loading/Saving Spinner 
       jQuery('#project_tasks').hideLoading(); 
      } 
    }); 
}; 

Answer 1

$(window).load(function() { 

    // AJAX Save and Continue editing 
    $('#content').on('click', '.save-tasks-ajax', function() { 
     console.log('AJAX Save and Continue Editing Button Clicked!'); 
     ajaxSaveTasks(); 
     return false; // avoid to execute the actual submit of the form. 
    }); 

    // AJAX Save and redirect 
    $('#content').on('click', '.save-tasks-ajax-redirect', function() { 
     console.log('AJAX Save and Redirect Button Clicked!'); 
     ajaxSaveTasks(function(){ window.location.assign("project.php"); }); 
     return false; // avoid to execute the actual submit of the form. 
    }); 
}); 

function ajaxSaveTasks(callback){ 
    ... your code ... 

    $.ajax({ 
      ... 
      success: function(data) 
      { 
       // Hide Header Un-Saved Changes Div 
       hideTaskUnSavedChangesHeaderBar() 

       // Hide Loading/Saving Spinner 
       jQuery('#project_tasks').hideLoading(); 

       if (callback) 
       callback(); 
      } 
    }); 
};