변수 HTML 파일을 Javascript 대화 상자에로드하십시오.

Question

웹 페이지에 파일 목록이 표시됩니다. (Cherrypy와 Jinja2를 사용하는 브라우저 기반 Python 앱) 사용자가 클릭 한 항목 중 하나를 클릭하면 좋은 Jquery 대화 상자가 나타나서 클릭 한 항목에 대한 추가 정보를 제공합니다. 나는 대화 상자를 설정하고 기능적으로 빠져 나가 특정 정보를 빼고 들어갔다. 이것이 내가 도움이 필요한 곳입니다.

페이지에 표시된 목록의 각 항목에 대한 HTML 파일을 작성하기 위해 Python 스크립트를 작성했습니다. 사용자가 표시된 목록에서 foo.pdf를 클릭하면 어떻게 foo.html을로드 할 수 있습니까?

나는 다음과 같은 자바 스크립트 코드 (@Sander의 ROE 씨)이 : 내 생각에 고유 한 id가 그 id에 따라 .html 파일을로드 목록의 각 항목을 지정했다

$(document).ready(function(){ 
    $("#selectable").children("li").each(function() { 
     $(this).mouseover(function(){ 
      $(this).css("background-color","#FECA40"); 
     }); 
     $(this).mouseout(function(){ 
      $(this).css("background-color","white"); 
     }); 
     $(this).click(function(){ 
      if (!$(this).data('dialog')) { 
       $(this).data('dialog', 
        $('<div />') 
         .load('whatever.html') // <-- This HTML file should 
         .dialog({autoOpen: false, // coordinate with user selection 
        show: "slide", 
           hide: "fade", 
         width: 500, 
       height: 500}) 
      ); 
      } 
      var dlg = $(this).data('dialog'); 
      dlg.dialog("open"); 
      return false; 
    }); 
    }); 
}); 

하지만, 내가 자바 스크립트에서 그것을하는 방법에 대해 확실하지 않거나 심지어 할 수있는 경우/Javascript에서해야합니까? 고맙습니다!

는 업데이트 :
는 @ user1598086 제공하는 코드는 큰 일했다. 나는 또한 그 좋은 값을 위해 HTML5shiv을 던졌다. 그것이 필요한지 아닌지는 잘 모르지만 상처를 입을 수는 없다고 생각했습니다.

Answer 1

당신은 대신 ID로하는 data- 속성을 사용할 수 있습니다 : 예를 들어 http://ejohn.org/blog/html-5-data-attributes/

: 다음

<li data-externalfile="whatever.html">Whatever</li> 

와 (당신이 jQuery를 사용하고있는 사용자 코드에서 가정), 대신 .load('whatever.html')을의 귀하의 예에서는 사용하십시오

.load(($this).attr("data-externalfile"))