1

動的コンテンツを新しいJQueryダイアログにロードする際に問題が発生しました。ボタンをクリックしても何も起こりません。

私のコードは以下の通りです：

    <script  src="jquery-ui.min.js"></script>

    <script>
        //$('#dialog').dialog({ dialogClass: 'noTitleStuff' }); ---> CSS

         $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                height:$(window).height() - 50,
                width:$(window).width() - 50,
                    show: {
                    effect: "blind",
                    duration: 400,
                    },

                    hide: {
                    effect: "explode",
                    duration: 400
                    }
            });

            $( "#opener" ).click(function() {
                $( "#dialog").dialog({
                    open: function(event, ui) {
                           $('#content').load('http://www.google.com');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="dialog">
        <div class="content"></div>
    </div>
    <button id="opener">Open Dialog</button>
</body>

4

4 に答える 4

3

最初のdialog（）セットアップでopen関数を定義する必要があります。

$("#dialog").dialog({
    autoOpen: false,
    height: $(window).height() - 50,
    width: $(window).width() - 50,
    show: {
        effect: "blind",
        duration: 400,
    },
    hide: {
        effect: "explode",
        duration: 400
    },
    open: function (event, ui) {
        $('#content').load('http://www.google.com');
    }
});

そして、次のように呼び出します。

$("#opener").click(function () {
    $("#dialog").dialog('open');
});

jsfiddle

ps：使用しています$('#content')が、HTMLで定義しますclass="content"

于 2013-02-28T08:11:04.757 に答える
1

コンテンツdivには、IDではなくクラスがあります。以下のコードでうまくいきます。

$( "#opener" ).click(function() {
                $( "#dialog").dialog({
                    open: function(event, ui) {
                           $('.content').load('http://www.google.com');
                    }
                }).dialog("open");
            });
于 2013-02-28T08:10:09.027 に答える
1

あなたができることは、そのDOM内にhtmlをロードしてダイアログを作成することです。

$('#content').load('http://www.google.com');

$( "#content" ).dialog( 'open' );
于 2013-02-28T08:10:30.143 に答える
0

これまでに提供された回答に加えて、提供された例はGoogleページを読み込もうとしているため、「すぐに使用できる」状態では機能していません。JQueryのドキュメントを読むまで、この30分でこの問題に遭遇しました。

ブラウザのセキュリティ制限により、ほとんどの「Ajax」リクエストには同一生成元ポリシーが適用されます。リクエストは、別のドメイン、サブドメイン、ポート、またはプロトコルからデータを正常に取得できません。

他の誰かがこの問題を抱えていて、提供された例とJSFiddlesが期待どおりに機能しないのはなぜか疑問に思っている場合に備えて。

于 2014-09-10T09:57:22.220 に答える