JQuery UI Dialog - изменить содержимое открытого диалога (Ajax) - PullRequest
Новая
       8

JQuery UI Dialog - изменить содержимое открытого диалога (Ajax)

2 голосов
/ 29 июля 2010

У меня есть несколько ссылок, которые я хочу динамически открывать в диалоге jQuery UI, используя jQuery.load().Как только диалоговое окно открыто, я хочу, чтобы ссылки загружались в уже открытое диалоговое окно.

  1. Итак, сайт загружается, вы нажимаете на ссылку, и она открывается в диалоге.Все в порядке.Вы можете закрывать и открывать его столько раз, сколько захотите.
  2. Пока он открыт, если вы нажмете одну из ссылок из загруженного контента, он не будет работать.
    • Ajax GET-запрос выполнен, но полученный контент не был успешно загружен в диалоговое окно.( Firebug показывает запрос)
    • Предыдущий заголовок диалога и его содержимое стираются.Но новый контент не отображается, NOR он вставлен в DOM.(Сгенерированный источник нигде не показывает контент.)

Ссылки выглядят следующим образом ... 

<a href="http://www.example.com/index.php?action=something&amp;search=somethingelse#fragment" rel="dialog" title="Title Attribute">

Событие клика привязано ... 

$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});

Функция ajax_dialog проверяет наличие диалога, вызывает его создание, если его нет, вызывает загрузку содержимого, устанавливает заголовок и открывает диалоговое окно, если его нет.open. 

function ajax_dialog(_this, _event){
    var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
    var linkTitle = $(_this).attr("title");

    // Create dialog
    if(!$('body').find('#ajaxDialog').size()){
        $('body').append('not yet init<br />'); // This shows up the first click only.
        init_dialog('#ajaxDialog');
    }

    // Load Dialog Content
    load_dialog('#ajaxDialog', urlToLoad);

    // Add title
    $('#ajaxDialog').dialog('option', 'title', linkTitle);

    // Open dialog (or reload)
    if(!$('#ajaxDialog').dialog('isOpen')){
        $('#ajaxDialog').dialog('open');
        $('body').append('not yet open<br />'); // This shows up the first click only.
    }
    return false;
}

Функция init_dialog создает диалоговое окно, если его нет ... 

function init_dialog(_this){
    $('body').append('<div id="ajaxDialog"></div>');
    // Set Dialog Options
    $(_this).dialog({
        modal:true,
        autoOpen:false,
        width:900,
        height:400,
        position:['center','center'],
        zIndex: 9999,
        //open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
        close:function(){$(this).empty();}
    });
}

Функция load_dialog загружает в диалог необходимое содержимое.

function load_dialog(_this, urlToLoad){
    $(_this).load(urlToLoad, function(){
        $('body').append(urlToLoad + ' load function<br />'); // This shows up each click
        $(_this).append("Hihi?"); // This shows up each click
    });
    // The loaded information only shows the first click, other times show an empty dialog.
}

1 Ответ

1 голос
/ 12 августа 2010

Хах.Как показано в коде, я использовал $jQuery.load() и вытягивал точную href ссылку как URL для запроса.Все URL имели фрагменты / якоря на конце, то есть: .... html#id-of-div.

В этом случае сам скрипт работал нормально, но # id-of-div на странице еще не было.Вот почему я мог видеть возвращенный контент, но диалог просто оказался пустым.: -)

...