0

ユーザーがリンクをクリックしたときに、Simple Modal を使用してモーダル ボックスを作成しています。このモーダル ボックスの内部には、jquery ui タブを備えた div があります。ただし、モーダルが開かれる前に、それらのタブのコンテンツが変更されます。ただし、私の jsFiddle の例では、その部分は表示されません。

問題 リンクを初めてクリックしてモーダルを開くと、モーダル ボックスが表示され、タブが正しく機能します。

モーダルを閉じて、再度開きます。(ユーザーは同じリンクをクリックできます)。

タブが機能しません。

モーダルを開くために関数が呼び出されるたびに、インスタンスを破棄して再作成しようとすると、次のようになります。

Chrome Dev Tools がUncaught TypeError: Cannot read property 'hash' of undefined を報告します。

$(document).ready(function() {
    $('#tabs').tabs();
});

function getDetails(atag) {
    $('#hotelDetails').modal({
                minHeight: 100,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs();
                            $("#tabs").tabs("option", "active", $("#" + atag).index()-1);
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                                $('#tabs').tabs("destroy");
                            });
                        });
                    });
                },
                zIndex: 3000
            });
}

(例http://jsfiddle.net/R44Yh/1/を参照)

コンテンツを変更するために必要だと思われる REFRESH 呼び出しを実行しようとしましたが、エラーは報告されませんが、タブも変更されません。

$(document).ready(function() {
    $('#tabs').tabs();
});

function getDetails(atag) {
    $('#hotelDetails').modal({
                minHeight: 100,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs( "refresh" );
                            $("#tabs").tabs("option", "active", $("#" + atag).index()-1);
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                },
                zIndex: 3000
            });
}

(例http://jsfiddle.net/QYmxH/2/を参照)

4

1 に答える 1

0

私のソリューションは、Eric Martin の SimpleModal を使用している場合にのみ機能します。

DOM の要素を保持する persistというオプション タグがあることがわかりました。デフォルトでは、これはfalseに設定されています。これをtrueに設定すると、DOM 要素はそのまま維持されます。エリックのサイトには次のように書かれています。

永続化 [ブール値:false]

モーダル呼び出し間でデータを永続化しますか? 既存の DOM 要素にのみ使用されます。true の場合、データはモーダル呼び出し間で維持されます。false の場合、データは元の状態に戻されます。

サンプルコード:

$('#hotelDetails').modal({
                persist: true,
                modal: false,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs();
                            $("#tabs").tabs("option", "active", $("#" + atag).index());
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                                $('#tabs').tabs("destroy");
                            });
                        });
                    });
                },
                zIndex: 3000
            });
于 2013-05-30T13:15:44.023 に答える