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



Question:

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.


Solution:1

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>  


Solution:2

I suggest you use the dialog from jquery UI.

Refer this for how to use it: http://jqueryui.com/demos/dialog

I have implemented something similar to what you want using dialog and it works fine.
You only have to add the dialog back to the form like this:

jQuery(".modal").each(function() {        var popup = jQuery(this);        popup.parent().appendTo(jQuery("form:first"));  });  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »