Jquery dirtyforms не работает должным образом при щелчке DIV и window.location.href

Я использовал jquery.dirtyforms с начальной загрузкой, чтобы уведомить пользователя, что что-то не сохраняется на этой странице. Это отлично работает с якорными ссылками, но у меня есть div на странице, которая фактически работает как ссылка на какую-то другую страницу. это div имеет data-action атрибут, содержащий URL-адрес другой страницы, и по нажатию кнопки я устанавливаю data-action значение для window.location.href для навигации. Когда я нажимаю div он выдал подтверждающее сообщение по умолчанию всплывающего окна браузера вместо Bootstrap Modal. Я дал уникальный класс div с именем tabDiv, Я попытался добавить поддержку div в jquery.dirtyforms.js и написал это, что не работает:

<div class="sf-active div_Header tabDiv" id="div_Header" data-action="@Url.Action("ViewContract", "Contract", new { Id = Request.QueryString["Id"] })">
    <span>First</span>
    <i class="i_Header"></i>
    ClickMe
    <div class="ContraHeader glyphicon"></div>
</div>

$(".div_Header").click(function(evt) {  
    evt.stopImmediatePropagation();
    var url = $(this).attr('data-action');
    if (url !== undefined)
        window.location.href = url;
});

Что я пытался изменить в Jquery.DirtyForms.Js, который не работает

var events = {
    bind: function (window, document, data) {
        $(window).bind('beforeunload', data, events.onBeforeUnload);
        $(document)
            .on('click', 'a:not([target="_blank"])', data, events.onAnchorClick)
            .on('submit', 'form', data, events.onSubmit)
            .on('click', 'div.tabDiv', data, events.onDivCLick);
    }, onDivCLick: function(ev){
        bindFn(ev);
    },

Я хочу, чтобы это работало на div нажмите также. В настоящее время это работает, но сообщение по умолчанию всплывающее окно браузера. Я хочу показать тот же мод Bootstrap и на этом клике.

Источник

1 ответ

Решение

С помощью window.location.href с грязными формами это немного сложно. К счастью, в этом случае вы можете настроить привязку события, чтобы получить контроль.

Имейте в виду, навигация должна происходить в 2 разных случаях:

  1. Когда форма не грязная.
  2. Когда пользователь нажимает "продолжить" в диалоговом окне.

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

В первом случае вам просто нужно вставить код, чтобы проверить грязное состояние в вашем событии. Вы можете создать свое мероприятие внутри bind.dirtyforms событие, чтобы получить доступ к events экземпляр объекта, а затем просто вызвать events.onAnchorClick(ev) внутри вашего мероприятия в соответствующее время.

Грязные формы отменит событие, если форма грязная. Итак, вам нужно проверить, является ли ev.isDefaultPrevented() возвращается false, Если это так, то это безопасно для вашей навигации.

Во втором случае вы можете воспользоваться тем фактом, что Dirty Forms висит на объекте события, пока диалог не будет закрыт. Если вы храните URL в ev.data собственности, вы можете получить доступ к нему позже в процессе. В частности, Dirty Forms вызывает onRefireClick обработчик событий, когда (и только когда) пользователь нажимает кнопку "продолжить". Таким образом, вы можете запустить свою пользовательскую навигацию, используя URL-адрес, который вы ранее сохранили в событии.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        input.dirty, input.dirty + label, select.dirty, textarea.dirty {
            background-color: red;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@1.11.3,bootstrap@3.0.0,jquery.dirtyforms@2.0.0(jquery.dirtyforms.min.js+jquery.dirtyforms.dialogs.bootstrap.min.js)"></script>
</head>
<body>
    <form action="/" id="dialog-form-thing" method="post"> 
        <input id="text1" type="text"/>

        <div class="sf-active div_Header tabDiv" id="div_Header" data-action="http://www.google.com/">
            <span>First</span>
            <i class="i_Header"></i>
            ClickMe
            <div class="ContraHeader glyphicon"></div>
        </div>
    </form>

    <script>
        $(function() {
            function navigate(url) {
                if (url !== undefined)
                    window.location.href = url;
            }

            /*   Event binding code - call before first .dirtyForms  */
            $(document).bind('bind.dirtyforms', function (ev, events) {
                var originalBind = events.bind;

                events.bind = function (window, document, data) {
                    // Attach the original Dirty Forms events
                    originalBind(ev);

                    // Attach a custom event
                    $(document).on('click', 'div.tabDiv', data, function (ev) {
                        // Store the URL in the event object for later use
                        var navUrl = $(this).attr('data-action');
                        ev.data = { url: navUrl };

                        // Execute the Dirty Forms logic to open the 
                        // dialog if the page has dirty form(s).
                        events.onAnchorClick(ev);

                        // If the page has no dirty forms, this
                        // will return false, causing navigation.
                        if (!ev.isDefaultPrevented())
                        {
                            navigate(navUrl);
                        }
                    });
                };

                var originalOnRefireClick = events.onRefireClick;

                events.onRefireClick = function (ev) {
                    if (ev.data && ev.data.url)
                    {
                        // If we previously stored the URL, navigate to it.
                        navigate(ev.data.url);
                    }
                    else
                    {
                        originalOnRefireClick(ev);
                    }
                };
            });

            $('form').dirtyForms();

        });
    </script>
</body>
Источник
Другие вопросы по тегам