jQuery 1.0.4 Released

December 13, 2006 | Filed Under Blog, Technology 

John Resig over at jQuery has announced the release of jQuery 1.0.4 to the public! As usual, there are bug fixes...plus a bit more. His focus for this patch was adding improvements to jQuery's Ajax functionality. Below is a list of all the updates:

  • Tons of bug fixes (Full List)
  • Extensions to $.ajax(): $.ajax accepts additional options: beforeSend, async and processData; returns XMLHttpRequest to allow manual aborting of requests, see docs for details.

    Example: Add extra headers to an Ajax request using beforeSend

    PLAIN TEXT
    JavaScript:
    1. $.ajax({
    2.   type: "POST",
    3.   url: "/files/add/",
    4.   beforeSend: function(xhr) {
    5.     xhr.setRequestHeader( "Content-type", "text/plain" );
    6.   },
    7.   data: "This is the contents of my text file."
    8. });

    Example: Perform a synchronous Ajax request.

    PLAIN TEXT
    JavaScript:
    1. // Get the HTML of a web page and save it
    2. // to a variable (the browser will freeze until the
    3. // entire request is completed).
    4. var html = $.ajax({
    5.   type: "GET",
    6.   url: "test.html",
    7.   async: false
    8. }).responseText;
    9.  
    10. // Add the HTML into the page
    11. $("#list").html( html );

    Example: Sending a JavaScript object using processData.

    PLAIN TEXT
    JavaScript:
    1. // The data to send to the server
    2. var params = {
    3.   name: "John",
    4.   city: "Boston"
    5. };
    6.  
    7. $.ajax({
    8.   type: "POST",
    9.   url: "/user/add/",
    10.   processData: params
    11. });

    Example: Aborting an Ajax request after a specific delay in time.

    PLAIN TEXT
    JavaScript:
    1. // Perform a simple Ajax request
    2. var req = $.ajax({
    3.   type: "GET",
    4.   url: "/user/list/",
    5.   success: function(data) {
    6.     // Do something with the data...
    7.     // Then remove the request.
    8.     req = null;
    9.   }
    10. });
    11.  
    12. // Wait for 5 seconds
    13. setTimeout(function(){
    14.   // If the request is still running, abort it.
    15.   if ( req ) req.abort();
    16. }, 5000);

  • AJAX module: The public $.ajax API is now used internally (for $.get/$.post etc.); loading scripts works now much more reliably in all browsers (with the exception of Safari, which is a work in progress).
  • New global Ajax handler: ajaxSend - called before an Ajax request is sent.

    Example: Add extra headers to all Ajax requests using the ajaxSend event.

    PLAIN TEXT
    JavaScript:
    1. $(document).ajaxSend(function(xhr){
    2.   xhr.setRequestHeader("X-Web-Request", "MySite.com");
    3. });

  • Extensions to global Ajax handlers: ajaxSend, ajaxSuccess, ajaxError and ajaxComplete get XMLHttpRequest and settings passed as arguments.

    Example: Prevent any POST requests that are sending too much data.

    PLAIN TEXT
    JavaScript:
    1. $(document).ajaxSend(function(xhr,options){
    2.   if ( options.type == "POST" && options.data.length> 1024 )
    3.     xhr.abort();
    4. });

    Example: Show a special message for requests submitted using an Ajax POST.

    PLAIN TEXT
    JavaScript:
    1. $("#dataSent").ajaxSend(function(xhr,options){
    2.   if ( options.type == "POST" )
    3.     $(this).show();
    4. });

  • Extensions to event handling: pageX and pageY are available in all browsers now. (IE does not provide native pageX/Y).

    Example: Have a tooltip follow a user’s mouse around the page.

    PLAIN TEXT
    JavaScript:
    1. $(document).mousemove(function(e){
    2.   $("#mousetip").css({
    3.     top: e.pageY + "px",
    4.     left: e.pageX + "px"
    5.   });
    6. });

  • Improved docs: $(String) method has now two separate descriptions, one for selecting elements, one for creating html on-the-fly.
  • FX module: Most inline styles added by animations are now removed when the animation is complete, eg. height style when animating height (exception: display styles).
Tags: , , , ,

Related Articles:

Discuss This Article

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview:

 (2885) - jquery settimeout (173) - jquery wait (151) - setTimeOut jquery (39) - jquery ajax timeout (32) - jquery synchronous ajax (25) - jquery synchronous (21) - jquery wait function (18) - jquery timeout (12) - jquery follow mouse (11) - wait jquery (11) - jquery (8) - jQuery setRequestHeader (8) - jquery beforeSend (8) - jquery ajax post example (7) - jquery contentType (7) - jquery wait() (7) - jquery synchronous call (6) - jquery set timeout (6) - jquery wait timer (5) - jquery ajax settimeout (5) - ajax setTimeout (4) - jquery ajax synchronous (4) - jquery wait seconds (4) - jquery synchronous request (4) - jquery ajax beforeSend (4) - ajax setTimeout abort (4) - jQuery post example (4) - jquery animate wait (3) - jquery wait for animation (3) - jquery settime (3) - jquery post setRequestHeader (3) - timeout jquery (3) - jquery synchronous get (3) - jQuery.post example (3) - jquery abort ajax request (3) - jquery post async (3) - jquery ajax post (3) - jquery async (3) - setTimeout javascript jquery (3) - jquery settimeout() (3) - jquery $.post (2) - jquery ajax example post (2) - jquery e.pageY (2) - jquery waiting (2) - jquery timeout function (2) - async request jquery (2) - jquery synchrone post (2) - jquery ajax async (2) - ajax synchron (2) - example jquery get (2) - jquery XMLHTTP ajax (2) - jquery, beforeSend: function( (2) - jquery .get example (2) - using settimeout in jquery (2) - $.post() with jquery (2) - ajax synchron jquery (2) - $.get in jquery (2) - jquery set time out (2) - jquery $.post(url (2) - $.get success jquery (2) - jquery synchron (2) - jquery synchronous ajax calls (2) - jquery animation examples (2) - $.get jquery (2) - synchronous jquery (2) - setTimeOut in jquery (2) - jquery get synchronous (2) - ajaxSend jquery (2) - ajax timeout jquery (2) - jquery get request (2) - timeout ajax jquery (2) - setTimeout with jquery (2) - JQuery processData (2) - beforeSend jquery (2) - jquery ajax processData (2) - jquery ajaxSend (2) - jquery $.get synchronous (2) - [object XMLHttpRequest] jquery (2) - jQuery.get examples (2) - jquery ajax abort (2) - jQuery $ajax post example (1) - $.ajax jquery synchronous (1) - ajax jQuery timeout (1) - synchron ajax jquery (1) - jquery extension settimeout (1) - ajax abort (1) - ajax xml jquery timeout (1) - Jquery xmlhttprequest tutorial (1) - jquery ajax request timeout event (1) - ajax jquery setRequestHeader state (1) - handling timeouts for event handlers in jquery (1) - jquery $.post example (1) - jQuery.post setTimeout (1) - jquery set time out combobox (1) - getting headers jquery (1) - jquery $ajax processData (1) - ｊQuery settimeout (1) - jquery .get synchronous request (1) - jquery abort timeout (1) - jquery synchronous gets (1) - jquery beforesend headers (1) - jquery header beforesend (1) - jquery wait function seconds javascript (1) - jQuery.get samples (1) - httpxmlrequest synchronous timeout (1) - jquery $post example -json (1) - get beforesend jquery (1) - ajax synchrone call (1) - jquery post (1) - exemple jquery ajax (1) - jquery get in variable (1) - jquery abort get (1) - ajax jquery beforeSend header (1) - wait for accordeon jquery (1) - simple tooltip setTimeout jquery (1) - jquery page wait (1) - jquery wait some seconds (1) - jquery .get examples (1) - jquery: ajax post (1) - httpRequest synchronic (1) - jquery wait seconds javascript (1) - javascript timeout and jquery (1) - jquery ajaxsend change options (1) - abort in ajax (1) - working jquery post example (1) - ajaxComplete jQuery examples (1) - jquery $.post synchronous (1) - javascript settime jquery (1) - jquery timer example (1) - jquery beforesend function (1) - jquery wait ajax request (1) - jquery ajax setRequestHeader (1) - timeout jquery tutorial (1) - Web request jQuery (1) - jquery > set time out (1) - jquery timer (1) - jquery pageY (1) - synchron javascript (1) - get jquery (1) - jquery post ajax example processData (1) - abort ajax request using jquery (1) - jquery javascript wait (1) - jquery get post example (1) - jquery safari inline (1) - $.post jquery exemple (1) - jquery how to wait function (1) - jquery update settimeout text file (1) - jQuery.post async (1) - jquery syncrone request (1) -