当我尝试将表单设置为清理时，脏表单给出错误

Question

我有一个表单，我正试图监控它何时变为“脏”（已更改），以便我可以启用“保存更改”按钮。这很简单。在 $(document).ready() 部分，我在表单上启用了dirtyForms。

$(".dirtyForm").dirtyForms();

然后，我从 ajax 调用加载表单，在同一个函数中，我将其设置为 clean，然后开始调用函数来检查它何时变脏。

$(".dirtyForm").dirtyForms("setClean");
constant = setInterval(function(){checkDirty()}, 500);

这是我检查何时变为脏的功能。顺便说一句，如果有人知道这部分的更好方法，请告诉我。

function checkDirty(){
    if ($.DirtyForms.isDirty()){
        $(".saveDirtyForm").removeAttr("disabled");
            $(".resetDirtyForm").removeAttr("disabled");
            console.log("Dirty...");
            clearTimeout(constant);
    }
}

你会注意到在 checkDirty 函数中，它有 clearTimeout(constant) 来阻止函数在表单变脏后继续重复。到目前为止，这一切都很好。这些按钮保持禁用状态，直到我更改某些内容然后几乎立即启用。当我回忆起使用 ajax 函数加载包含更多信息的表单时，问题就来了。当它重置表单时，它会在设置为清理时给出错误。它说，

Uncaught TypeError: Object function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'facebox'

此错误在 jquery.dirtyForms.js 文件中。它不会将表单设置为清理并重新启动监视功能。有谁知道我做错了什么？

这是 zeroflagL 询问的函数。

        function getOrderDets(id){
        $.ajax({
            url: DONEP+"blueBlob/donors/"+donorID+"/orders/"+id,
            type: "GET",
            dataType: "json",
            success: function(data){
                console.log(data);
                dataSec = data.main.aResultData[0];
                //Clear Fields
                $("#orderIdTag").text('');
                $("#orderNum").val('');
                $("#doPlaced").val('');
                $("#doShip").val('');
                $("#dTrack").val('');
                $("#doNote").val('');
                //Set Main fields
                $("#orderIdTag").text(dataSec.OrderID);
                $("#orderNum").val(dataSec.OrderNumber);
                $("#doPlaced").val(dataSec.OrderDate);
                $("#doShip").val(dataSec.ShipDate);
                $("#dTrack").val(dataSec.TrackingNumber);
                $("#doNote").val(dataSec.OrderNote);
                //Clean Dirty Form
                $(".dirtyForm").dirtyForms("setClean");
                constant = setInterval(function(){checkDirty()}, 500);
                //Set Table
                $(".orderDetTable").dataTable({
                    aaData: data.array,
                    "bAutoWidth": false,
                    "bDestroy": true,
                    "aoColumnDefs" : [
                        {"sWidth" : "13%", "sTitle" : "Quantity", "mData" : "Quantity", aTargets : [0]},
                        {"sTitle" : "Code", "mData" : "Code", aTargets : [1]},
                        {"sTitle" : "Amount", "mData" : "Amount", aTargets : [2]},
                        {"sWidth" : "6%", "sTitle" : "", "mData" : "OrderDetailsID", aTargets : [3], "mRender" : function(data, type, full){
                            return "<a href='#'><i class='glyphicon glyphicon-pencil orderDetEdit' id='"+data+"'></i></a>";
                        }}
                    ]
                });
            }
        });
    }

这是 facebox 调用的堆栈跟踪。

$.facebox@http://dev.mysite.info/details.php?id=63#:540
.DirtyForms.dialog.fire@http://dev.mysite.info/assets/js/jquery.dirtyforms.js:25
bindFn@http://dev.mysite.info/assets/js/jquery.dirtyforms.js:421
aBindFn@http://dev.mysite.info/assets/js/jquery.dirtyforms.js:311
jQuery.event.dispatch@http://dev.mysite.info/assets/js/jquery.js:5095
jQuery.event.add/elemData.handle@http://dev.mysite.info/assets/js/jquery.js:4766

Answer 1

第一步是在更改表单中的任何内容（包括数据表）后调用setClean。

---

如果只是错误，那么这里有一个 hack。如果您在截止日期之前，这将帮助您完成任务，并且还可以帮助您进行调试：

if ( typeof $.facebox !== 'function' )
{
    $.facebox = function(){
        var console = window['console'];
        if ( console && console.error ){
            console.error( 'Warning: $.facebox() was called', arguments );
        }
        return $();
    }
}

另一个提示：如果您多次包含同一个 jQuery 库，您的插件可能无法正常工作。

要解决这个问题，请使用以下魔法搜索代码库中的所有 jquery 实例：

grep -o 'jquery:[^"]*"1\....' -R *

这会搜索 jQuery.fn.version 字符串。

---

您还需要检查插件是否正常工作。尝试检查以下内容：

• 插件是在jQuery之后添加的吗？ - JQuery plugin not working
• 插件是否支持您的 jQuery 版本？ - Why is the lightbox jQuery plugin not working for me?
• 页面中是否包含多个 jQuery 副本？这可能会导致事情变得疯狂。 阅读：jQuery in widget

---

编辑：获取堆栈跟踪以查看调用 facebox 函数的内容：

$.facebox = function(){
    alert( new Error().stack );
};

Answer 2

现在在official documentation 中发布了在表单脏/干净时启用/禁用按钮的正确方法。请注意，这只适用于 Dirty Forms 2.x。

// Enable/disable the reset and submit buttons when the state transitions
// between dirty and clean. You will need to first set the initial button
// state to disabled (either in JavaScript or by setting the attributes in HTML).
$('form').find('[type="reset"],[type="submit"]').attr('disabled', 'disabled');
$('form').on('dirty.dirtyforms clean.dirtyforms', function (ev) {
    var $form = $(ev.target);
    var $submitResetButtons = $form.find('[type="reset"],[type="submit"]');
    if (ev.type === 'dirty') {
        $submitResetButtons.removeAttr('disabled');
    } else {
        $submitResetButtons.attr('disabled', 'disabled');
    }
});

此外，从您的错误消息中可以清楚地看出您正在使用默认的 Dirty Forms 1.x 行为，该行为使用 FaceBox 作为对话框，但您的页面中没有对 FaceBox 的引用。您可以通过添加参考来解决这个问题：

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.facebox/1.4.1/jquery.facebox.min.js"></script>

或者，您可以通过设置$.DirtyForms.dialog property 来使用您想要的任何对话框，或者您可以将其设置为 false 以使用浏览器的默认对话框。

$.DirtyForms.dialog = false;

在 Dirty Forms 2.x 中，false 现在是默认设置，因此无需添加对 FaceBox 的引用。