Раздел динамического диалога JQuery

Общие сведения.
Таблица со строками создается динамически с помощью php на странице. Использование jquery-ui-1.8.14.custom.min.js и jquery-1.5.1.min.js

Цель : Я хотел бы иметь возможность щелкнуть строку, которая обновит диалоговое окно Jquery Ui с новым содержимым со страницы php, а затем отобразит это содержимое в диалоговом окне Jquery Ui.

$(function(){
  $('tr').live('click', function(){
    $('.ui-dialog').load('<?php echo base_url();?>index.php/a/b/1');
    $('.ui-dialog').dialog('open');
  });
});

Этот код заставляет диалоговое окно появляться и исчезать очень быстро, без остановки. Я также пробовал следующее, что, как я думал, будет работать:

$(function(){
  $('tr').live('click', function(){
    $('.ui-dialog').load('<?php echo base_url();?>index.php/a/b/1',
      function(){
        $('.ui-dialog').dialog('open')
    });
  });
});

Код диалога:

$(function(){$('.ui-dialog').dialog({
        autoOpen: false,
        width: 600,
        draggable: true,
        resizable: true,
        open: function(){
                        $('.ui-widget-overlay').fadeIn();},
        beforeClose: function(){
                        $('.ui-widget-overlay').fadeOut();},
        show: "fade",
        hide: "fade", 
        buttons: {
        "Back to search": function() { 
            $(this).dialog("close"); }
        }
    })});

Любая помощь очень ценится. Спасибо.


person ciaran    schedule 22.07.2011    source источник
comment
в каком состоянии ".ui-dialog" ... скрыто, я полагаю? Можете ли вы проверить, что load() возвращает правильный HTML? и успешно? например .load('<?php echo base_url();?>index.php/a/b/1',function(responseText){ alert(responseText); ...   -  person James Khoury    schedule 22.07.2011
comment
«.ui-диалог» настроен на отображение: нет. Я могу заставить его отображаться правильно, не пытаясь изменить содержимое диалогового окна div. 'load()' возвращает правильный HTML и успешно работает с вашим примером кода.   -  person ciaran    schedule 22.07.2011
comment
Добавляете ли вы какие-либо обработчики событий открытого диалога? Вы пытались добавить статический жестко закодированный контент, а затем попробовать открыть диалоговое окно?   -  person James Khoury    schedule 22.07.2011
comment
Жестко закодированный статический контент работает. например: $(function(){$('tr').live('click', function(){$('.ui-dialog').dialog('open')})}); Открыть обработчики событий диалога? Как в .dialog('close') и т.д.?   -  person ciaran    schedule 22.07.2011
comment
события, как в jqueryui.com/demos/dialog/#event-open это выглядит как будто из вашего редактирования вы open: function{ .., но это выглядит безопасно. попробуйте поместить return false; в событие click, может быть, оно всплывает и вызывает запуск чего-то еще? Я бы все же предположил, что ваш вызов ajax возвращает плохой html или что-то пишет.   -  person James Khoury    schedule 22.07.2011
comment
Не обращайте внимания на последний комментарий, который я только что придумал - посмотрите на ответ, который я добавил.   -  person James Khoury    schedule 22.07.2011
comment
return false не решает. Я еще раз проверю звонки. Спасибо за вашу помощь.   -  person ciaran    schedule 22.07.2011
comment
Игнорируйте этот возврат false; Это потому, что вы инициализируете диалоговое окно, а затем удаляете все добавленные html, которые он поместил. Проверьте мой ответ ниже.   -  person James Khoury    schedule 22.07.2011


Ответы (2)


когда вы инициализируете как:

$(function(){$('.ui-dialog').dialog({
    autoOpen: false,
    width: 600,
    draggable: true,
    resizable: true,
    open: function(){
                    $('.ui-widget-overlay').fadeIn();},
    beforeClose: function(){
                    $('.ui-widget-overlay').fadeOut();},
    show: "fade",
    hide: "fade", 
    buttons: {
    "Back to search": function() { 
        $(this).dialog("close"); }
    }
})});

Он добавляет HTML к .ui-dialog, когда вы .load() удаляете его.

Что вам нужно сделать, это либо поместить код инициализации после загрузки ajax, либо:

$(function(){
  $('tr').live('click', function(){
    $('.ui-dialog .ui-dialog-content').load('<?php echo base_url();?>index.php/a/b/1',
      function(){
        $('.ui-dialog').dialog('open')
    });
  });
});

http://jsfiddle.net/hgeYs/4/

person James Khoury    schedule 22.07.2011
comment
Отлично большое спасибо. По сути, я пропустил только содержимое диалогового окна пользовательского интерфейса, думая, что диалоговое окно пользовательского интерфейса было селектором. Не могу поверить, что я не наткнулся на это в Интернете! Спасибо! - person ciaran; 22.07.2011

что-то вроде этого

$(function() {
    $('tr').live('click', function() {
        var obj = $('<div/>');
        obj.load('<?php echo base_url();?>index.php/a/b/1', function() {
            obj.dialog({
                close: function(event, ui) {
                    $(this).dialog("destroy")
                }
            })
        })
    })
})
person zb'    schedule 22.07.2011
comment
$(this) относится к 'tr' и меняет это прекрасно, НО то, что я пытаюсь сделать, это изменить то, что появится в диалоговом окне, когда оно появится. - person ciaran; 22.07.2011
comment
затем загрузите в отдельный элемент и отобразите его, не забудьте уничтожить диалог, после закрытия я отредактирую, чтобы показать образец - person zb'; 22.07.2011
comment
Отлично.спасибо. Одна вещь, чтобы я мог быть просвещен: почему это работает, когда оно загружается в автономный элемент? - person ciaran; 22.07.2011
comment
что ты имеешь в виду ? $('<div/>') создает совершенно новый div, я также думаю, что «.ui-dialog» - это беспорядок, потому что он выглядит как класс jqueryui, - person zb'; 22.07.2011
comment
Разве мой второй пример не делает то же самое, что и этот код? Я использую JqueryUI. - person ciaran; 22.07.2011
comment
зачем нужен класс ui-dialog, если вам нужен просто пустой элемент, мой образец создает совершенно новый элемент. - person zb'; 22.07.2011
comment
Так ли важно каждый раз создавать новый экземпляр? Ссылка: blog.nemikor.com /2009/04/08/basic-usage-of-the-jquery-ui-dialog - person ciaran; 22.07.2011