Archive for the ‘Ajax’ Category

New Plugin: Request.Queue

December 1st, 2008 by Aaron N.

The MooTools Request class gives us the option to link together requests so that with a single instance of the class, if you’ve got a request that’s running you can ’stack up’ any new send requests so that they occur one after the other.

This is convenient, but what if you have numerous instances of Request or its subclasses (like Request.HTML) and you want to only have one request running at a time? Or only two?

That’s basically all that Request.Queue does. It lets you register any number of instances of Request or its subclasses with an instance of Request.Queue and then write your code like normal. All requests to server will be queued up and fired off one or two or three at a time (you choose).

I put this class together partially a while back but never really polished it up for release. I spent some time over the holiday break to write up the docs and get it ready for release after I saw this thread in the MooTools Users Group.

Here’s a quick example of what it looks like:

  var num1 = new Request({ url: '/wiki/simple.php', data: {num: 1, sleep: 1}, method: 'get',
      onComplete: function(response){ console.log(response) } });
  var num2 = new Request({ url: '/wiki/simple.php', data: {num: 2, sleep: 1}, method: 'get',
      onComplete: function(response){ console.log(response) } });
  var num3 = new Request({ url: '/wiki/simple.php', data: {num: 3, sleep: 1}, method: 'get',
      onComplete: function(response){ console.log(response) } });
  var myQueue = new Request.Queue();
  //you can add them one at a time
  myQueue.addRequest('num1', num1);
  //or in a single call
  myQueue.addRequests({ num2: num2, num3: num3 });
  num1.send();
  num2.send();
  num3.send();

The above example will only allow the instances of Request to run one at a time. Each one will run and when it gets a response the next item will then be sent. It integrates right into the Request (or Request.HTML or Request.JSON) class when you register it so you don’t have to really change anything.

Note that you can specify how many requests can run at a time. There are also numerous methods and options that you can use to configure things and use the class in numerous ways. I suggest you peruse the docs for all those details.

As always, you can download this from my download builder.

Preventing Ajax Request Caching in MooTools – introducing Request.NoCache

November 20th, 2008 by Aaron N.

Ajax requests are, generally speaking, used to update the document or meant to send and fetch new data to and from the server. In Ajax heavy apps, you might end up sending the same request on numerous occasions and not always expect the server to respond with the same results.

This can cause problems with caching. Internet Explorer in particular will see an ajax request with the same parameters and just return the results it got last time, which, well, sucks.

I have this trick that I’ve been using for a while now and I figured I’d release it. The solution is to include a value in your request that’s always different. My solution has been to add a “noCache” value set to the current time. So long as I’m not sending the same request more than once in a millisecond, this solves my problems.

Hot on the heals of yesterday’s plugin (Class.refactor), I’m releasing this tweak on the Request classes that introduces the ‘noCache’ option that will automate this for you. Simply set the ‘noCache’ option to true and you’re all set.

new Request({
    url: '/foo.php',
    data: {...some data...},
    noCache: true
}).send()

Don’t want to set it every time? No problem, just switch the default for the option to true with Class.refactor:

(function(){ //let's not pollute the global namespace
    var setNoCache = function(cls) {
        return Class.refactor(cls, options: {
            noCache: true
        });
    };
    Request = setNoCache(Request);
    Request.HTML = setNoCache(Request.HTML);
})();
//all future instances of Request and Request.HTML
//default to using the noCache functionalty

Man. I’m on a roll this week. You can download this script on the download page and view the docs.

CiUI Dev on Google Code

April 4th, 2008 by Vladimir Olexa

I’ve created a new development repository on Google Code. I wanted to have a separate development environment for people to work on the library without having to work off of the entire CNET Javascript framework repository. I’ll be posting CiUI-only releases there before merging them with Clientside’s repository.
You can also file CiUI specific bugs and feature requests on there. If you’re interested in joining in the development, please come discuss your ideas to our Google group.

CiUI Dev Google Code repository:
http://code.google.com/p/ciui-dev

CiUI Group
http://groups.google.com/group/ciui

Mootools 1.0 goes gold, CNET Libraries WikiTorial

January 30th, 2007 by Aaron N.

Mootools 1.0 is out. Fancy new site design and docs.

We’ve already refactored all our code for 1.0, though it is not yet released to the CNET site. We’re entering into QA now…

I’ve also released the second part of my wiki tutorial series, this time giving working examples of all the CNET common code. The CNET Libraries are comprised of common code (widgets, shortcuts, etc.) and implementation code – code that is specific to a given page or application. The implementation code is usually just implementing and executing functions and libraries in the common portion of the library. The wikitorial for the CNET common code focuses on this generic content. Form validation, date pickers, carousels, etc. Dig in! Oh, and if you have a chance, Digg the tutorials, too. You’ll find shortcuts to do that in the right navigation column in the tutorials.

Mootools Primer, CNET Libraries online

November 22nd, 2006 by Aaron N.

Hi gang,

I’ve been at work on a mootools primer as a tutorial for those who want to use the library but don’t know a lot about javascript. It’s replete with working code examples that you can execute right in the browser and see the result. Read the rest of this entry »

Google’s Web Toolkit now available for Mac OS X

November 20th, 2006 by markbult

Google has released its Google Web Toolkit (GWT) for the Mac. Version 1.2 now works on OS X as well as Linux and Windows.

I haven’t used it yet, so I can’t really attest to its capabilities. Basically, though, it allows you to write and debug AJAX web apps in Java and compile them to browser-compliant JavaScript and HTML.

As they phrase it on their site, GWT “makes writing AJAX applications like Google Maps and Gmail easy for developers who don’t speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript’s lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.”

There’s also a Google Web Toolkit blog where you can follow the Toolkit’s development progress.

PS> This is my first post to Clientside since it went public to the world, so I thought that I should, like Aaron, also throw out a “hello world.”

I’m Mark Bult, an Art Director at CNET Networks, currently working on redesigns of Webshots.com, UrbanBaby.com, and Consumating.com, three of CNET’s community and lifestyle properties.

I also blog about Mac and graphic design stuff (and personal stuff, so you’ve been warned that a lot of it’s boring) at enews.org.

Back Button Support: Safari and Speed

November 16th, 2006 by Aaron N.

via Ajaxian:

Daniel Kantor has implemented a Back button solution in Streampad and has shared it with us.

One of the main gripes against AJAX webapps is how they break the back button in a typical browser. There have been a few solutions (notably Brad Neuberg’s Really Simple History) but none have got it working in Safari. GMail still does not have a working back button in Safari.

They say the third time is the charm and I have tried to get a Back button thing in Streampad twice before. I do not want to use someone else’s library as they are usually more complex than I need and I did not want to put something in place until I had Safari working. I tried a few different techniques, but when I got it working in Safari, it would break in Firefox or IE.

I finally figured out a way to get this working in Firefox, IE and Safari.

While Daniel struggled with this, he found that the back button support caused a slow down in the entire app performance. He came up with a new solution that didn’t suffer from the performance issues:

The general concept is this: You load a page into an iframe that calls parent.goBack() and then changes its own location to a new page (a blank page will do). Because the page jumps to a new location, it now has a history. If you click the back button, it will load the page again (calling parent.goBack()) and then spring forward to the dummy blank page.

var historyArray = Array(); // create an empty array to hold the history
var historyCounter = -1; // initialize the array pointer to -1

function historyAdd(f){
  if (historyCounter == -1){  // the first time this is called it will change the iframe location
  document.getElementById(’hFrame’).src = “/historySpring.php”;
}

var o = historyArray[historyCounter];
if (f != o){ // don’t put in consecutive duplicates
  historyCounter++
  historyArray[historyCounter] = f; // add function to history
}

function goBack() {
  if (historyCounter> 0){ // don’t want to call it if there is nothing in history array
    historyCounter– // set the pointer back one
    var f = historyArray[historyCounter]; // get the function from the history array
    f = f+”()”;
    eval(f); // call the function
  }
}

Mootools Ajax extension for handling errors on CNET

September 27th, 2006 by Aaron N.

CNET always returns response code 200 for it’s pages, even when they are errors. This presents a problem for any ajax framework you might be using as your ajaxer will always think the page is returning 200, even if it’s not.

I wrote a quick extention for the Mootools framework as part of my forthcoming release of the CNET framework that handles this problem for you and adds some functionality to Mootools ajax class.

Ajax.implement({
	responseIsSuccess: function(){
		if(this.transport.status != undefined && (this.transport.status < 200 || this.transport.status >= 200)){
			return false;
		}
    if(this.transport.responseText.indexOf("COMPONENT_RESPONSE_CODE=200") > 0)
        return true;
    return false
	},
	responseIsFailure: function(){
    return !this.responseIsSuccess();
	},
	onStateChange: function(){
		if (this.transport.readyState == 4 && this.responseIsSuccess()){
			if (this.options.update) $(this.options.update).setHTML(this.transport.responseText);
			this.options.onComplete.pass([this.transport.responseText, this.transport.responseXML], this).delay(20);
			if (this.options.evalScripts) this.evalScripts.delay(30, this);
			this.transport.onreadystatechange = Class.empty;
			this.callChain();
		} else if(this.responseIsFailure()) {
			if($type(this.options.onFailure)=='function') this.options.onFailure();
		}
	}
});

This hasn’t been QAed yet, so I may need to tweak it.

It adds responseIsSuccess() and responseIsFailure(), and finally it adds as an excepted parameter to be passed in an onFailure function that will execute it if it fails. Example usage:

new ajax(url, {update: divIdToUpdate, method: 'get', parameters: ..., evalScripts:true, onFailure:errorHandlerFunction});

This will be available on every page on Redball when the new framework launches.

Mootools

September 19th, 2006 by Aaron N.

Well crap. 1) I love the mad4milk guys (makers of moo.fx, moo.ajax, moo.dom, prototype.lite). 2) their new framework looks AWESOME. 3) as always, their libraries are SUPER TINY.

But damn, now I have to learn something new, and maybe rewrite a bunch of crap. This is the problem with javascript. Still, when Prototype + Scriptaculous is 100K, you gotta admire their ability to crank something out in under 20K that will get you nearly the same thing.

The Mad4Milk team (the minds that brought the world moo.fx) have unleashed a brand new, very impressive Javascript library out onto the web – MooTools.

mootools is a very compact, modular, Object-Oriented javascript framework. Its unique design makes it extremely crossbrowser, easy to use, and a snap to extend with your own code. It comes with a choice of more than fifteen scripts, plugins and addons, including Effects (moo.fx) Ajax (moo.ajax), Dom Navigator (moo.dom), Drag and Drop, Sortable lists, cookies Manager and many more.

There aren’t any demos of the functionality quite yet (as of the date of this post), but you can download the first release of thise powerful little tool.

You can also check out what Jonathan Snook has to say about it, having already downloaded and worked with it a bit. He’s also created a simple tutorial on using the new library to create a drag-and-drop example.

Surveying open-source AJAX toolkits

August 2nd, 2006 by Aaron N.

One of the aspects of having a lot of action going on around a development space that’s rather new is that you get a lot of people solving problems just like the ones you’re having. These people release their work and you can make use of them if you like.

So you go download a few, pick the one that looks best and get started working. Meanwhile ten more solutions hit the market and you’ve already commited yourself. Stopping what you’re doing and going back has that oh-so-familiar pitfal that we’ve all experienced: you either waste a lot of time reading up and trying out those ten new things or, almost worse, discover that someone has a better solution than the one you’re half way through implementing.

I saw this post below on Ajaxian today and figured I’d read it because I’d been curious about Rico and Dojo in particular but hadn’t gotten around to trying them out. Dojo is friggin awesome. From a tech prod perspective, I think it’s the slickest thing I’ve seen yet. Implementing the various aspects of the Dojo platform seems super-duper easy, almost to the point that you don’t need to know a lot of javascript. So now I gotta go download, install, and fiddle with it for a few weeks and then probably rewrite some of my existing work. Sheesh.
In the article linked to below, you’ll find screencasts for each of the six frameworks. They aren’t terribly detailed, but the give you a decent idea of what it’s like to actually use the libraries. Read the rest of this entry »