Loading dynamic content in JQuery dialog

2019-06-04 12:43发布

站内问答 / jQuery
555 4 4

I have a problem loading dynamic content into a new JQuery dialog. When I click on the button nothing happens.

My code is below: 

    <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>

标签： jquery dialog
举报
4条回答
男人必须洒脱
2楼-- · 2019-06-04 13:16

In addition to the provided answers so far I would like to mention, that the provided examples are not working "out-of-the-box" because they are trying to load the Google-page. I stumbled upon this issue over the last half an hour until I read in the JQuery documentation:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

Just in case anybody else is having this issue and is wondering why the provided examples and JSFiddles are not working as expected.

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
3楼-- · 2019-06-04 13:30

Your content div has class, not an id. Below code will do the trick.

$( "#opener" ).click(function() {
                $( "#dialog").dialog({
                    open: function(event, ui) {
                           $('.content').load('http://www.google.com');
                    }
                }).dialog("open");
            });
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
4楼-- · 2019-06-04 13:31

What you can do is just load html inside that DOM and create dialog.

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

$( "#content" ).dialog( 'open' );
查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
5楼-- · 2019-06-04 13:41

you have to define the open function in the initial dialog() setup:

$("#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');
    }
});

And invoke it like so:

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

jsfiddle

p.s.: you're using $('#content') but in the html you define class="content"

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)