ajax

Passing variable as key in jQuery ajax

I wanted to pass a simple key/value string to an Ajax request, but you cannot simply use the variable as the key in the data:

var $fieldname  = 'company_name';
var $value      = 'Tate-Davies Inc.';
var $promise = $.ajax({
    'url'       : '/some/action',
    'dataType'  : 'json',
    'data'      : {
                  $fieldname : $value
                  }
    )};

The above just will not work, and the $_GET will contain:

'fieldname'    => 'Tate-Davies Inc.'

What I actually want is:

'company_name' => 'Tate-Davies Inc.'

So, in order to fix this:

var $data      = JSON.parse('{"' + $fieldname + '":"' + $value + '"}');

And pass that instead:

var $promise = $.ajax({
    'url'       : '/some/action',
    'dataType'  : 'json',
    'data'      : $data 
    )};

Ajax Loading GIF

So you want a little funky AJAX loader?

Add this to your JS main core file…:

$(document).ready(function() {
    //initiate an ajax start message
    $(document).ajaxStart(function() {
       //show the message
       $('#ajax_loading_indicator').show();
    });
    //when ajax is completed
    $(document).ajaxStop(function() {
       //hide the message
       $('#ajax_loading_indicator').hide();
    });
});

And create a nice little div somewhere:

<div id="ajax_loading_indicator">
    <img src="/public/images/ajax_loading.gif" alt="Loading" />
    PLEASE WAIT
</div>

I use the following CSS to style mine, so its unobtrusive but visible:

#ajax_loading_indicator {
    position: fixed;
    right: 2px;
    top: 2px;
    background-color: #efec9f;
    border: 1pt orange solid;
    padding: 5px 30px 5px 30px;
    display: none;
}

TIP: If you can’t be bothered to find an AJAX loading GIF, then there is a great little website that will create you one for free. Its, www.ajaxload.info

Easy!

You do need to have jQuery (version 1.0+) for this, in case you didn’t work that out… www.jquery.com

 

 

$.ajaxStart() not firing

If you use the above to show a nice loading message when an AJAX call is performed, you may have come across the problem that a JSONP request means the call is not called. This is due to the fact the ajaxStart() function is triggered by a internal XMLHttpRequest and the JSONP request uses a script tag instead (for XSS safety)

There is a way round this though. Use the $.ajaxSetup() function:

$(document).ready(function() {
    $.ajaxSetup({
        'beforeSend' : function() {
            $('pleasewaitelement').show();
        },
    'complete'   : function() {
            $('pleasewaitelement').hide();
        }
    });
});

This is a default for $.ajax() calls, and unless your AJAX call specifies a beforeSend or complete function, then the defaults above will show. If you did have to use a different beforeSend or complete callback, then just add in the relevant code for the hiding/showing.

Easy.

$.ajaxStart() not firing

If you use the above to show a nice loading message when an AJAX call is performed, you may have come across the problem that a JSONP request means the call is not called. This is due to the fact the ajaxStart() function is triggered by a internal XMLHttpRequest and the JSONP request uses a script tag instead (for XSS safety)

There is a way round this though. Use the $.ajaxSetup() function:

$(document).ready(function() {
    $.ajaxSetup({
        'beforeSend' : function() {
            $('pleasewaitelement').show();
        },
    'complete'   : function() {
            $('pleasewaitelement').hide();
        }
    });
});

This is a default for $.ajax() calls, and unless your AJAX call specifies a beforeSend or complete function, then the defaults above will show. If you did have to use a different beforeSend or complete callback, then just add in the relevant code for the hiding/showing.

Easy.