jQuery problems in a Web User Control within a Modal Popup Extender within an Update Panel

Question

Well, the problem seems a bit confusing.

In one hand I have an Update Panel. Inside this Update Panel I have a Modal Popup Extender and the content of this popup is a Web User Control.

In my User Control I'm trying to include a gallery slider (http://bxslider.com/) that must be initialized simply with the JavaScript lines:

$(document).ready(function() {
  $('.bxslider').bxSlider();
}

, where .bxslider is the class of the container in which the gallery slides are defined.

Browsing the web, when I click on the control that launchs the popup, it appears the gallery controls (prev, next, and the footer bar with a number of circles representing each one of the slides of the gallery), but I'm not able to see the content of the gallery itself.

Now, if I access to the Chrome Console, magically the gallery is rendered.

I've tried to put the initialization in several places:

1. In the Web User Control markup file, at the beginning.

2. In the Web User Control markup file, at the end.

3. In the Web User Control Load event:

   protected void Page_Load(object sender, EventArgs e) {
     String script = "$(document).ready(function() { $('.bxslider').bxSlider(); }";
     ScriptManager.RegisterStartupScript((Control)this.Page, this.Page.GetType(), new Guid().ToString(), script, true);
   }
   

4. In the Web User Control LoadComplete event (binding through the Init event):

   protected void Page_Init(object sender, EventArgs e) {
     this.Page.LoadComplete += new EventHandler(Page_LoadComplete);
   }
   
   protected void Page_LoadComplete(object sender, EventArgs e) {
      String script = "$(document).ready(function() { $('.bxslider').bxSlider(); }";
      ScriptManager.RegisterStartupScript((Control)this.Page, this.Page.GetType(), new Guid().ToString(), script, true);
   }
   

5. In the Modal Popup Extender OnLoad event.

I'm completely lost. Any ideas?

EDIT: I think the correct question here is: is there a way to stablish a method that raises only when the Modal Popup Extender is shown and not when it's loaded?

Answer 1

New approach!

Instead the previous one, that redefined the slider each time the popup is opened (causing other problems), I have initialize the slider directly in the User Web Control:

<script type="text/javascript">
  var slider;
  $(document).ready(function () {
    slider = $('.bxslider').bxSlider();
</script>

And then the control that launchs the popup stand as:

<asp:Button id="Button1" runat="server" OnClientClick="$find('PopupBehaivourID').show(); slider.reloadSlider(); return false;" Text="Show me!" />

ie, I'm now using a method that reload the gallery each time.

Answer 2

Well, finally solved.

The solution has been to assign the TargetControlID of the modalpopup to a dummy button and then declare the control I really want to open the popup as:

<asp:Button id="Button1" runat="server" OnClientClick="$find('PopupBehaivourID').show(); setTimeout(function () { $('.bxslider').bxSlider(); }, 100); return false;" Text="Show me!" />

That solves the problem in a "dirty" way so, if anyone has other suggestions will be pretty welcome.