jQueryUI 대화 상자가 표시되지 않습니다.

Question

함수를 사용하여 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; 

}​ 

Answer 1

문자열 내에 예기치 않은 7이있는 것 같습니다. 연결이 유효하지 않게되어 Uncaught SyntaxError: Unexpected string이 발생합니다.

변경이 :

"<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\"/>" + 

당신은 당신의 대화를 원한다면 true에 autoOpen를 설정해야합니다 또한

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

즉시 보일 수 있습니다.

DEMO

- 진정한

Answer 2

당신은 그것이 작동되도록하기 위해 DOM에 HTML을 추가 할 것 같지 않습니다 .. ''

전에 몸에 추가 당신은 그것을 Do = ialog에 할당하고 작동해야합니다.

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

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

var NewDialog = $("#imageSelectionDialog"); 

// Code to Initialize the dialog