Jquery – ASP.Net UpdatePanel + Gridview + Hyperlinks + jQuery nyroModal plugin – Entire new window opening, but I just want a modal

asp.net-ajaxjquerynyromodalupdatepanel

I have an UpdatePanel with a GridView inside it.

The Gridview has a TemplateColumn containing a Hyperlink.

Using jQuery at the start of the page, I set all of these hyperlinks to become nyroModal modal hyperlinks. I.e. so when you click them, the target page is loaded into a modal dialogue. This code is:

<script type="text/javascript">
    $(document).ready(function(){
        $(".modal").nyroModal();
    });
</script>

If I remove the UpdatePanel, then the above nyromodal code works perfectly well.
But with the UpdatePanel there, it stuffs up the nyroModal calls and opens the links as raw entire new windows/tabs in Firefox. The UpdatePanel is trying to be too smart and initiate a postback etc.

Do I have to somehow register the nyromodal call for each button at render time or something to tell .Net/UpdatePanel to "stay the hell away" ? I played around a bit with RegisterClientScriptBlock etc but can't seem to make it happy. It seems like such a hassle to register client side script with .Net server-side code. I find it cumbersome and frustrating 🙂

Thanks a lot for any suggestions or insight.

Best Answer

try this instead:

<script type="text/javascript">
    $(document).ready(function(){
        /*
            This binds a callback to the click event of all 
            elements with the 'modal' class, even ones that are
            updated inside an UpdatePanel.
        */
        $(".modal").live('click', function(){
            /*
                When the element is clicked, open the nyroModal dialog
                manually. (If the element is a link, nyroModal will 
                automatically get the content based on the link's href attribute.)
            */
            $(this).nyroModalManual();
        });
    });
</script>

Edit

I've created a page that seems to work fine. The full source code is below.

Note: There's one important thing I didn't to in the code above. I forgot to prevent the link from actually changing the browser location, so note the evt.preventDefault(); in the code below (Sorry about that :P).

<%@ Page Language="C#" %>
<script runat="server">
  public void Page_Load()
  {
    BindGridViewUrls();
  }

  public void GridViewUrls_PageIndexChanging(object sender, GridViewPageEventArgs e)
  {
    GridViewUrls.PageIndex = e.NewPageIndex;
    BindGridViewUrls();  
  }

  public void BindGridViewUrls() {
    var Urls = new[]{
      new {UrlText="Google", Url="http://google.com"},
      new {UrlText="Stack Overflow", Url="http://stackoverflow.com"},
      new {UrlText="XKCD", Url="http://xkcd.com"},
      new {UrlText="Google Reader", Url="http://google.com/reader"},
      new {UrlText="reddit", Url="http://reddit.com"},
      new {UrlText="Hacker News", Url="http://news.ycombinator.com"},
      new {UrlText="Ubuntu", Url="http://ubuntu.com"},
      new {UrlText="Twitter", Url="http://twitter.com"},
      new {UrlText="YouTube", Url="http://youtube.com"},
      new {UrlText="Wikipedia", Url="http://en.wikipedia.org"},
      new {UrlText="Coding Horror", Url="http://codinghorror.com"},
      new {UrlText="Mozilla", Url="http://mozilla.org"},
      new {UrlText="jQuery", Url="http://jquery.com"},
      new {UrlText="NyroModal", Url="http://nyromodal.nyrodev.com/"},
    };
    GridViewUrls.DataSource = Urls;
    GridViewUrls.DataBind();
  }
</script>
<!DOCTYPE
  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>UpdatePanel Test</title>
  <script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  </script>
  <script src="jquery.nyroModal-1.4.2.js"></script>
  <script>
    $(function(){
      $('.modal').live('click', function(evt){
        $(this).nyroModalManual({minWidth:750});
        evt.preventDefault();
      });
    });
  </script>
</head>
<body>
  <form runat="server">
  <div>
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server">
      <ContentTemplate>
        <asp:GridView runat="server" ID="GridViewUrls" AllowPaging="true"
          PageSize="5" OnPageIndexChanging="GridViewUrls_PageIndexChanging">
          <Columns>
            <asp:HyperLinkField DataTextField="UrlText"
              DataNavigateUrlFields="Url" ControlStyle-CssClass="modal"
            />
          </Columns>
        </asp:GridView>
      </ContentTemplate>
    </asp:UpdatePanel>
  </div>
  </form>
</body>
</html>
Related Topic