I am working on a part working prototype where I use a jQuery Modal popup that utilises ajax calls for some administration functions based around a content management system.

For the above demo I used a repeater with page size of 40 and populated it with dummy data created through a for loop.

Add onClick event to the link

I went down the quick route of hooking up the edit button to display the modal that would then call an ajax method that returns the post information.

 1: <asp:Repeater ID="rptItems" runat="server">
 2:    <HeaderTemplate>
 3:    <div class="row">
 4:    <div class="span3">Options</div>
 5:    <div class="span3">Title</div>
 6:    <div class="span3">Created</div>
 7:    <div class="span3">Description</div>
 8:    </div>
 9:    </HeaderTemplate>
 10:    <ItemTemplate>
 11:    <div class="row show-grid">
 12:    <div class="span3">
<a href="#" class="btn btn-primary" id="row<%# Eval("id") %>"
 onclick="LoadPostDetails('<%# Eval("id") %>');">Edit</a></div>
 13:    <div class="span3"><%# Eval("Title") %></div>
 14:    <div class="span3"><%# Eval("Created") %></div>
 15:    <div class="span3"><%# Eval("Description") %></div>
 16:    </div></ItemTemplate>
 17:    </asp:Repeater>

We create the link on line 12 that when clicked calls “LoadPostDetails” and passes in the Id of the appropriate post. As expected every thing does as expected or so I thought.  When I clicked any of the lower items on the page I lost focus on the modal:

As you can see the modal is initiated but the actual box containing the information I want is nowhere to be seen…. unless i scroll up. What’s the problem? This is the problem “class=”#” “. There are a couple of solutions.

Solution  1 – Href calls the JavaScript method

We remove the onclick event and put the method within the href as follows:

<div class="span3">
    <a href="Javascript:LoadPostDetails('<%# Eval("id") %>');" class="btn btn-primary" id="row<%# Eval("id") %>">
    Edit</a>
</div>

The above solution works and focus is not lost.

Should I release this into the real world and JavaScript is disabled then this page is useless which takes us on to solution 2.

Solution 2 -  Assign onClick events via jQuery

We need to make 2 changes to the code in order for this to work.  The first change is the actual links itself:

<div class="span3">
    <a href="/ShowDetails.aspx?id=<%# Eval("id") %>"

class="btn btn-primary details" id="row<%# Eval("id") %>">Edit</a></div>

As you can see from the above code the link itself has a destination so should JavaScript be disabled then the user is directed to the appropriate page. You may have also noticed that I have added a new CSS class called “details”. This class is the selector I am going to use when binding the appropriate events to the object.

In my document ready method I add:

  $('.details').bind('click onenter', function () {
      var postId = $(this).attr("href").match(/id=([0-9]+)/)[1];
      LoadPostDetails(postId);
      return false;
  });

Using jQuerys Bind method I attach an on click and on enter event to each object with the css class “details”. When said object is clicked then I look at the href property and run a regular expression to get the id of the appropriate post.  This is then passed to the LoadPostDetails method.  Notice the “return false” line, this stops the browser from navigating to ShowDetails.aspx page.

This solution is alot more elegant and covers everything we need should the prototype be moved into a live project.

Be Sociable, Share!

•