UpdatePanel Problem. Javascript not firing after asyncronous postback

Article
2009-09-08

Question

_{Tuesday, September 8, 2009 11:46 AM}

Hey all,

I am trying to use Jquery + prettyPhoto to display images in a gridview that is also in an update panel.

The js scripts work with the images in the gridview up until an asyncronous event happens inside the update panel. At this point the js scripts are "lost". I have researched and tried many different options but none seem to work. I have included the parts of code that matter.

Once the "Add to cart" button is clicked and the asyncronous postback is fired, the images no longer are connected to the prettyPhoto scripts like they were on page_load. Any advice would really be appreciated!! This is driving me nuts! Thanks!!!

<!-- prettybox includes -->    
<script src="../Resources/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../Resources/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<!-- / prettybox includes -->
<link type="text/css" rel="stylesheet" media="screen" href="../Resources/css/prettyPhoto.css" />


<asp:UpdatePanel ID="updateTagCatalog" runat="server" UpdateMode="Conditional">
                <ContentTemplate>

<asp:GridView ID="gvDepartmentTags" .......
<Columns>   
                                <asp:TemplateField ItemStyle-VerticalAlign="top">
                                    <ItemTemplate>
                                        <a id="ahrefImage" runat="server" rel="prettyPhoto[gallery]" title='<%# Bind("TagName") %>' >
                                            <asp:Image ID="imgTagImageThumb" runat="server" />
                                        </a>                                         
                                    </ItemTemplate>                
                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-VerticalAlign="top">
                                    <ItemTemplate>
                                        <asp:ImageButton id="imgbtnAddTagToCart" runat="server" ImageUrl="~/Resources/images/add_to_cart_icon.gif" CommandName="AddToCart" CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>" />
                                        <asp:HiddenField ID="hdnPop" runat="server" />
                                        <cc1:ModalPopupExtender ID="mpeAddToCart" runat="server" TargetControlID="hdnPop" PopupControlID="pnlAddToCart" OkControlID="ButtonOk" BackgroundCssClass="modalBackground" />
                                        <asp:Panel ID="pnlAddToCart" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:5px;">
                                            <div style="padding: 20px; border: 4px solid silver;">
                                                <asp:Label ID="lblAddToCartSuccessMessage" runat="server"/>
                                                <br />
                                                <br />
                                                <div style="text-align: center;">
                                                    <asp:Button ID="ButtonOk" runat="server" Text="Close" />                                        
                                                </div>
                                            </div>
                                        </asp:Panel>                                        
                                        </cc1:AnimationExtender>  
                                    </ItemTemplate>
                                </asp:TemplateField>                    
                                
</Columns>
</asp:GridView>       

</ContentTemplate>
</asp:UpdatePanel>

All replies (9)

_{Thursday, September 10, 2009 1:43 AM ✅Answered}

Hi,

The async request from updatepanel will update the entire content of updatepanel. If you used Jquery plugin to bind on the element within updatepanel, it need to be rebind after async postback in endrequest phase.

_{Saturday, September 12, 2009 10:02 PM ✅Answered}

Assuming you're doing something like this to apply the plugin:

<script type="text/javascript">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Change it to use ASP.NET AJAX's pageLoad instead:

<script type="text/javascript">
  function pageLoad() {
    $("a[rel^='prettyPhoto']").prettyPhoto();
  }
</script>

That will apply the prettyPhoto functionality both on initial page load and after every partial postback to refresh an UpdatePanel. If you're interested, read here for more information on why/how $(document).ready and pageLoad differ.

_{Wednesday, September 16, 2009 11:46 AM}

I tried both the PageLoad method and the endRequestHandler method. They both work. Is there a performance gain by using endRequestHandler versus PageLoad?

function endRequestHandler(sender, args) {
       $("a[rel^='prettyPhoto']").prettyPhoto({
           callback: function(){}
       });
   }

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

_{Wednesday, September 16, 2009 12:09 PM}

If there's any difference, it's negligible. Sys.Application will check for pageLoad in an attempt to call it after every partial postback, even if it doesn't exist anyway. Sort of like AutoEventWireup that you can't disable.

One nice thing about using pageLoad is that you can consolidate both initialization and re-initialization into that single function. With it, you won't need the $(document).ready() initialization. Using EndRequest, you'll still need to set prettyPhoto up in $(document).ready too.

_{Saturday, January 16, 2010 2:27 PM}

I'm actually trying to do the same and use prettyphoto in an update panel, but this solution (and other i have found on the net are not working)... Is this because the JQuery code is in a child page that inherits from a master page?

Thank you.

_{Friday, January 29, 2010 7:58 AM}

thank you no problem :)

_{Wednesday, March 10, 2010 4:39 AM}

I have some problems with PrettyPhoto and UpdatePanel too. On the master page i wrote

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">           google.load("jquery", "1.3");   </script>

    <link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen"
        title="prettyPhoto main stylesheet" charset="utf-8" />

    <script src="/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">   
        function pageLoad(){
            $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
        }
    </script>

In the children page i have code:

              <table border="0">
                    <tr>
                        <td class="padding"><span><span class='gallery clearfix'><a rel='prettyPhoto' href='/virtualimages/aaa_aaa_(aaa)_07.12.2009_11_27_27_1.jpg.aspx?type=photo' target='_blank' ><img src='/virtualimages/aaa_aaa_(aaa)_07.12.2009_11_27_27_1.jpg.aspx?type=photo&thumbnail=1&width=200&height=150' alt='bad' border=0></a></span><br /></span></td>
                    </tr><tr>
                        <td class="cell_center"><span>Size: 92032 байт (1024x768)</span></td>
                    </tr><tr>
                        <td class="cell_center"><span>bad</span></td>
                    </tr><tr>

                        <td class="cell_center"><a id="ctl00_ContentPlaceHolder1_lnkEditPhoto154_r" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lnkEditPhoto154_r','')" style="color:Black;">[Edit name]</a></td>
                    </tr><tr>
                        <td class="cell_center"><a onclick="return DeleteItem();" id="ctl00_ContentPlaceHolder1_lnkDeletePhoto154" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lnkDeletePhoto154','')" style="color:Black;">[Delete]</a></td>
                    </tr>
                </table>

and this code is in UpdatePanel.

I see that function pageLoad has worked everytime when page load (after update UpdatePanel too). But plugin PrettyPhoto doesn't. Can u help me ? thx.

_{Wednesday, March 10, 2010 6:42 AM}

I found a solution to my problem. It didn't work because there was calling $(element).prettyPhoto more than once on a page.

I changed jquery.prettyPhoto.js from

if($('.pp_overlay').size()==0) _buildOverlay(); // If the overlay is not there, inject it!

// Global variables accessible only by prettyPhoto
var doresize = true, percentBased = false, correctSizes,

// Cached selectors
$pp_pic_holder, $ppt, $pp_overlay,

// prettyPhoto container specific
pp_contentHeight, pp_contentWidth, pp_containerHeight, pp_containerWidth,

     // Cached selectors
var $pp_pic_holder, $ppt, $pp_overlay;

if($('.pp_overlay').size()==0) {
_buildOverlay(); // If the overlay is not there, inject it!
} else {
// ensure the cached selectors are initialized
$pp_pic_holder = $('.pp_pic_holder');
$ppt = $('.ppt');
$pp_overlay = $('div.pp_overlay');
}

// Global variables accessible only by prettyPhoto
var doresize = true, percentBased = false, correctSizes,

// prettyPhoto container specific
pp_contentHeight, pp_contentWidth, pp_containerHeight, pp_containerWidth,

Thanks.

http://forums.no-margin-for-errors.com/comments.php?DiscussionID=323

_{Wednesday, December 12, 2012 11:23 AM}

I too am having an issue with my javascript/jquery not firing after asyncronous postback.

I have build a composite control with a dropdown list inside of it. I have added a context menu to the contol for right clicking. All the controls on the page work well except for a couple in a particular area.

I have a modular popup that has a small form in it with these composite controls. This is where the right click does not work. If I remove the popup then the controls work fine.

So in conclusion after the pop up is show the javascript to make the right click does not work. If I close the popup the controls on the main form still work.

here is the context menu I am using http://www.javascripttoolbox.com/lib/contextmenu/index.php

I can post the code if I need to but there is alot there so I will have to shorten it abit for an example. I have no document.ready or page load function in the javascript. So changing that part will not work.

Share via

UpdatePanel Problem. Javascript not firing after asyncronous postback

Question

All replies (9)

Additional resources