jQuery UI: Uncaught TypeError: Cannot read property 'display' of undefined

Question

I'm trying to get data using jquery ajax, everything works good and I get what I want, but I can't display it because I get a Uncaught TypeError: Cannot read property 'display' of undefined.

Here the code. Any idea?

/*
 * Get the data from the ajax call and display a dialog
 */

function CreateDialog(email) {

    // get the data from the ajax call
    var promise = AjaxSubscribe(email)

    // if data are available, show the dialog
    promise.success(function (data) { 
        // data is a simple html code
        var dialog = $(data);

        // can't setup the dialog! Error
        // Uncaught TypeError: Cannot read property 'display' of undefined 
        dialog.dialog({
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        dialog.dialog( "open" );
        return false;
    });
}

This is the output of data

 console.log(data)

 <p>Data debugging</p>
 <ul>
   <li>Ip address: 193.125.139.18</li>
   <li>Country Name: Italy</li>
   <li>Country Code: IT</li>
   <li>Email: [email protected]</li>
 </ul>

Answer 1

Try wrapping your data HTML inside a container, either on the backend or the frontend:

var dialog = $('<div/>').html(data);

I'm not sure .dialog() will work on multiple document fragments (you have a <p> and a <ul> inline). $(data) would be an array with 2 elements which is not what .dialog() expects.