Skip to content


Subversion checkout URL

You can clone with
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

264 lines (237 sloc) 8.57 kb
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>AjaxQ jQuery Plugin</title>
<meta name="description" content="AjaxQ jQuery Plugin - a tiny, simple jQuery plugin for sequential ajax requests.">
<meta name="author" content="Foliotek, Inc.">
<link href="demo/bootstrap.css" rel="stylesheet">
body {
padding: 0;
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
.container {
border: solid 3px #ccc;
padding: 15px 20px;
padding-bottom: 50px;
-moz-box-shadow: 0 10px 20px #aaaaaa;
-webkit-box-shadow: 0 10px 20px #aaaaaa;
box-shadow: 0 10px 20px #aaaaaa;
body.noscript .scriptload {
display: none;
h1 {
font-size: 50px;
line-height: 70px;
h2 {
margin: 20px 0;
margin-top: 40px;
color: #131;
border: solid 1px;
border-left: none;
padding: 3px;
letter-spacing: .1em;
p, li {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, Georgia, serif;
font-size: 14px;
line-height: 1.8;
.container > h3 {
margin: 10px;
color: #282;
.container > pre {
margin-left: 30px;
margin-bottom: 20px;
.queue {
text-align: center;
background: #fafafa;
.queue h3 {
text-decoration: underline;
.queue .buttons {
border: solid 2px #ddd;
padding: 10px;
border-radius: 10px;
.node {
height: 40px;
opacity: .3;
width: 80%;
border-radius: 5px;
margin: 3px auto;
text-align: center;
.node strong {
.node b {
.node i {
.node.beforesend b {
color: yellow;
.node.complete b {
color: green;
.node.error.complete b {
color: red;
.node.beforesend {
opacity: .6;
.node.complete {
opacity: 1;
#q1-container .node.error, #q2-container .node.error {
background: #f99;
#q1-container .node {
background: #9fd;
#q2-container .node {
background: #99d;
.btn-large {
font-size: 20px;
font-weight: normal;
padding: 14px 24px;
margin-right: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
.center {
margin: 20px 10px;
text-align: center;
background: #465F46;
border: solid 1px;
border-radius: 5px;
padding: 20px 10px;
<body class='noscript'>
<div class="container">
<h1>AjaxQ jQuery Plugin</h1>
A tiny, simple jQuery plugin for <strong>sequential ajax requests</strong>.
<li><strong>Tiny</strong>. AjaxQ weighs in at <code>465 bytes</code> minified and gzipped.</li>
<li><strong>Simple</strong>. Less code means that less can go wrong. <a href=''>Take a look</a> at the JavaScript.</li>
<li><strong>Consistent</strong>. AjaxQ returns a <code>promise</code> that matches the return type of the <a href=''>$.ajax</a> API.</li>
<p class='center'>
<a class='btn btn-large' href=''>View Project On Github</a>
<a class='btn btn-large' href=''>Just the JavaScript, Please</a>
<p>Using AjaxQ is easy. Add the plugin into your project, then instead of calling <code>$.ajax(opts);</code> call <code>$.ajaxq(name, opts);</code></p>
Any requests added with the same queue name will be processed <strong>sequentially</strong>.
It is possible to have more than one queue running in <strong>parallel</strong> by using different queue names.
See the <a href='#demo'>demo</a> below to see two queues running together at the same time.
// See full <a href=''>$.ajax documentation</a>. The only difference is the first parameter (the queue name).
$.ajaxq ("MyQueue", {
url: '',
type: 'post',
dataType: "jsonp"
// See full <a href=''>$.post documentation</a> documentation.
$.postq ("MyQueue", 'path/to/your/resource', onsuccess);
// See full <a href=''>$.get documentation</a> documentation.
$.getq ("MyQueue", 'path/to/another/resource', onsuccess);
// Returns <strong>boolean</strong> representing whether there are any requests running (in any queue).
$.getq ("MyQueue", 'path/to/another/resource', onsuccess);
$.ajaxq.isRunning(); // Will return <strong>true</strong> since request just started.
function onsuccess() {
$.ajaxq.isRunning(); // Will return <strong>false</strong> since request is finished.
<h2><a name='demo'></a>Demo</h2>
<p>Click the buttons below to add requests onto two separate queues. Requests for this demo are generated using the <a href=''>jsFiddle echo API</a>.</p>
<hr />
<div class='scriptload'>
<div class="row">
<div class="span6 queue">
<h3>Queue #1</h3>
<p> </p>
<p class='buttons'>
<button class='btn q1' data-delay='1'>Add 1 Second Request</button>
<button class='btn q1' data-delay='3'>3 Seconds</button>
<button class='btn q1' data-delay='8'>8 Seconds</button>
<button class='btn btn-danger q1' data-delay='1'>Error</button>
<div id='q1-container'>
<div class="span6 queue">
<h3>Queue #2</h3>
<p class='buttons'>
<button class='btn q2' data-delay='1'>Add 1 Second Request</button>
<button class='btn q2' data-delay='3'>3 Seconds</button>
<button class='btn q2' data-delay='8'>8 Seconds</button>
<button class='btn btn-danger q2' data-delay='1'>Error</button>
<div id='q2-container'>
<hr />
<div class='row'>
<div class='span12'>
<button class='btn' id='isQueueRunning'>Are Any Requests Running?</button>
<strong id='isQueueRunningLabel'></strong>
AjaxQ was developed by <a href=''>Foliotek, Inc.</a> for use in <a href=''>Foliotek Presentation</a>.
It is licensed under the MIT License. See the <a href=''>LICENSE</a> file.
You can find some more of our code and projects on our <a href=''>development blog</a>.
<script src='demo/jquery-1.7.1.js'></script>
<script src='ajaxq.js'></script>
<script src='demo/demo.js'></script>
Jump to Line
Something went wrong with that request. Please try again.