Create AJAX queue with jquery

1. Create a global variable for your ajax request

var ajax_request = null;

2. Disable client side caching 

 $.ajaxSetup ({ 
         cache: false 
    }); 

3. Before you start the ajax call, create an if statement that will abort any existing requests

   if (ajax_request) { // checks for an existing ajax request
        ajax_request.abort(); // aborts request
    }

 4. Finally set global variable to ajax request

    ajax_request = $.ajax({
     url: "some/service.cfm",
     type: "POST",
     data: { var1: someval1,
                var2: someval2},
     success: function(data) {
            alert("success");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) { // execute this if it all goes boom
            alert(textStatus + errorThrown);
            return false;
            }
    });  

Posting Code Blocks

If you are going post code blocks don't forget to encode it using: html encoder . Then surround the code in blocks.

Jquery Ajax Loading Indicator

Here is a bit of code that monitors all ajax calls on your page, and displays an animated gif, when ajax is called.

Animated Loader image.




$("#dhhNavHeader").append('<div id="ajaxBusy"><p><img src="../images/loading.gif"></p></div>');

$('#ajaxBusy').css({
display:"none",
margin:"0px",
paddingLeft:"0px",
paddingRight:"0px",
paddingTop:"0px",
paddingBottom:"0px",
width:"auto"
});

// Ajax activity indicator bound
// to ajax start/stop document events
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});



HTML5 Video on all browsers

There are two ways this can be accomplished.
1) Encode the video in 3 different formats (MP4, OGG and M4V) and use the video tag to accommodate for different browsers:

<video autobuffer controls tabindex="0" width="320">
<!-- if Firefox -->
<source src="digital_nation.ogg" type="video/ogg"></source>
<!-- if Safari/Chrome-->
<source src="digital_nation.mp4" type="video/mp4"></source>
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
<embed allowfullscreen="true" allowscriptaccess="always" height="260" src="digital_nation.m4v" type="application/x-shockwave-flash" width="320"></embed>

</video>

This example can be found at www4dev.uwm.edu/sois/test/digital_nation. This can be time consuming because you will have to re-encode the same video three times to make it work.

2) Alternatively, use javascript to convert the MP4 formatted video to Flash if the browser does not support the video tag. An example is the html5media project that is located at Google Code (http://code.google.com/p/html5media/), where you can find the javascript to link to.
Sample Code:

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>
<video src="video.mp4" width="320" height="240" controls autobuffer></video>


htaccess, flash videos, and firefox

The last several days have been torchure. Safari and IE have been displaying my flash videos, and firefox would not, so I spend endless hours searching and testing out different combinations, all to no avail. I finally found an article that shed some light on what I was possibly seeing (article) and decided to contact cfadmins to see if they could help. Kyle finally found the solution, it didn't really have anything to do with the article, it was about a .htaccess file I created to protect the videos for directly downloading them. My .htaccess file looked like this:

RewriteEngine on

RewriteBase /

RewriteCond %{HTTP_REFERER} !tcare

RewriteRule (.*) http://www4.uwm.edu/tcare/training/ [R]

The new one looks like this:

RewriteEngine on

RewriteBase /

RewriteCond %{HTTP_REFERER} (!tcare)

RewriteRule (.*) http://www4.uwm.edu/tcare/training/ [R]

If you can't tell the difference it is !tcare to (!tcare). For some reason firefox didn't like it.

Thanks Kyle for finding the solution.

Test

this is a test