jquery ui dialogue not working with AJAX content

Question

I am loading AJAX content into jquery UI dialogue by clicking on a link, but it doesn't seem to work. Problem is with the popup, the link returns ajax content fine. Trying to implement this example

$.fx.speeds._default = 1000;
$(document).ready(function(){
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode"
        });

    $('#<url_id>').live('click', function(evt) {
        //evt.preventDefault();
                        $.ajaxSetup({
                            async: false,   
                            "error":function() {   
                                alert("error");
                        }});
                        $.getJSON("<url>", 
                        function(data) {
                            if(data[0][0] != null){
                                var html = '';
                                html += '<div id="dialog" title="Basic dialog">';
//concatenating html
                                html += '</div>';
                            }                       
                        });
            $( "#dialog" ).dialog( "open" );
            return false;
    }); 
});

Tejs · Accepted Answer · 2011-08-30 21:54:55Z

1

You havent added the element with that ID to the page yet, so your selector gets no results. You need to do something like this:

var element = $(html);
$('body').append(element);
$('#dialog').dialog();

Also: You really shouldnt set ajax defaults on every click event (it's a global setting). If you need to specify additional parameters that $.getJSON doesnt provide, you should just call $.ajax directly.

answered Aug 30, 2011 at 21:54

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

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

2 Comments

jqueryEnthusiast Over a year ago

Thanks Tejs, the reason I am using $.getJSON is I can setup the async to false, for every click. I don't think I can do this with $.ajax?

Tejs Over a year ago

You can. $.ajax is the most versatile of all the methods, and I believe the other methods (like $.getJSON) just internally call $.ajax/

Collectives™ on Stack Overflow

jquery ui dialogue not working with AJAX content

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related