0

このページに何かが保存されていないことをユーザーに通知するために、ブートストラップモーダルで jquery.dirtyforms を使用しました。これはアンカーリンクで完全に機能しましたが、div実際には他のページへのリンクとして機能しているページがあります。これdivにdata-actionは他のページの URL を含む属性があり、クリックするとナビゲートするdata-action値を設定しています。window.location.hrefクリックするdivと、Bootstrap Modal ではなく、ブラウザのデフォルトのポップアップに確認メッセージが表示されました。という名前の div に一意のクラスを指定しましたtabDiv。jquery.dirtyforms.js に div のサポートを追加しようとしましたが、これは機能しませんでした:

<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 Modal を表示したい。

4

1 に答える 1

0

Dirty Forms での使用window.location.hrefは少しトリッキーです。さいわい、この場合は、イベント バインディングをカスタマイズして制御することができます。

ナビゲーションは 2 つの異なるケースで発生する必要があることに注意してください。

  1. フォームが汚れていない場合。
  2. ユーザーがダイアログで「続行」をクリックしたとき。

そのため、両方のケースで共通の関数を使用するのが最善です。また、イベントの順序付けの問題がないことを確認するために、イベント ハンドラーが 1 つしかない場合にも最適に機能します。

最初のケースでは、ダーティ ステータスをチェックするコードをイベントに挿入するだけです。イベント内にイベントを作成してオブジェクト インスタンスにbind.dirtyformsアクセスし、適切なタイミングでイベント内を呼び出すだけです。eventsevents.onAnchorClick(ev)

フォームが汚れている場合、Dirty Forms はイベントをキャンセルします。ev.isDefaultPrevented()したがって、 が返されるかどうかを確認する必要がありますfalse。もしそうなら、ナビゲーションを発射しても安全です。

2 番目のケースでは、ダイアログが閉じられるまで 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>
于 2016-06-03T16:38:05.687 に答える