Queuing ajax requests with MooTools 1.2

UPDATE: This is useless. Please see this comment.

There have been a variety of occasions where I only want one instance of the Request object, but want to make sure that every request I attempt gets run without canceling another, or screwing around with onCompletes.  The following is a rather simple implement that takes care of this problem:

code!

Request.implement({
    queue: function(sendArg){
        if(!$defined(this.queued))
            this.queued = [];
        this.queued.push(sendArg);
        this.processQueue();
    },
    processQueue: function(){
		if(this.timer)
			$clear(this.timer);
		if (!this.check())
			this.timer = this.processQueue.delay(250, this);
		else {
			if ($defined(this.queued[0])) {
				this.send(this.queued.shift());
				this.processQueue();
			}
			else
				this.fireEvent('onQueueEmpty');
		}
    }
});

This will basically stack requests and send them in the order received. If there is no stack, the request will be sent immediately.

The usage is the same as the normal Request send method, however there is now an onQueueEmpty event to tell when all requests in the queue have been sent.

example

download w/the example

addthis
  1. keif's gravatar

    Very, very useful, I was working on something similar.

  2. atom's gravatar

    @keif: i agree =)

    I am pretty surprised that something like this hasn’t made its way into the core yet.

  3. adamnfish's gravatar
    adamnfish Says:

    The request class in mootools 1.2 already includes chaining!

    The check method allows you to queue, cancel or ignore requests while there is already a request running (identical to the Fx classes) depending on the option you provide. (look at the source!)

    So to do this, you don’t need to add any code (ie @atom, it is already in the core…)

    Simply provide {link: ‘ignore’ | ‘chain’ | ‘cancel’} as required. The default is ignore, so you won’t have seen it and I’ve no doubt it’s not documented yet…
    *rolls eyes

    Honestly, since the forums were shut this sort of thing seems to be happening a lot.

    To implement ‘onChainComplete’ (like you did for the queue), just add an event to onSuccess that checks the length of the chain ;)

    ps. I *Adore* your design…

  4. atom's gravatar

    @adamnfish you are absolutely correct =)

    My implement is indeed useless. It is not in the documentation, but setting ‘link’:'chain’ does work to chain/queue requests.

    After testing I think I have either discovered a MooTools bug, or a Firebug bug, or some other manner of oddity. When using ‘link’:'chain’, I am not seeing a response logged in Firebug, however the response does exist, as I can still use it when passing to the onSuccess function.

    So, uh, someone look into that or something.

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

Sortable Slideable Saveable - a Mootools 1.2 class

Sortable Slideable Saveable (sss) is a class I wrote up that allows you to have a list of elements that can be sorted, toggled, and the state of each will be saved each time a change is made, either using a cookie or a couple of ajax / json calls.

It can be seen in action in my sidebar to the right. You can drag / sort them by dragging the icons, and you can toggle them by clicking on the title of each. Any changes you make will be stored in a cookie, you can reload the page and they should be in the state you left them in.

I will probably update this and provide some detailed documentation shortly. If anyone has any questions, let me know. Also if anyone has any input on how to make it better, let me know.

another example

download w/the example

addthis
  1. keif's gravatar

    Your side bar isn’t working for me (OS X, FF3.0.1) but your other example works flawlessly.

    Very cool script, and I love that it’s default state works with JS off.

  2. atom's gravatar

    hmm, i guess someone is going to have to let me borrow a mac :p

  3. links for 2008-07-30 | iKeif - mootools, jquery, social media and a ton of links's gravatar

    [...] Guide to Earning Six Figures: Changing Your Mind 13 hours agoInformation about going free lance.trickeries! » Blog Archive » Sortable Slideable Saveable - a Mootools 1.2 class 14 hours agoVery cool mootools 1.2 class for slideable sortables that are savable via cookies!The [...]

  4. keif's gravatar

    WEEELLL I could play around with it a bit and see if I can figure it out (or if it’s just FF# acting buggy).

  5. atom's gravatar

    It is a little odd that there is a difference in FF between systems, I would like to assume the engines in use would be exactly the same, however I have already seen stupid differences in the rendering of styles between the two. My assumption is that it is just a goofy issue with CSS.

  6. Tyler's gravatar

    brilliantly executed, as usual.

  7. atom's gravatar

    ^ _ ^

  8. electronbender's gravatar
    electronbender Says:

    Chief,
    Can you add a nested ability to this thing? That would realyyyyy be nice…

  9. Rob C's gravatar

    Hi,

    The ’savable’ side of things doesn’t seem to work on your example (the one linked here, and the one downloaded).

    I can see the PHP code at the top, but how does one implement the save?

    Thanks!

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

dancing kirby javascript bookmarklet

I made this because i figured it was just what everyone needed (because everyone is grumpy all the time).  It is a simple javascript function you can store in a bookmark that will add a sweet dancing kirby to any page you are on.

(>^ - ^)> fire him up <(^ - ^<)

addthis

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.

mootools rainbow toy: the trickeries! technicolor dream machine

the treickeries! technicolor dream machine

I got a little bored this weekend, and decided to make myself a toy to play with rainbows, and give it a stupid name.

There is actually some pretty cool stuff going on, it is written in javascript(w/some sweet sweet mootools), and a little bit of php for automagic.

I wrote a class to make the rainbow, and one for the sliders you see. If you think either would be useful, they are included in the head.

addthis

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.