Question

I have a list of files being displayed on a webpage. (browser based Python app using Cherrypy and Jinja2) What I would like is when a user clicks on one item of the list, for a nice little Jquery dialog box to pop up and provide them with additional information on whichever item they clicked on. I have the dialog box set-up and functioning, minus the specific information to go inside. This is where I need help.

I have written a Python script to create HTML files for each item in the list displayed on the page. How can I load, for example, foo.html when the user clicks on foo.pdf in the displayed list?

I have the following Javascript code (Courtesy of @Sander Roes):

$(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;
    });
  });
});

My thought was to assign each item in the list a unique id then load the .html file based on that id, but I’m not sure about how to do it in Javascript, or if I even can/should do it in Javascript? Thank you!

Update:

The code provided by @user1598086 worked great. I also threw in that HTML5shiv for good measure. Not sure if it is needed or not, but figured it couldn’t hurt.

Answer 1

You can use a data- attribute, instead of an id:
http://ejohn.org/blog/html-5-data-attributes/

For example:

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

and then (assuming from your code you’re using jQuery),
instead of .load('whatever.html') in your example, use

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