XUI Ajax example

Question

I don't understand how to use the XUI xhr (ajax) call. Consider the following code:

x$('#left-panel').xhr('/panel', {
    async: true,
    callback: function() {
        alert("The response is " + this.responseText);
    },
   headers:{
       'Mobile':'true'
   }
});

So does this mean that when a user HOVERs over the left-panel, xui will make an ajax call to the url /panel, and give an alert statement on success? But what if I wnat the ajax call to be execute ONBLUR instead?

Answer 1

The xui.js api docs state that the xhr request...

... is always invoked on an element collection and uses the behaviour of html.

So, in your GET request to /panel, the response text would appear in an alert window because that's what your callback says to do. However, without the callback, it would load the response into the #left-panel element, as if you had used:

x$('#left-panel').xhr('/panel', {
   async: true,
   callback: function() {
       x$('#left-panel').html(this.responseText);
   },
   headers:{
       'Mobile':'true'
   }
});

That is to say, the above code should produce the same effect as:

x$('#left-panel').xhr('/panel', {
   async: true,
   headers:{
       'Mobile':'true'
   }
});

In addition, invocation of the xhr request is independent of the target element event. That is, it is not necessarily triggered by a hover (or blur). Let's say you wanted to bind to a click of the #left-panel element. You would then need something like:

x$('#left-panel').on('click', function(e){
    this.xhr('/panel', {
       async: true,
       callback: function() {
           alert("The response is " + this.responseText);
       },
       headers:{
           'Mobile':'true'
       }
    });
});