All geek questions in one place

When jGrowl is called, the thick box stops working (using UpdatePanel)

I call a thick box when I click a link:

<a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true" title="Add a new Contact" class="thickbox">Add a new Contact</a>

And, when the server button is pressed, I call this javascript function to show the jGrowl notification:

 ScriptManager.RegisterClientScriptBlock(this, typeof(Page), Guid.NewGuid().ToString(), "$(function(){$.jGrowl('No Contact found: " + searchContactText.Text + "');});", true);

Both work as expected, except when jGrowl is shown first than thick boxing. This will cause the thick box to not work, and the page will be shown as a normal network (as if the thick box disappeared).

Does anyone know what is going on?

UPDATE: this is a test page without a main page:

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="RoutingPortal.Presentation.WebForm2" %> <!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></title> <script src="../Scripts/jquery-1.6.2.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> <script src="../Scripts/thickbox.js" type="text/javascript"></script> <script src="../Scripts/jquery.jgrowl.js" type="text/javascript"></script> <link href="../Scripts/css/jquery.jgrowl.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="~/CSS/thickbox.css" type="text/css" media="screen" /> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div> <a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true" title="Add a new Contact" class="thickbox">Add a new Contact</a> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </div> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>

This is codebehind:

 namespace RoutingPortal.Presentation { public partial class WebForm2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), Guid.NewGuid().ToString(), "$(function(){$.jGrowl('My Message');});", true); } } }

I just tested it without UpdatePanel and it worked perfectly. So this is definitely a problem with UpdatePanel or a way to interact with jGrowl called from code.

I would really appreciate your help.

UPDATE: I even created a demo project where this problem can be easily identified. I would not want to send it to anyone who wants to help me with this. Thanks in advance guys!

UPDATE: I also tried the solution given by @Rick, changing the way jGrowl script was executed with codebehind:

 ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(), "$.jGrowl('My Message');", true);

However, the problem persists, since the result is exactly the same. Any other ideas? I would really appreciate your help.

UPDATE: I also tried this in IE8 and Chrome, having run into the same problem. Thus, this has nothing to do with the browser. Just in case.

+6
source share
3 answers

I believe that your problem has nothing to do with jGrowl and everything related to using UpdatePanel.

When using UpdatePanel, it updates all the elements in the DOM that it contains. This means that the original <a> tag created on the page and having the click value set to use the thick box no longer exists. After updating UpdatePanel, you now have a NEW <a> tag that has a colon class but has not been "initialized" (since thickbox sets up a click handler during page loading, which does not happen, as usual, during partial postback) Therefore, when you click on a link, it acts like a regular link.

There are several ways to fix this, depending on your situation.

Option 1 Based on your code inserted above, this is not like any changes to the link during postback processing. Perhaps you could move <div><a ...></a> </div> outside of the UpdatePanel and leave only the button inside. This will save your link as part of the page, and it will still have a handler for its thick window.

Option 2 If there is any reason why you cannot go with Option 1, then you can install some javascript to run at the time your UpdatePanel loads, to re-enable the click handler for your link, In the function that calls jGrowl, try adding tb_init('a.thickbox'); to your code.

Option 3 You can modify the thickbox.js file to use jQuery live handler instead of the usual click handler. In the tb_init function tb_init you change it to $(domChunk).live('click', function(){..}) . I think this will work, although it is possible that the update panel process may still add it up.

Hope this helps.

+2
source

I don't fully understand the architecture of your page, but since @patmortech notes that UpdatePanel forces DOM elements to be completely replaced with every asynchronous UpdatePanel . You need to restore all affected items.

$(document).ready not good enough when you are dealing with updates. It will be called only when the first page loads (not after updating UpdatePanel ). The solution is to connect to the ajax ASP.NET architecture for your configuration code.

What code do you use to configure ThickBox and jGrowl links, add here:

 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() { // page config code });

This is called at the end of the ASP.NET client's life cycle, so enter the configuration code for something in UpdatePanel . If you have multiple UpdatePanels, you can check what has been updated (google add_endRequest). However, it is often easier to simply use the client markup state to determine whether you need to configure something or not, or simply use a configuration code that will not break things if you run the same markup twice.

Using jquery live also an option, but it does not work for all situations.

+2
source 
 protected void Button1_Click(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(), "$.jGrowl('My Message');", true); }
+1
source

Source: https://habr.com/ru/post/896952/

More articles:


All Articles