jQuery and UpdatePanels (Asp.Net)
Well, I love using jQuery.
I think this open-source js library is simply the best when you want to create a more rich user experience in your websites and applications.
Some will argue mootools is better but hey, this is a long and exausting battle, almost like the one between PHP and ASP.net
This post comes to explain the difficulties when using jQuery dom event like "click" and "change" with an update panel.
Just one thing before I start, this post assumes you know jQuery, it also assumes you know your way around .net and you also know what an UpdatePanel is.
So, let's begin
This is what our application looks like:
What do we have here?
We have an updatePanel containing a grid with data from the server and a client-side button.
This client-side button has an event attached to it with jQuery like so:
Now, let's explain what's happening.
When the updatePanel fires an update event, all of the content inside it will be replace, but, with replacing this content all of the DOM data attached to it will also be disposed.
So, when we try to click the button after an updatePanel update the event will not be fired. To avoid this, jQuery offers a "live" event So, we will use the code like this
This will solve the problem for you.
Questions, comments?
feel free
My name is Avi Tzurel. I'm a professional web developer from Israel. I spend most of my day developing both web products and RIA applications as well as imparting my experience onto others. I speak, teach and write about my passions, and develop applications according to what I preach. I specialize in Flex, Adobe Air, HTML, XHTML, Javascript, jQuery and other Javascript libraries, on the server side I do .net along side with Ruby on Rails. You can connect with me on Twitter or email me through the contact page on this blog.
Pages
Me
RSS
Categories
- actionscript
- asp.net
- Concept
- Flash media server
- Flex
- General
- JavaScript
- jQuery
- Product management
- Ruby on rails
- Sql server
Archives
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
Recent Posts
- gitignore template for flex projects
- jQuery colorbox plugin no opacity (overlay) – IE7
- flash media server security hardening
- set button width to text width in flex
- jQuery, wait for animation to end then do something
- Copy object properties to another object – Flex
- YUI Calendar page to the selected date (multi calendar)
- Empty dialogs in flex builder 3 + Flash builder 4
- Git export (like SVN export)
- Access flex application through the SWFLoader component
- Flash builder 4 – sharing a project with your team using SVN Screencast
- Change WebOrb default port from 2037 to what you want
- Dynamic streaming (Adaptive bitrate) using Flash media Server
- Enumeration on a property – Flex 3
- Backup all databases (SQL Express) with a single T-Sql
Tags
Resent Comments
- forex robot on set button width to text width in flex
- Avi Tzurel on jQuery and UpdatePanels (Asp.Net)
- Corrado on jQuery and UpdatePanels (Asp.Net)
- acne treatment on Solo standalone mp3 player to embed in a page
- Avi Tzurel on RTMP being blocked by firewalls – Flash media server
- Max on RTMP being blocked by firewalls – Flash media server
- Graciela Gonzalez on Backup all databases (SQL Express) with a single T-Sql
- Avi Tzurel on Dynamic streaming (Adaptive bitrate) using Flash media Server
- Nikola Dachev on Dynamic streaming (Adaptive bitrate) using Flash media Server
- Wordpress Themes on Copy object properties to another object – Flex
July 25th, 2010 - 17:17
I have similar problem. I’m neewbie in Jquery and Javascript.
My code is:
$(document).ready(function () {
$(“#btCerca”).button({
icons: {
primary: ‘ui-icon-search’
}
}).click(function () {
document.getElementById(“”).click();
return false;
});
How I need to modify my code to solve problem?
July 25th, 2010 - 21:21
I don’t understand what does that code supposed to be doing?
especially the click part, what do you want to click when you do that?