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

Posted 2023-05-09

【中文标题】当我尝试将表单设置为清理时，脏表单给出错误

【英文标题】：Dirty Forms giving error when I try to set form to clean

【发布时间】：2014-01-06 22:14:53

【问题描述】：

我有一个表单，我正试图监控它何时变为“脏”（已更改），以便我可以启用“保存更改”按钮。这很简单。在 $(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

【问题讨论】：

你得到答案了吗？

你引用的是人脸框吗？插件默认使用它

错误信息与此线程中的错误信息可疑相似：***.com/questions/4885368/facebox-only-works-once

“当我回忆起使用 ajax 函数加载包含更多信息的表单时”- 代码是什么样的？

@zeroflagL 我添加了函数。

【参考方案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 );
;

【讨论】：

好的，我试过了，但它似乎期待从 facebox 回来的东西继续。可能是确认。

好的，我更新了答案，提供了一些有关如何使插件正常工作的提示。这可能会让人头疼，但值得阅读我引用的链接。

我的 Facebox 已经在工作了。我需要的是使dirtyforms.js 不尝试弹出对话框的某种方式，因为我不需要它们并且它们妨碍了。

知道在哪里触发了facebox，这一点很重要。它是在dataTable() 通话期间调用的吗？它是在 Ajax 响应/成功函数之前调用的吗？ jQuery 允许您将一个函数附加到每个 Ajax 响应。 (api.jquery.com/jquery.ajax)

其实dataTable并不是脏表单的一部分，所以不管是之前还是之后都没有区别。表单中的部分就在注释 //Set main fields 之后。无论如何，谢谢你的帮助。我想我会发布第二个关于如何阻止dirtyForms 创建弹出框的问题。

【参考方案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 的引用。