当我尝试将表单设置为clean时，脏表单出现错误

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(常量)来阻止函数在表单变脏后不断重复。到目前为止，这一切都很好。按钮一直处于禁用状态，直到我更改某些内容，然后几乎立即启用。当我调用ajax函数来加载包含更多信息的表单时，问题就出现了。当它重置表单时，当它被设置为clean时，它会给出一个错误。上面写着，

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。

---

如果只是错误，那么这里有一个破解。如果你在最后期限内，这将帮助你通过，也将帮助你调试：

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插件不工作
• 这个插件支持你的jQuery版本吗？-为什么lightbox jQuery插件不适合我
• 页面上是否包含多个jQuery副本？这会让事情变得疯狂。阅读：小部件中的jQuery

---

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

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

Answer 2

在表单脏/干净时启用/禁用按钮的正确方法现在已发布在官方文档中。请注意，这只适用于脏表单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属性来使用所需的任何对话框，也可以将其设置为false以使用浏览器的默认对话框。

$.DirtyForms.dialog = false;

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