Грязные формы дают ошибку, когда я пытаюсь установить чистую форму

У меня есть форма, которую я пытаюсь отслеживать, чтобы увидеть, когда она становится "грязной" (измененной), так что я могу затем включить кнопку "Сохранить изменения". Это довольно просто. В разделе $(document).ready() я включаю в своей форме dirtyForms.

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

Затем я загружаю форму из вызова ajax, и внутри той же функции я устанавливаю ее для очистки, а затем начинаю вызывать функцию, чтобы проверить, не загрязнена ли она.

$(".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 для загрузки формы с дополнительной информацией. Когда он сбрасывает форму, он выдает ошибку, когда он установлен для очистки. Это говорит,

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
Источник

2 ответа

Решение

Первый шаг - позвонить 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.

Вы также должны проверить, что плагин работает. Попробуйте проверить следующее:

РЕДАКТИРОВАТЬ: Чтобы получить трассировку стека, чтобы увидеть, что вызывает функцию facebox:

$.facebox = function(){
    alert( new Error().stack );
};
Источник

Правильный способ включить / отключить кнопки, когда форма грязная / чистая, теперь опубликована в официальной документации. Обратите внимание, что это работает только с 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 свойство, или вы можете установить его в false, чтобы использовать диалоговое окно браузера по умолчанию.

$.DirtyForms.dialog = false;

В грязных формах 2.х, false теперь является настройкой по умолчанию, поэтому нет необходимости добавлять ссылку на FaceBox.

Источник
Другие вопросы по тегам