Question

我有一个页面，允许您添加/编辑/删除“项目任务”并使用jQuery的AJAX函数将数据保存到数据库以保存POST数据。

我目前在页面上有2个按钮。

按钮1 .save-tasks-ajax-redirect - 您单击它并对我的后端进行常规非ajax POST，您将被重定向到另一个Project页面。此按钮还没有点击事件。也许最好的方法可能是简单地为这个按钮类创建一个新的click事件，然后让它调用我的保存函数，但是它可以传入一个变量来指示它需要重定向？在我发布这些问题之前，我有点希望让两个按钮共享相同的点击事件和一切，但也许这是一个更好的主意？

按钮2 .save-tasks-ajax - 您点击它并使用AJAX保存数据，您可以继续编辑页面。

现在我的目标是修改按钮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();
           }
    });
};

jQuery函数有时在AJAX请求完成后重定向并且有时会保留在页面上？

1 个答案: