Problem with help div inside table

Question

I have a table of roles that has checkboxes with access or not. I need a help-button on the right most column that shows information for the role using JQuery Dialog. For some reason the dialog only shows every second time.

Below is the code I use:

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<%foreach (Role role in ViewData["Roles"] as List<Role>)
  { %>
    <tr>
        <td width="20%">
            <%=role.RoleName %>
        </td>
        <td width="70%">
            <%=Html.CheckBox(role.RoleName, Model.IsInRole(role.LoweredRoleName)) %>
        </td>
        <td width="10%">
        <%if (!string.IsNullOrEmpty(role.Description))
          { %>
            <%Html.RenderPartial("Help", new KeyValuePair<string, string>(role.RoleName, role.Description)); %>
        <%} %>
        </td>
    </tr>
    <%} %>
</table>

Help.aspx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<KeyValuePair<string, string>>" %>
<a href="#" onclick="$('#<%=Model.Key.Replace(" ", "") %>').dialog(); return false;">
    <img border="0" src="../../Content/Images/help_icon.gif" alt="?"/>
</a>
<div id="<%=Model.Key.Replace(" ", "") %>" title="<%=Model.Key %>" style="display:none;">
    <%=Model.Value %>
</div> 

Answer 1

A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open')

http://docs.jquery.com/UI/Dialog#overview and http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

But I'd suggest to use something like http://plugins.learningjquery.com/cluetip/ instead. ClueTip has options to be opened via click and stay until closed, so you can choose between hover and click activation. It is also extremely easy to get content via AJAX, so you don't have to load page full of information that user may never click to see.