Page 1 of 1

AJAX applications with a lot of divs

Posted: Fri Nov 03, 2006 5:33 am
by onion2k
I'm writing an application that has a large amount of divs piled on top of each other. At the moment there's about 50. They're all different forms, tables, charts etc, and I have a nifty little function that switched between them all depending on what you're doing.

I created it this way because, at the time, it seemed quite logical. I could define each form with HTML and change it very easily. However, I've a feeling it's making Firefox a bit memory-intensive so I'm considering moving to a system that defines the forms in Javascript and uses DOM rewriting to draw them as required. Unfortunately this will mean you'll need some substantial knowledge of the DOM in order to do things like adding a new field.

I'd rather keep it simple.

Is there a trick/hack/method of making an AJAX application handle lots and lots of forms without having each one in a seperate hidden div? All the AJAX stuff I've read so far concentrates on the server interaction side of things rather than the interface bit.

Posted: Fri Nov 03, 2006 11:23 am
by n00b Saibot
can you exactly describe what this application is like, what you are trying to do... and a demo would be great.

Posted: Fri Nov 03, 2006 1:19 pm
by Buddha443556
Is there any reason this stuff can't be loaded from the server as needed using xmlhttprequest()?

Posted: Fri Nov 03, 2006 2:29 pm
by onion2k
Buddha443556 wrote:Is there any reason this stuff can't be loaded from the server as needed using xmlhttprequest()?
Not really, as I was discussing with Burr earlier, I could stream the forms in and use innerHTML to display them. But that seems to defeat the point of AJAX to me. It'd be slower (you'd need to download the form when you want to view it), and it'd use more bandwidth. Plus there's the point that innerHTML is a Microsoftism that's been adopted by the other browsers rather than actually part of the JavaScript standard.

Another alternative is to build a set of functions that I can use to make the forms on the clientside using the DOM, and then pass the form definition as a JSON object that's used to build up forms when they're needed. This is tempting, but it's much more complex than defining the forms in HTML and hiding them. Plus it'd mean there's a lot more JavaScript on the client, so it might not save any RAM in the long run.

The issue here is really just that the application grabs 40Mb of RAM when you load it, and there's lots more to add yet so that will increase. I'm not really too sure if that's a particularly bad amount. Some sites I use that feature Java and Flash hog over 100Mb.

There's also the fact that the HTML for the site is ~2000 lines long ... but that's inevitable if I use lots of divs.

Posted: Fri Nov 03, 2006 2:54 pm
by nickvd
If you're using that many forms, the bandwidth cost would very minimal compared to the page-load time, not to mention the potential for memory leaks caused by mucking with the forms via javascript.

I would probably have a single javascript file with the "templates" for the various forms each as it's own object (or a single hash of many).

I pimp it a lot, but for good reason. jQuery allows you EXTREME ease of dom creation (using a plugin that weighs in at a paltry 1.56kb uncompressed). --> http://mg.to/2006/02/27/easy-dom-creati ... -prototype

Example:

Code: Select all

var form1 =
$.FORM({ Class:"myForm", action:"process.php",method:"post" },
   $.INPUT({type:"text", value:"mooo"}),
   $.INPUT({type:"text", value:"UserName"}),
   $.INPUT({type:"password", value:"Password"}),
   $.INPUT({type:"text", value:"Flummoxed"}),
   $.INPUT({type:"submit", value:"Submit it MANG!"})
);
You would just use the following to add it to the page:

Code: Select all

$('#id_of_form_container').append(form1);
I haven't tested it, so it may not work as I have typed it, but it does outline an option...

Posted: Fri Nov 03, 2006 3:16 pm
by onion2k
Interesting, I'll look into that.

Posted: Fri Nov 03, 2006 4:24 pm
by Maugrim_The_Reaper
I'd be on the same page as nickvd.

If there are that many forms being used, then adding them all to the HTML seems like a lot of repetitive detail. I'd end up using some form builder library (jQuery works for me) and a set of small form definitions the builder could use to build the form using DOM before adding to a DIV.

Loading these forms from the server would seem to defeat one of the benefits of AJAX - pushing such relatively simple (depending on your view) work to the client rather than expending server resources for an extra (50 * No. of Visitors) requests...

Posted: Fri Nov 03, 2006 4:44 pm
by nickvd
Maugrim_The_Reaper wrote:Loading these forms from the server would seem to defeat one of the benefits of AJAX - pushing such relatively simple (depending on your view) work to the client rather than expending server resources for an extra (50 * No. of Visitors) requests...
If all that gets loaded from the server during the Ajax request is the currently needed form it shouldn't be all that bad.

Granted, if you hit the server for ALL 50 forms on page load (with each loading via it's own Ajax call), it would be a gigantic hit on the server and obviously not recommended...