1

jQuery ツール タブ (AJAX) と jQuery UI ダイアログ (ダイアログの AJAX 読み込みを手動で行う) を使用すると問題が発生します。問題は、ダイアログがロードされ、現在のタブ専用にセットアップされることです (タブのコンテンツとともに、AJAX を介してタブ要求にロードされます)。jQuery UI は、ダイアログを作成するときに、コンテナーを元の位置から削除し、そのマークアップを追加して、本文に追加します。

問題は、ダイアログがタブのコンテンツの外にあり、その後のタブの変更で置き換え/削除されないことです。ユーザーが別のタブまたは [戻る] ボタンをクリックすると (これらのタブには URL ハッシュを使用した AJAX 履歴があるため、ページは実際にはリロードされません)、ダイアログは壊れますが、jQuery UI ダイアログがそれを外部に移動したため、削除されません。タブの内容。それは今、体の底に現れています。ユーザーが閉じるボタンを物理的にクリックした場合の「ハックアラウンド」を書きましたが、戻るボタンが押された場合、または別のタブがAJAXを介してロードされた場合、これは起動されず、jQuery UIは実際にはそれを一番下に戻しますbody (どのように/なぜそれを行うのかわかりません!)。助言がありますか？そして、私がそれについて明確でない場合はお知らせください。ありがとう！（今持っているものは、

    $('.openMyDialog').click(function() {

                    // Create div for dialog
        $('body').append('<div id="modalContainer"></div>');

        // Load dialog with AJAX
        $('#modalContainer').load('loadMyAjaxContent.html').dialog({
            modal: true,
            width: 850,
            open: function(type,data) {
                // Remove from bottom of body and put it back into the tab's content
                $(this).parent().appendTo('.panes div:first');
            },
            close: function() {
                $(this).dialog('destroy');
                $('#modalContainer').remove();
            }
        });


    });
4

1 に答える 1

0

多数の jQuery Ajax タブを含むメイン ページを設定し、各タブがページをページ content-panel/div に ajax ロードすると仮定します。

page.html

 ----/home\---/users\---
|<div id="page-content">|
|   page content gets   |
|   loaded in here      |
|</div>                 |

タブによってajaxされたページ内で、これを一番上に置きます：

すなわち。users.html で

$(document).ready(function()
{
    $('.delete-user-form').each(function(){
        if($('.delete-user-form').length > 1)
            $(this).detach();
    });

    $('#delete-user').dialog({
        autoOpen: false,
        height: 200,
        width: 300,
        modal: true,
        buttons: {
            Cancel: function() {
                $(this).dialog('close');
            },
            'Save': function() {
                $('#delete-user-form').submit();
                $(this).dialog('close');
            }
        }
    });

    $('#delete-user-button').click(function(){
        $('#delete-user').dialog('open');
    });
});

そして、それがダイアログ ボックスに変換される users.html の準備されたフォームです。

<div id="delete-user" class="delete-user-form" title="Delete User" style="display:none;">
    <form action="/admin/users/delete" id="delete-user-form" method="POST">
        <input type="hidden" id="user-id" name="userID" />
        <table cellspacing="0" cellpadding="5px" border="0" id="delete-user-form-table" style="display:none;">
            <tr>
                <td>
                    Do you really want to delete:
                </td>
                <td>
                    <input type="text" id="user-name" />
                </td>
            </tr>
        </table>
    </form>
</div>

OP で説明されているように、ユーザーがタブを切り替えてこのページに戻るたびに、モーダル ダイアログ div (id="delete-user") が複製されます。

JavaScript の最初のビットは、重複するすべてのダイアログを反復処理し、DOM から最後のダイアログを除くすべてを削除するため、必要に応じて 1 つだけになります。

ダイアログを開くには、最上位ビットで指定された ID を持つボタン/リンク/その他をページに配置します。

すなわち。<input type="button" id="delete-user-button" value="Delete User" />

この方法でダイアログを開くと、OP がダイアログ設定オプションから autoOpen: false を省略してダイアログを直接呼び出したときに見つかった重複が防止されます。

于 2010-10-06T02:45:17.053 に答える