Разрешить window.onbeforeunload при удалении всех строк с состоянием

Я работаю с проектом MVC4. У меня есть страница редактирования, на которой я разрешаю пользователям добавлять элементы в таблицу HTML. Когда элементы добавляются и не сохраняются, я использую window.onbeforeunload, чтобы предупредить пользователя при попытке покинуть страницу. Все работает, за исключением случая, когда я удаляю только один элемент из таблицы, мой триггер window.onbeforeunload = null;. Я хочу, чтобы он срабатывал только тогда, когда ВСЕ элементы удалены.

Примеры кода:

$("#AddLinkDiv a").on("click", function () {
    $.ajax({
        url: "../../DrugArticles/EditHandledPropertiesRow/" + $("#NplPackId").val(),
        cache: false,
        success: function (data) {
            $("#EditDrugArticleTable tr").last().after(data);
            $("#EditDrugArticleTable tr").last().addClass("ToBeAdded");
                window.onbeforeunload = function() {
                    return 'Are you sure you want to leave?';
                };
            addDatePicker();
        },
        dataType: "html"
    });
    return false;
});

...

if ($("#EditDrugArticleTable .State[Value='New']").find("tr").length == 0) {
    window.onbeforeunload = null;
}

...

    $("#EditDrugArticleTable").on("click", "td.Delete a", deleteRow);

...

    function deleteRow() {
    var parentRow = $(this).parent().parent();
    var state = parentRow.find("input.State").val();
    if (state == "Existing") {

        parentRow.addClass("ToBeDeleted");
        parentRow.find("input").not("[type='hidden']").prop("disabled", true);
        parentRow.find("input.State").val("Deleted");

        $(this).toggleClass("backStage");
        $(this).attr("title", "Ångra");
        window.onbeforeunload = function() {
            return 'Are you sure you want to leave?';
        };
    }
    else if (state == "Deleted") {

        parentRow.removeClass("ToBeDeleted");
        parentRow.find("input").prop("disabled", false);
        if (!parentRow.find("input.Procured").is(":checked")) {
            parentRow.find("input.Price").prop("disabled", true);
        }
        parentRow.find("input.State").val("Existing");

        $(this).toggleClass("backStage");
        $(this).attr("title", "Ta bort");
        if ($("#EditDrugArticleTable").prop(".State[Value='New']")) {
            window.onbeforeunload = null;
        }
    }
    else if (state == "New") {
        parentRow.remove();
        if ($("#EditDrugArticleTable").prop(".State[Value='New']")) {
            window.onbeforeunload = null;
        }
    }
    return false;
}

Заранее спасибо.


javascript jquery onbeforeunload
person urbz    schedule 08.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте использовать это: $(window).unbind("beforeunload"); - когда вам нужно отменить событие

$(окно).bind("перед выгрузкой", function() { ... }); - или это, когда вам нужно вернуть его

Будьте осторожны, используя это событие. Opera не обрабатывает onbeforeunload, или я не знаю, как это сделать.

После последнего комментария я думаю, что это должно выглядеть так:

function ckeckUnloadEvent() { if ($("#EditDrugArticleTable .State[Value='New']").find("tr").length == 0) { window.onbeforeunload = null; } else { window.onbeforeunload = function() { return 'Are you sure you want to leave?'; }; } }

Ваша функция:

var parentRow = $(this).parent().parent();
var state = parentRow.find("input.State").val();

if (state == "Existing") {
    ...
}
else if (state == "Deleted") {
    ...
}
else if (state == "New") {
    ...
}

ckeckUnloadEvent();

return false;
person kot-6eremot    schedule 08.04.2014
comment
Спасибо за ответ. Я попробовал это решение, но, к сожалению, оно ведет себя так же, как и раньше (оно все еще срабатывает, когда удаляется ОДИН элемент/строка таблицы). - person urbz; 08.04.2014
comment
Тогда я не очень понимаю вопрос. Вы используете $("#AddLinkDiv a").on("click", ... для удаления строк из таблицы? - person kot-6eremot; 08.04.2014
comment
Нет, для этого я использую отдельный JQuery. См. обновленный вопрос. Чтобы мой onbeforeunload срабатывал в нужное время, мне нужно проверить состояние новых добавленных строк, которые называются «Новые», поскольку они на самом деле не сохранен отправкой, которую я имею. Я хочу вызвать window.onbeforeunload = null;, когда все строки будут удалены. - person urbz; 08.04.2014
comment
Незначительные изменения: if ($("#EditDrugArticleTable").find("tr").hasClass("ToBeAdded")) { ... так как мне нужно было проверить класс с атрибутами css, которые применялись к новой строке. Но вынести событие в отдельную функцию было очень умно! Спасибо вам за помощь. - person urbz; 08.04.2014