Dynamic Pages and jQuery

Dynamic, Speed, Scale

Dynamic, speed, scale, we keep these things in mind when building solutions for our customers.  There are some interesting challenges when building things this way, for example, using tabs to organize your page with information is a fairly common task.  What can become challenging though when building complex solutions is the more tabs that contain pages and data there are on a single page the more data there is to load.  We have built solutions that go several levels down in tabbed navigation so that information is easy to find.  Our solution to doing this and keeping things fast is to build the pages and their data on the App Server dynamically and then render the response via jQuery ajax.  So as a user clicks on a tab, the page to see is built, the data needed queried and only that page is rendered.  It gives the illusion that the entire page is built when in fact the only thing that is built is what the user sees.  As you drill into more information the pages needed at that time are build.

There are some other challenges you run into here as things get more complex.  jQuery can provide a lot of user side features, hiding fields and showing based on events, form validation, etc.  You can include the needed jQuery on each page but then  it is hard to maintain because you have jQuery written everywhere as opposed to combined in a single file.  When you include then on a single file however that is loaded already and then you create new dynamic pages there are a few things you need to do differently to the jQuery so that it continues to work.

The following shows one way to reference the change event of an element using jQuery.

$(‘#element’).on(‘change’, function() {

code …

});

This code will not work however with the way we do things, rendering dynamically generated pages via ajax trying to capture the change event on one of the elements on this new page it will just stare at you and do nothing.  You have to change the code to the following to get it to work…

$(document).on(‘change’, ‘#element’, function() {

code …

});

 

We just wanted to share a small piece of the puzzle and some of the things we think about and have worked through.  Building things for speed and scale sometimes introduces challenges you don’t normally run into.  Let us know how we can help you with your challenges.

Post A Comment