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!!!
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.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Marked as answer by Vince Xu - MSFT on Sep 15, 2009 09:34 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(){}
});
}
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.
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?
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,
to
// 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,
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.
ftt
0 Points
5 Posts
UpdatePanel Problem. Javascript not firing after asyncronous postback
Sep 08, 2009 03:46 PM|LINK
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!!!
updatepanel UpdatePanel GridView "Update Panel" .NET 2.0 .ASP.Net 2.0 Update panel ajax "asynchronous" "asp.net" "AJAX .NET 2.0" updatate panel
Vince Xu - M...
All-Star
80367 Points
6801 Posts
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Sep 10, 2009 05:43 AM|LINK
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.
gt1329a
All-Star
15379 Points
2502 Posts
ASPInsiders
MVP
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Sep 13, 2009 02:02 AM|LINK
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.
A guide to combining jQuery and ASP.NET: jQuery for the ASP.NET developer
ftt
0 Points
5 Posts
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Sep 16, 2009 03:46 PM|LINK
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);
gt1329a
All-Star
15379 Points
2502 Posts
ASPInsiders
MVP
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Sep 16, 2009 04:09 PM|LINK
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.
A guide to combining jQuery and ASP.NET: jQuery for the ASP.NET developer
DavideDarko
Member
8 Points
14 Posts
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Jan 16, 2010 06:27 PM|LINK
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.
Bym.ulku
Member
2 Points
1 Post
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Jan 29, 2010 11:58 AM|LINK
thank you no problem :)
Fessss
Member
4 Points
2 Posts
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Mar 10, 2010 08:39 AM|LINK
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.
Fessss
Member
4 Points
2 Posts
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Mar 10, 2010 10:42 AM|LINK
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,to
// 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
Zap_Man
Member
35 Points
33 Posts
Re: UpdatePanel Problem. Javascript not firing after asyncronous postback
Dec 12, 2012 03:23 PM|LINK
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.