Загрузка динамического содержимого в диалоговом окне JQuery

У меня проблема с загрузкой динамического содержимого в новый диалог JQuery. Когда я нажимаю на кнопку, ничего не происходит.Загрузка динамического содержимого в диалоговом окне 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>

источник

2013-02-28 Jacob

вы должны определить функцию открытия в начальном диалоге() установка:

$("#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

пс: вы используя $('#content'), но в html вы определяете class="content"

источник

2013-02-28 08:11:04 Imperative

Ваше содержание DIV имеет класс, а не идентификатор. Ниже код сделает трюк.

$("#opener").click(function() { 
       $("#dialog").dialog({ 
        open: function(event, ui) { 
          $('.content').load('http://www.google.com'); 
        } 
       }).dialog("open"); 
      });

источник

2013-02-28 08:10:09

Что вы можете сделать, это просто загрузить html внутри этого DOM и создать диалог.

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

$("#content").dialog('open');

источник

2013-02-28 08:10:30

В дополнение к предоставленным ответам до сих пор я хотел бы упомянуть, что приведенные примеры не работают «из коробки», потому что они пытаются загрузить страницу Google. Я наткнулся на этот вопрос в течение последнего получаса, пока я не прочитал в JQuery documentation:

Из-за ограничений безопасности браузера, большинство запросов «Ajax» могут к одной и той же политики происхождения; запрос не может успешно получить данные из другого домена, субдомена, порта или протокола.

На всякий случай у кого-либо еще есть эта проблема и задается вопросом, почему представленные примеры и JSFiddles работают не так, как ожидалось.

источник

2014-09-10 09:57:22

Загрузка динамического содержимого в диалоговом окне JQuery

ответ

Смежные вопросы