JQuery Dynamic Dialog Div

Question

Background:
A table with rows is created dynamically with php on a page. Using jquery-ui-1.8.14.custom.min.js and jquery-1.5.1.min.js

Goal: I'd like to be able to click on a row which would update the Jquery Ui dialog div with new content from a php page and then display this content in the Jquery Ui dialog box.

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

This code makes the dialog appear and disappear very fast without halting. I've also tried the following which I thought would work:

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

Dialog code:

$(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"); }
        }
    })});

Any help is very much appreciated. Thanks.

what state is the ".ui-dialog" ... hidden I assume? Can you check that the load() is returning the correct html? and is successful? for example .load('<?php echo base_url();?>index.php/a/b/1',function(responseText){ alert(responseText); ... — James Khoury
– James Khoury, Commented Jul 22, 2011 at 5:10
The '".ui-dialog"' is set to display:none. I can get it to display properly without trying to change the content of the dialog div. 'load()' is returning the correct HTML and is successful with your example code. — ciaran
– ciaran, Commented Jul 22, 2011 at 5:28
Are you adding any open dialog event handlers? have you tried adding some static hardcoded content and then try opening the dialog? — James Khoury
– James Khoury, Commented Jul 22, 2011 at 5:49
Hard coded static content works. eg:$(function(){$('tr').live('click', function(){$('.ui-dialog').dialog('open')})}); Open dialog event handlers? As in the .dialog('close') etc? — ciaran
– ciaran, Commented Jul 22, 2011 at 6:36
events as in jqueryui.com/demos/dialog/#event-open it looks like from your edit you are open: function{ .. but it looks safe. try putting a return false; in your click event maybe it is bubbling and causing something else to run? I would still suggest it is your ajax call returning bad html or writing over something. — James Khoury
– James Khoury, Commented Jul 22, 2011 at 7:12

James Khoury · Accepted Answer · 2011-07-22 07:36:08Z

1

when you initialise like :

$(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"); }
    }
})});

It adds HTML to the .ui-dialog when you .load() it removes it.

What you need to do is either put the initialise code after the ajax load or:

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

edited Jul 22, 2011 at 7:36

answered Jul 22, 2011 at 7:26

James Khoury

22.6k4 gold badges36 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ciaran Over a year ago

Excellent thanks very much. Basically just the ui-dialog-content i left out thinking the ui-dialog was the selector. Can't believe I didn't come across that online! thanks!

zb' · Accepted Answer · 2011-07-22 05:50:47Z

0

something like this

$(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")
                }
            })
        })
    })
})

edited Jul 22, 2011 at 5:50

answered Jul 22, 2011 at 4:59

zb'

8,0793 gold badges44 silver badges68 bronze badges

7 Comments

ciaran Over a year ago

$(this) is referring to the 'tr' and changing that fine BUT what I'm trying to do is change what will appear in the dialog box when it appears.

zb' Over a year ago

then load to standalone element and dialog it, don't forget to destroy dialog, after close, I will edit to show sample

ciaran Over a year ago

Perfect.thanks. One thing just so I can be enlightened: Why does it work when it is loaded to a standalone element?

zb' Over a year ago

what you mean ? $('<div/>') creates brand new div, i also think that '.ui-dialog' is mess things, because looks like jqueryui class,

ciaran Over a year ago

Is my 2nd example not doing the same thing as this code? I'm using JqueryUI.

|

Collectives™ on Stack Overflow

JQuery Dynamic Dialog Div

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related