Posts Tagged 'Ajax Forms'

Simplifying Dynamic Ajax Forms with jQuery Delegates

Recently I was working on an ASP.NET MVC application that made extensive use of Ajax. It’s a version of Chutes/Snakes and Ladders using HTML5 and JavaScript. I used jQuery for the Ajax, of course (what do you expect? I wrote the Learning Tree course jQuery: A Comprehensive Hands-On Introduction). As always, jQuery was a pleasure to work with, but even so it was a tough bit of code to write: until I turned to jQuery delegates.

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 .load() method

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:

1st code sample

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.

2nd code sample

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:

3rd code sample

Switching to delegates made the code much simpler – and removed the problem of panels having to be processed multiple times:

4th code sample

So, what is a jQuery delegate, and what does it do for me?

The delegate method looks like this:

5th code sample

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:

6th code sample

And then call it with the appropriate arguments for the particular div/panel:

7th code sample

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’re interested in the complete code, I’ve put the ASP.NET MVC page including the JavaScript in a text file here.

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.

Kevin Rattan

For other related information, check out these courses from Learning Tree:

HTML5: Next Generation Web Development

JavaScript for Web Development


Learning Tree International

.NET & Visual Studio Courses

Learning Tree offers over 210 IT training and Management courses, including a full curriculum of .NET training courses.

Free White Papers

Questions on current IT or Management topics? Access our Complete Online Resource Library of over 65 White Papers, Articles and Podcasts

Enter your email address to subscribe to this blog and receive notifications of new posts by e-mail.

Join 29 other followers

Follow Learning Tree on Twitter

Archives

Do you need a customized .NET training solution delivered at your facility?

Last year Learning Tree held nearly 2,500 on-site training events worldwide. To find out more about hosting one at your location, click here for a free consultation.
Live, online training

%d bloggers like this: