2

背景:
行を持つテーブルは、ページ上で php を使用して動的に作成されます。jquery -ui-1.8.14.custom.min.jsとjquery-1.5.1.min.js の使用

目標: Jquery Ui ダイアログ div を新しいコンテンツで更新する行をクリックできるようにしたい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"); }
        }
    })});

どんな助けでも大歓迎です。ありがとう。

4

2 に答える 2

1

次のように初期化するとき：

$(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/

于 2011-07-22T07:26:39.427 に答える
0

このようなもの

$(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")
                }
            })
        })
    })
})
于 2011-07-22T04:59:29.123 に答える