I have been struggling through this issue, looking up every variation of keywords that I could think of on Google, and am not making progress. SO, the gist of what I have is a ListView, a datapager, and both are inside an UpdatePanel. I am binding the data
to the ListView via the Page_PreRender method in which I set up a connection to the database, bind the data, and then close the connection to the database. And actually, once I retrieve some values from the database, I am simply binding a server-side directory
full of images to the ListView. This all works great.
The issue comes in with a Jquery plugin that I am using to turn this ListView of images into a photo gallery, in which you can click on an image, and the bigger version of the image is displayed in a nicely styled overlay. Now, the ListView fetches 4 pages
worth of images (12 images per page). This listview is stored within a slideout div (also a jquery plugin). So, once the page renders, I click on the slideout div's image, and it slides the div out, nicely displaying my paged ListView results. If I click on
any of the images on that first page, they display as they should in the prettyPhoto overlay. However, when I click on another page number, the new images display as they should, but unfortunately clicking on any of them takes you directly to the URL of the
standalone image, rather than displaying it in the jquery overlay.
I am guessing that only the original 12 images on the first page are getting the prettyPhoto jquery script applied to them, and that because no postback is happening when a new page is accessed, the subsequent images do not have the jquery prettyPhoto script
applied to them (no postback is happening because of the UpdatePanel). If I remove the UpdatePanel, then the next page of the ListView loads on postback, and has the prettyPhoto script applied to it perfectly. The only reason I do not want to remove the UpdatePanel
is that the postback causes the page to scroll back to the top of the screen, and the jquery slideout div is returned to its docked state; not elegant at all!
Not sure if the above description really needs a code example; I am hoping someone has read the above and knows exactly what nifty little trick I can do to accomplish what I want with this setup. If code is needed, though, just let me know. Thanks for reading,
and thanks for any feedback or input!
Ok, I found the answer on my own! As a suspected, the javascript was not getting loaded on the asyncpostbacks from the updatepanel. This article did a great job explaining the problem, and gave three individual resolutions: http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx.
I am not sure why, but I needed both Method 2 and Method 3 to make it work, but I'll take it! Problem solved! Good luck to anyone else that finds themselves in a similar situation!
MidPacific
0 Points
3 Posts
ListView & Datapager inside UpdatePanel with Jquery Script (prettyPhoto)
Dec 31, 2012 01:12 PM|LINK
Hello!
I have been struggling through this issue, looking up every variation of keywords that I could think of on Google, and am not making progress. SO, the gist of what I have is a ListView, a datapager, and both are inside an UpdatePanel. I am binding the data to the ListView via the Page_PreRender method in which I set up a connection to the database, bind the data, and then close the connection to the database. And actually, once I retrieve some values from the database, I am simply binding a server-side directory full of images to the ListView. This all works great.
The issue comes in with a Jquery plugin that I am using to turn this ListView of images into a photo gallery, in which you can click on an image, and the bigger version of the image is displayed in a nicely styled overlay. Now, the ListView fetches 4 pages worth of images (12 images per page). This listview is stored within a slideout div (also a jquery plugin). So, once the page renders, I click on the slideout div's image, and it slides the div out, nicely displaying my paged ListView results. If I click on any of the images on that first page, they display as they should in the prettyPhoto overlay. However, when I click on another page number, the new images display as they should, but unfortunately clicking on any of them takes you directly to the URL of the standalone image, rather than displaying it in the jquery overlay.
I am guessing that only the original 12 images on the first page are getting the prettyPhoto jquery script applied to them, and that because no postback is happening when a new page is accessed, the subsequent images do not have the jquery prettyPhoto script applied to them (no postback is happening because of the UpdatePanel). If I remove the UpdatePanel, then the next page of the ListView loads on postback, and has the prettyPhoto script applied to it perfectly. The only reason I do not want to remove the UpdatePanel is that the postback causes the page to scroll back to the top of the screen, and the jquery slideout div is returned to its docked state; not elegant at all!
Not sure if the above description really needs a code example; I am hoping someone has read the above and knows exactly what nifty little trick I can do to accomplish what I want with this setup. If code is needed, though, just let me know. Thanks for reading, and thanks for any feedback or input!
Josh
MidPacific
0 Points
3 Posts
Re: ListView & Datapager inside UpdatePanel with Jquery Script (prettyPhoto)
Dec 31, 2012 08:57 PM|LINK
Ok, I found the answer on my own! As a suspected, the javascript was not getting loaded on the asyncpostbacks from the updatepanel. This article did a great job explaining the problem, and gave three individual resolutions: http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx. I am not sure why, but I needed both Method 2 and Method 3 to make it work, but I'll take it! Problem solved! Good luck to anyone else that finds themselves in a similar situation!
Josh