JQuery UI диалоги и загрузка внешнего контента

Question

У меня есть список страниц, которые динамически генерируются с эхостатированием.пример:

<a href="<?php echo $action['href']; ?>"><span onclick="jQuery('#category_edit_dialog').dialog('open'); return false"><?php echo $action['text']; ?></a>

это код для создания диалогового окна jquery ui:

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#category_edit_dialog").dialog({
        width: 960,
        hide: 'slide',
        autoOpen: false,
    });

    $('#open_category_edit_dialog').click(function() {
        $('#category_edit_dialog').dialog('open');
        return false;
    });

});

что я хочу достичь в момент щелчка по ссылкам, диалог jquery uiзагрузить контент.Таким образом, вопрос, скорее всего, как загрузить внешние ссылки, которые создаются с помощью php.

Answer 1

У вас есть HREF для привязки, поэтому все, что вам нужно сделать, это использовать функцию загрузки jQuery, чтобы получить ссылку на HTML и разместить ее на своей странице.

Предполагая, что следующий HTML-код для ваших ссылок (этот странный незакрытый промежуток в привязке не имеет смысла для меня):

<a href="<?php echo $action['href']; ?>" class="dialogLink"><?php echo $action['text']; ?></a>

Вы можете изменить свой JavaScript, чтобы он работал следующим образом:

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#category_edit_dialog").dialog({
        width: 960,
        hide: 'slide',
        autoOpen: false
    });

    $('a.dialogLink').click(function() {
        var url = $(this).attr('href');
        $('#category_edit_dialog').load(url, function() {
            $('#category_edit_dialog').dialog('open');
        });
        return false;
    });
});

Ключом является событие click, связываемое со ссылками с классом dialogLink. Он получит URL-адрес, на который он указывает при нажатии, загрузит содержимое, найденное по этому URL-адресу, в div содержимого диалогового окна, который у вас уже был на странице, и как только он получит HTML-код, откроется диалоговое окно.

Answer 2

Используя jQuery, вы можете использовать функцию load (), чтобы сделать AJAX-вызов на сервер для загрузки контента. Если вы хотите, чтобы все это происходило в событии щелчка, вы можете сделать что-то вроде этого:

HTML:

 <a id="clicker" href="#">Click Here</a>
 <div id="content"></div>

JQuery:

 $(document).ready(function(){
       $('#clicker').click(function(){
            $('#content').load('URL OF YOUR PHP PAGE');
            //start your dialog here

       });

  });

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