2

関数を使用して jQuery UI ダイアログを生成しようとしています。関数は onClick イベントによってトリガーされ、実行中ですが、何らかの理由でダイアログが表示されません。シンプルなものだとおもいます。

別のhtmlページからダイアログをロードすると、クロムで同じ起源の問題が発生するため、可能であればこの方法でダイアログを作成することをお勧めします。このコードは、オフラインで使用できる可能性のあるブラウザー拡張機能の一部であるため、この方法では同じオリジンの制限なしで使用できます。

タグ間にパラメーターが追加された、機能するこの性質の同様のダイアログを既に作成しました。現在のものでそれを試しましたが、うまくいきませんでした。

メイン ページに最新の 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;

}​
4

2 に答える 2

2

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

デモ- を削除して true7に設定autoOpen

于 2013-01-03T23:17:52.100 に答える
0

DOMを機能させるためにHTMLをDOMに追加しているようには見えません。」

Do = ialogに割り当てる前に、本体に追加すると、機能するはずです。

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

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

var NewDialog = $("#imageSelectionDialog");

// Code to Initialize the dialog
于 2013-01-03T23:14:02.873 に答える