jQueryUI对话框不显示

jQueryUI dialog not displaying

本文关键字：显示 对话框 jQueryUI      更新时间：2023-09-26

我试图使用一个函数生成一个jQuery UI对话框。该函数是由onClick事件触发的，它正在执行，但由于某种原因，对话框不会显示。我肯定是很简单的。

如果可能的话，我更愿意以这种方式创建对话框，因为从单独的html页面加载对话框会导致chrome上的相同起源问题。该代码是浏览器扩展的一部分，可以离线使用，所以这种方式允许不受同源限制。

我已经创建了一个类似的对话框，它在标签之间附加了一个参数。我已经尝试了当前的一个，它没有工作。

我在主页中添加了最新的jQuery ui和jQuery库。

我是javascript和jQuery的新手，但如果有人能提供一些帮助，我将非常感激。

谢谢,乔

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;
}​

您的字符串中似乎有一个意外的7，这使得此连接无效，导致Uncaught SyntaxError: Unexpected string。

改变:

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

:

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

或:

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

另外，如果你想让对话框立即可见，你需要将autoOpen设置为true。

DEMO -移除7并设置autoOpen为true

您似乎没有将HTML附加到DOM以使其工作…"

在将它赋值给Do=对话框之前将它附加到主体中，它应该可以工作。

var html = '<div id="imageSelectionDialog"> ' + 
            //other html  ;
$('body').append(html);
var NewDialog = $("#imageSelectionDialog");
// Code to Initialize the dialog
相关文章：