It is currently Thu Mar 28, 2024 3:09 pm

All times are UTC




Post new topic Reply to topic  [ 3 posts ] 
Author Message
 Post Post subject: Using jQuery's when() with multiple deferred objects
 
Offline
Godlike Poster
Godlike Poster
Years of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membership
User avatar

Joined: Sun Oct 16, 2005 9:42 am
Posts: 8798
Karma: 17

Location: Imagine in your mind a posh country club
Steam Login Name: azcn2503
AKA: Loading Mustache templates correctly with a JSON data feed (or two)

Hi all

In an attempt to bring back a little forum traffic, I thought I'd post about a useful jQuery tip I discovered myself today.

I've been tasked by my employer to create a system that allows them to generate proposal documents (quotations) using a web application. It needs to be fast and smart, and it needs to save them a lot of time. The idea is that they can generate a basic proposal with all the information they need in about 5 minutes or less, as opposed to the current manual method which takes upward of an hour.

It looks a little like this:

Image

It doesn't look too impressive right now. But the way that data is brought to the browser is awesome.

I am loading data from 3 sources, asynchronously, waiting for their response, and then mashing them all together and creating a form with a bunch of tables.

I am loading: a Mustache template (using jQuery-Mustache), a JSON file detailing the row titles and some of their attributes, and a JSON file detailing the rates to use for that template (designer rate, contractor rate, hourly rate, etc. as these are different for each type of proposal).

The great thing about Mustache is that it separates the data from the structure.

The code I used was as follows:

Code:
$.ajaxSetup({ cache: false });
$.when(
   $.Mustache.load('./templates/proposals-hard-goods.php').done( function(){ return true; }),
   $.ajax({ url: './templates/proposals-hard-goods.json', success: function(){ return true; }}),
   $.ajax({ url: './rates/hard-goods.json', success: function(){ return true; }})
).then( function(templates, rows, rates){
   var templates = templates[0];
   var rows = rows[0];
   var rates = rates[0];
   // My other code
});


It's important that each function returns true, and not false, or any other value (like returning the data for example, which might seem sensible). Note how I made this work for the jQuery Mustache - Mustache has a method called done() which is very similar in functionality to the ajax success() callback function.

Once my script adds the Mustache converted template including the form to the document, I attach a submit event to it like so:

Code:
var $target = $('#target'); // Example
$target.find('form').submit( function(){
   // Some code here
   return false;
});


Here you can see my template, rows, and rates side by side:

Image

It feels amazingly fast and responsive and it helps to keep my code very tidy, and much easier to update!

_________________
Follow your heart and live the dream <3


Last edited by azcn2503 on Thu Mar 21, 2013 7:18 pm, edited 1 time in total.

Wed Mar 20, 2013 12:57 pm 
 Profile E-mail  
 
 Post Post subject: Re: Using jQuery's when() with multiple deferred objects
 
Offline
Top Gun (Admin)
Top Gun (Admin)
Years of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membership
User avatar

Joined: Mon Sep 12, 2005 1:37 pm
Posts: 5855
Karma: 38

Location: Looking for the droid you're looking for.
Steam Login Name: simonpcook
Who are you and what have you done with Aaron. Everybody knows Aaron HATES jQuery.

_________________



Wed Mar 20, 2013 12:59 pm 
 Profile E-mail  
 
 Post Post subject: Re: Using jQuery's when() with multiple deferred objects
 
Offline
Godlike Poster
Godlike Poster
Years of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membership
User avatar

Joined: Sun Oct 16, 2005 9:42 am
Posts: 8798
Karma: 17

Location: Imagine in your mind a posh country club
Steam Login Name: azcn2503
grab() is dead, long live $()!

Update: And Windows 8 can still DIAF

_________________
Follow your heart and live the dream <3


Wed Mar 20, 2013 2:48 pm 
 Profile E-mail  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Karma functions powered by Karma MOD © 2007, 2009 m157y