jquery ajax response not showing on jqueryui dialog window

Question

I would like to show blog details when a link is clicked.

Here is part of the code I have.

".ajax" part

    $.ajax({
        url: 'someurl',
        dataType: 'json',

        success: function( response ) {
            $( '#viewDialog > h1' ).html( response.title );
            $( '#viewDialog > p' ).html( response.content );

            $( '#viewDialog' ).dialog( 'open' );
        }
    });

".html" part

<div id="viewDialog" title="My Blog">
    <h1></h1>
    <p></p>
</div>

I am pretty sure I get the response from the server in the right json format. Something like this {"id":"120","title":"My new stuff","content":"Someting new","author_id":"11"}

When I clicked the link, the dialog window poped up but no information was shown in the window.

Did I do everything right?

Milo

Codecraft · Accepted Answer · 2011-06-06 17:09:27Z

2

Almost, by the looks of things - try this:

$.ajax({
    url: 'someurl',
    dataType: 'json',
    success: function( response ) {
        $( '#viewDialog > h1').html( response.title );
        $( '#viewDialog > p' ).html( response.content );

        $( '#viewDialog' ).dialog( 'open' );
    }
});

You didn't define an ID of blogDetail that I could see. It looks like you're trying to put the HTML into viewDialog.

answered Jun 6, 2011 at 17:09

Codecraft

8,3264 gold badges30 silver badges46 bronze badges

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

2 Comments

hoyomi Over a year ago

I think I pasted a wrong code. I have updated my question. In fact, the code I had trouble with was exact the same as your answer. Still the dialog window pops up but no information on it. Further help is appreciated.

Codecraft Over a year ago

is that all of your code? Have you included JQuery UI and initialised a dialog box before trying to open it?

Mutt · Accepted Answer · 2011-06-09 16:23:11Z

1

You have no element with an ID of blogDetail in the HTML you provided.

Edit after question update:

Passing 'open' into the dialog call will only work if the dialog was previously created.

Placing $( '#viewDialog' ).dialog({autoOpen:false}); at the top of your jQuery script should make this work.

Or you could simply remove the 'open' parameter and just call $( '#viewDialog' ).dialog();

Demo using { autoOpen : false }

Demo without Passing 'open'

edited Jun 9, 2011 at 16:23

answered Jun 6, 2011 at 17:09

Mutt

9356 silver badges9 bronze badges

Collectives™ on Stack Overflow

jquery ajax response not showing on jqueryui dialog window

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related