jQuery UI: Uncaught TypeError: Unable to read property 'display' of undefined


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
            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


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

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.