Providing focus to DOM element after AJAX load

Question

I am loading forms via AJAX ... I have what I would have thought to be a winning jQuery statement but it does nothing:

$("#input_form_container").loadActionTemplate()
                          .find ('.form-focus:first').focus();

The loadActionTemplate is a function that I've created to load the form. It does load the form and then returns a reference to "this" so that chaining can continue. The target element is an text input field that looks like this:

<input class="span1 form-focus" id="min-duration" name="min-duration" size="16" type="text">

Note:

• if I go into the debugger AFTER I load run this script (and therefore after the template is loaded) and run "jQuery("#input_form_container").find ('.form-focus:first').focus();" from the debugger it works like a charm by both highlighting the field and returning the DOM reference for future chaining

• if I type:

  jQuery("#input_form_container").loadActionTemplate().find ('.form-focus:first').focus();

  directly into the debugger it reloads the template and returns a reference to the right DOM element but the focus is NOT attained

• In desperation I tried inserting a delay(500) before the focus() call but that shouldn't be necessary and didn't solve the problem anyway.

Any help would be greatly appreciated.

Answer 1

As @Andreas points out AJAX is -- after all -- asynchronous. I had fooled myself into believing that the jQuery chain I had built somehow would fire only on the success() condition of AJAX callback. Why I thought that can only be pointed to lack of sleep, lack of access to high quality caffeine and/or amphetamines. Anyway, in attempt to share the solution, here is my "loadActionTemplate" jQuery extension:

$.fn.extend({
    // loadActionTemplate plugin
    loadActionTemplate: function(options) {
        //default settings
        var defaults = {
            actionDOM : '#do_something_dropdown',
            cache : true
        }
        // store the "this" state for safe keeping
        var domElements = $(this);
        // merge user options into default
        var options = $.extend(defaults, options);
        // assign the "action" to an easily addressible variable
        var action = $(options.actionDOM).val();
        // get the HTML form template for this action
        LG_ServiceCall ( 'get-action-template' , {'action' : action} , function( r ) {
            var res = JSON.parse ( r );
            var template = res.results.template;
            // iterate through all matched DOM instances
            return domElements.each(function() {
                // get handle on DOM object operating on
                var element = $(this);
                element.html( template );
                element.find('.form-focus:first').focus();
            })
        });
        return domElements; // allows the function to operate in a chain
    }
});

Without going into too much painful detail the LG_ServiceCall method takes three parameters:

function LG_ServiceCall( $service , $options , $callback );

The callback function passed into the third parameter is called when the AJAX.success() method is called:

requestObj.success = function (r) {
    console.log ("Successful AJAX Call ( " + JSON.stringify (r) + ")");
    callback (r);
}