jQuery SuperLoad

An important part of working with jQuery is to create plugins to simplify repetitive tasks. I write jQuery plugins all the time for internal consumption of my applications.

Most of them are not of enough general purpose to be shared publicly. Recently I created one that could stand on its own and I chose to make it available if anyone is interested.

Multiple Element Ajax Updates

jQuery SuperLoad came out of the necessity to update more than one element in a page without needing to do everything with JavaScript (and you know I'm not the one that avoids JavaScript).

All of the page elements I needed to update with Ajax came from page segments (partials, user controls, etc) that I had available on my server side. It seemed appropriate to go back to the server to get updated versions of that same HTML. But I didn't want to issue a separate $.ajax() or $(elem).load for each one of them.

Using SuperLoad I can now return something like the following from my server application and have more than one element updated.

<div class="ajax-content">
	<div title="!appendTo #content .shoppingList">
		<li>
			<img src="/images/prod12345.png" class="product-image">
			<div class="prodSummary">
				<div class="prodTitle">ACME Product</div>
				<div class="prodPrice">$12.34</div>
			</div>
		</li>
	</div>
	<div title="!update #orderTotal">
		Total: <span class="totalPrice">$47.22</span>
		<div class="specialOffer">Eligible for free shipping!</div>
	</div>
	<script>
		$('#orderTotal specialOffer').effect('highlight');
	</script>
</div>

All that is needed for this to be correctly applied to the right elements (selected by "#content .shoppingList" and "#orderTotal" is a line of code similar to this example.

$.superLoad({ 
	url: '/shopping/addItem', 
	type: 'POST', 
	data: {product: 12345} 
});

Check the plugin source code comments or the github repository page for more details.


Posted 08-21-2009 6:59 PM by sergiopereira
Filed under: ,

[Advertisement]

Comments

DotNetShoutout wrote jQuery SuperLoad - Sergio Pereira - Devlicio.us
on 08-21-2009 9:07 PM

Thank you for submitting this cool story - Trackback from DotNetShoutout

DotNetKicks.com wrote jQuery SuperLoad
on 08-21-2009 9:28 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Steve Evans wrote re: jQuery SuperLoad
on 08-22-2009 5:39 AM

Looks pretty cool.  That actually makes a lot more sense than coming up with some complicated JSON object in one request that's rebuilt on the client.

Jesus DeLaTorre wrote re: jQuery SuperLoad
on 08-23-2009 3:50 AM

Very nice. I had question about the Update and replaceWith functions. What is the difference?

Jesus DeLaTorre wrote re: jQuery SuperLoad
on 08-23-2009 3:51 AM

Whats the difference between update and replaceWith?

chris martin wrote re: jQuery SuperLoad
on 08-23-2009 8:04 AM

I love people writing code and all... but, ick!

You're asking people to mix in hard-coded view (html) knowledge into their service/business layer just so you don't have to write more than one .ajax() call?

Honestly, it's pretty cool but should never been released into the wild.

sergiopereira wrote re: jQuery SuperLoad
on 08-23-2009 8:54 AM

@Jesus Update will replace the innerHTML and replaceWith will replace the entire element (it's jQuery's replaceWith command, you can look it up in jQuery docs)

sergiopereira wrote re: jQuery SuperLoad
on 08-23-2009 8:59 AM

@chris, if you view your web application as a service layer, then yes, this would be ugly. I'd hardly call my web application a business layer.

In my case, and pretty much all apps I have, the web server code is not a JSON-server or a pure REST API, for example. It's perfectly fine for that same application that returns the HTML pages ("hard-coded view knowlege", as you put) to also return this type of combined response.

wildchild wrote re: jQuery SuperLoad
on 08-24-2009 1:12 PM

Nice. Why not use html 5 data-* attributes instead of invalid title? Just like this:

<div data-append-to="#content .shoppingList">...</div>

sergiopereira wrote re: jQuery SuperLoad
on 08-24-2009 2:02 PM

@wildchild  I haven't used those yet but would they cause HTML-4 (or XHTML) pages to become invalid or needing a custom DTD (or schema) ?

I guess I may need to study them a little closer. Thanks for the suggestion.

Carl Furrow wrote re: jQuery SuperLoad
on 08-24-2009 4:26 PM

Now *that* is just plain sexy.

wildchild wrote re: jQuery SuperLoad
on 08-25-2009 12:53 AM

@sergiopereira unfortunately data-* attributes valid only for html5.

www.javascriptkit.com/.../customattributes.shtml

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)