ASP.Net UpdatePanel + Gridview + Hyperlinks + jQuery nyroModal plugin - opening a new window but I just want a modal
I have an UpdatePanel with a GridView inside it.
The Gridview has a TemplateColumn containing a hyperlink.
Using jQuery at the top of the page, I set all of these hyperlinks to become nyroModal modal hyperlinks. That is, therefore, when you click on them, the landing page is loaded into a modal dialog. This code:
<script type="text/javascript">
$(document).ready(function(){
$(".modal").nyroModal();
});
</script>
If I uninstall UpdatePanel then the above nyromodal code works fine. But with UpdatePanel it fills in nyroModal calls and opens links as raw all new windows / tabs in Firefox. UpdatePanel tries to be too smart and initiate postbacks etc.
Should I somehow register a niromodal call for each button at render time or say something to .Net / UpdatePanel to "stay in hell"? I played around a bit with RegisterClientScriptBlock etc. but can't seem happy. There seems to be such a hassle registering a client-side script with .Net server-side code. I find it cumbersome and frustrating :)
Thanks so much for any suggestions or insight.
a source to share
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 href attribute.)
*/
$(this).nyroModalManual();
});
});
</script>
Edit
I have created a page that works fine. The complete source code is shown below.
Note: There's one important thing that I didn't do in the code above. I forgot to disallow the link to actually change the browser location, so take a look at evt.preventDefault();
in the code below (Sorry for 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>
a source to share
I suggest you use dialog from jquery UI.
Refer this for help: http://jqueryui.com/demos/dialog
I have implemented something similar to what you want using dialog and it works great.
You only need to add the dialog back to the form:
jQuery(".modal").each(function() {
var popup = jQuery(this);
popup.parent().appendTo(jQuery("form:first"));
});
a source to share