jQueryUI dialog not displaying

Question

I am trying to generate a jQuery UI dialog using a function. The function is triggered by an onClick event and it is executing, but for some reason the dialog will not display. I'm sure it is something simple.

I would prefer to create the dialog in this way if possible as loading the dialog from a separate html page causes same origin issues on chrome. The code is part of a browser extension that can possibly be used offline so this way allows for that without the same origin restrictions.

I have already created a similar dialog of this nature that worked which had a parameter appended between tags. I have tried that with the current one and it has not worked.

I have the latest jQuery ui and jQuery libs added in the main page.

I'm new to javascript and jQuery but if anyone could provide some help I'd greatly appreciate it.

Thanks,

Joe

function imageSelection() {

var NewDialog = $('<div id="imageSelectionDialog"> ' +

    "<ol id= \"selectable\">" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image1.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image2.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image3.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image4.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image5.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image6.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image7.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image8.jpg\"/></li>" + 
    "</ol>" +

    "<form id=\"pieceSelection\">" + 
         "<div id=\"imageInput\">" + 
             "<input type=\"text\" id=\"image\" value=\"images/stock/walkin.jpg\"" +
                 "title=\"Select an image above or Paste a URL e.g http://server.com/path/to/image.jpg\"/>" + 
         "</div>" +

         "<div id=\"radio\">" + 
             "<input type=\"radio\" id=\"radio1\" name=\"radio\" checked/>" + 
             "<label for=\"radio2\">x3</label>" + 
             "<input type=\"radio\" id=\"radio2\" name=\"radio\"/>" + 
             "<label for=\"radio3\">x4</label>" + 
             "<input type=\"radio\" id=\"radio3\" name=\"radio\"/>" + 
             "<label for=\"radio4\">x5</label>" + 
             "<input type=\"radio\" id=\"radio4\" name=\"radio\"/>" + 
             "<label for=\"radio5\">x6</label>" + 7
             "<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 
             "<label for=\"radio6\">x7</label>" +
             "<input type=\"radio\" id=\"radio6\" name=\"radio\"/>" + 
             "<label for=\"radio7\">x8</label>" + 
             "<input type=\"radio\" id=\"radio7\" name=\"radio\"/>" + 
             "<label for=\"radio8\">x9</label>" + 
        "</div>" + 
    "</form>" + 
'</div> ');


NewDialog.dialog({
    autoOpen: false,
    modal: true,
    height: 500,
    width: 500,
    title: 'Choose an image',
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        }
    }
});

return false;

}​  

Answer 1

You seem to have an unexpected 7 within your string which makes this concatenation invalid, causing a Uncaught SyntaxError: Unexpected string.

Change this:

"<label for=\"radio5\">x6</label>" + 7
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 

to either this:

"<label for=\"radio5\">x6</label>" +
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 

or this:

"<label for=\"radio5\">x6</label>" + 7 + 
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 

In addition you need to set autoOpen to true if you want the dialog to be visible immediately.

DEMO - Removing the 7 and set autoOpen to true

Answer 2

You do not seem to be appending the HTML to the DOM to make it work..''

Append it to the body before you assign it to a Do=ialog and it should work..

var html = '<div id="imageSelectionDialog"> ' + 
            //other html  ;

$('body').append(html);

var NewDialog = $("#imageSelectionDialog");

// Code to Initialize the dialog