Question

I’m generating a page using jsp, it has a list element which shows a few report names. When generating the list, I’d like to hide the id of each report in the list item element so that when the user clicks that item, I can use ajax to fetch it from the server, since I know the id. What’s a good way to do this such that it’s easy for jquery to pick up the id on a click? Right now I have something like:

// jsp pseudocode
<ul id='reports'>
    <%
    for (all reports) {
        %><li><%= report.getTitle() %>
            <div class='hidden'><%= report.getId() %></div> // the hidden id for this item
          </li>
        <%
    }
</ul>

// click handler for the list.
$('#reports').delegate('li', 'click', function() {
    var idOfTheClickedReport = ?;
    fetchReportById(idOfTheClickedReport);
    ...
});

Is there a better way to do this?

Thank you

Answer 1

I would not suggest using a hidden div that way. It is a lot of extra markup for an id, and you are not currently using the id or rel attribute (Both potential candidates for holding this information):

Since there is already the concept of an ID in HTML, I think it makes the most sense to leverage that:

<ul id='reports'>
   <% for (all reports) { %>
      <li id="report-<%= report.getId() %>"><%= report.getTitle() %></li>
   <% } %>
</ul>

This would output:

<ul id='reports'>
      <li id="report-1">Title Here</li>
      <li id="report-19">Title Here</li>
      <li id="report-27">Title Here</li> 
</ul>

Then in your jQuery part (Assumes id will not contain a -):

$('#reports').delegate('li', 'click', function() {
    var idOfTheClickedReport = this.id.split('-').pop();
    fetchReportById(idOfTheClickedReport);
    ...
});