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: anemail@gmail.com</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.

Answer 2

Be sure do you not have an empty line at the end of your file. Some editor like Vim add automatically an empty line to respect the POSIX standard Why would Vim add a new line at the end of a file? With Sublime you can show this empty line.