The problem was complexity. I wasn’t just adding Ajax to existing page content – I also had to Ajax-enable an open-ended number of nested links and forms which were themselves dynamically downloaded.
The jQuery .load() method allows you to download fragments of HTML into the current page. I was using it to download multiple forms (and links), which then had to be set up to use Ajax. These new Ajax forms and links would then download further forms which would also need to be set up for Ajax. This led to some very messy coding and all sorts of recursion problems (such as event handlers being bound to the same object more than once). Switching to delegates not only solved the problems – it also made the code much simpler.
The application used two forms of Ajax: form submission using the Forms plugin, and links which which used the .load() method – which looks like this:
In the example, the .load() method retrieves the page at http://myHref and then looks for the section identified by the selector #selector. The resulting HTML is set as the HTML content of the element myID.
I needed to call .load() on every link inside the newly downloaded HTML, and then use the optional callback to add Ajax to any forms that had been downloaded. This screenshot shows the problem – a user can have n games, which can have n players, who can have n player statements – all of which need to be downloaded using Ajax and then set up to make their own Ajax calls.
In my first pass, the callback was very large, with logic to ensure I was not setting up the same event handlers twice, and named elements given individual treatment:
Switching to delegates made the code much simpler – and removed the problem of panels having to be processed multiple times:
The delegate method looks like this:
The key point is that rather than assigning the event handler directly on the element, you are assigning the handler to any and all matching elements (in this case, input:text) inside the matched set (in this case, the <body> element). This is powerful enough – but the real beauty is that the handlers are assigned, even if the matching child elements have not been added yet. That means the handler will automatically be applied to any child elements that are added dynamically using Ajax.
Now, instead of having to repeatedly set up each element as it is downloaded, I can set up the Ajax behavior I want on the parent element and it is automatically applied to all children – whether or not they have been downloaded yet. This means I can create a general function to set up the links:
And then call it with the appropriate arguments for the particular div/panel:
Now, as the new forms and links are downloaded and added to a container, any matching elements are automatically assigned Ajax behavior.
Without jQuery delegates, wiring up Ajax functionality on dynamically downloaded forms can be a nightmare of recursion. With jQuery delegates, the code becomes simpler, cleaner – and much more elegant.
If you want to learn about jQuery in depth, then you might want to spend 3 days attending jQuery: A Comprehensive Hands-On Introduction. If you’re interested in jQuery with ASP.NET MVC, then that is covered in Building Web Applications with ASP.NET MVC, and if you want to know how to integrate jQuery into ASP.NET Web forms – well, our course Building Web Applications with ASP.NET and Ajax covers that as well, and I just happen to be the author.
For other related information, check out these courses from Learning Tree: