0

我正在编写一个日历时间线视图，当用户将作业拖动到新的时间时，会出现一个对话框，然后 AJAX 重新加载 php 内容，最后重新初始化可拖动元素，以便可以再次拖动作业。

我的问题可能是由于没有低估调用函数的所有不同方式，所以

我的问题是：下面的这个解决方案可以减少到更少的调用吗？

我想确保避免“双重”调用以减少代码并正确使用“层次结构”/内置属性。

Drag{
---- Dialog{
-------- success{ AJAX{ reload-function{ initialize } }//结束 AJAX ---- } //结束成功
------- cancel { AJAX{ reload-function{ initialize } }//结束 AJAX ---- } //结束取消
--- }
}

以下是当前拼凑的解决方案，它正在工作：

$("#dialog-mjob").dialog({
    autoOpen: true,
    resizable: true,
    modal: true,
    buttons: {
        "Modify": function () {
            $(this).dialog("close");
            $.ajax({
                type: "POST",
                url: "get-event.php",
                data: $('#mod-event-form').serialize(),
                success: function (data) { }
            });
        },
        Cancel: function () {
            $(this).dialog("close");
            $.ajax({
                type: "POST",
                url: "get-event.php",
                data: $('#mod-event-form').serialize(),
                success: function (data) {
                    $('#cal-inner').remove();
                    $('#cal').load('timeline-inner.php', function () {
                        $(".draggable").draggable({
                            //revert: true, 
                            revert: "invalid",
                            //helper: "clone",
                            cursor: "hand",
                            grid: [44, 0],
                            axis: "x",
                            handle: "span",
                            cursor: "move",
                            stop: function (ev, ui) {
                                changePrompt($(this).attr('id'));
                            }
                        });
                    });

                }
            }); // end ajax
        } // end cancel button
    } // end buttons
}); // end dialog
4

1 回答 1

1

请注意，您可以替换每个匿名函数

    variable: function() {...}

由一个命名的，然后交出它的标识符。

    variable: myFunc
...
function myFunc() {...}

这可以帮助您缓解不断增长的代码嵌套，还可以让您重用相同/相似的函数。

$("#dialog-mjob").dialog({
    autoOpen: true,
    resizable: true,
    modal: true,
    buttons: {
        "Modify": function () {
            $(this).dialog("close");
            $.ajax({
                type: "POST",
                url: "get-event.php",
                data: $('#mod-event-form').serialize(),
                success: myAjaxFunction // <-- CHANGED!
            });
        },
        Cancel: function () {
            $(this).dialog("close");
            $.ajax({
                type: "POST",
                url: "get-event.php",
                data: $('#mod-event-form').serialize(),
                success:  myAjaxFunction // <-- CHANGED!
            }); // end ajax
        } // end cancel button
    } // end buttons
}); // end dialog

// the new named function
function myAjaxFunction (data) {
    $('#cal-inner').remove();
    $('#cal').load('timeline-inner.php', function () {
        $(".draggable").draggable({
            //revert: true, 
            revert: "invalid",
            //helper: "clone",
            cursor: "hand",
            grid: [44, 0],
            axis: "x",
            handle: "span",
            cursor: "move",
            stop: function (ev, ui) {
            changePrompt($(this).attr('id'));
        }
    });
}

这可以做得更进一步：

$("#dialog-mjob").dialog({
    autoOpen: true,
    resizable: true,
    modal: true,
    buttons: {
        "Modify": doModify, // <-- CHANGED!
        Cancel: doCancel    // <-- CHANGED!
    } // end buttons
}); // end dialog

function doModify() {       // <-- NEW!
    $(this).dialog("close");
    $.ajax({
        type: "POST",
        url: "get-event.php",
        data: $('#mod-event-form').serialize(),
        success: myAjaxFunction
    });
}

function doCancel() {       // <-- NEW!
    $(this).dialog("close");
    $.ajax({
        type: "POST",
        url: "get-event.php",
        data: $('#mod-event-form').serialize(),
        success:  myAjaxFunction
    }); // end ajax
}

function myAjaxFunction (data) {   // <-- NEW!
    $('#cal-inner').remove();
    $('#cal').load('timeline-inner.php', function () {
        $(".draggable").draggable({
            //revert: true, 
            revert: "invalid",
            //helper: "clone",
            cursor: "hand",
            grid: [44, 0],
            axis: "x",
            handle: "span",
            cursor: "move",
            stop: function (ev, ui) {
            changePrompt($(this).attr('id'));
        }
    });
}

至于双重调用，我不太确定你的意思，但如果你害怕一个按钮被提交两次，你可以设置一个更高范围的变量来指示一个按钮已经被按下。

于 2013-06-14T03:56:45.270 回答