jsPanel Documentation
On this page:

option.ajax

Internally option.ajax uses jquery.ajax() to load content into the content section. This means that option.ajax expects an object with the same parameters as jquery.ajax(). For detailed information about jquery.ajax() please refer to the jQuery API

The Default value of option.ajax is false.

Additionally the jsPanel option.ajax settings object accepts the following parameters:

  • done: function( data, textStatus, jqXHR, jsPanel ) {}
    A function that will be passed to jQuerys jqXHR.done() callback and receives the same arguments as jQuerys .done() callback plus the jsPanel as fourth argument.
  • fail: function( jqXHR, textStatus, errorThrown, jsPanel ) {}
    A function that will be passed to jQuerys jqXHR.fail() callback and receives the same arguments as jQuerys .fail() callback plus the jsPanel as fourth argument.
  • always: function( data | jqXHR, textStatus, jqXHR | errorThrown, jsPanel ) {}
    A function that will be passed to jQuerys jqXHR.always() callback and receives the same arguments as jQuerys .always() callback plus the jsPanel as fourth argument. In response to a successful request, the function's arguments are the same as those of .done(): data, textStatus, and the jqXHR object plus the jsPanel as fourth argument.
    For failed requests the arguments are the same as those of .fail(): the jqXHR object, textStatus, and errorThrown plus the jsPanel as fourth argument.
  • then: function( data, textStatus, jqXHR, jsPanel ) {}, function( jqXHR, textStatus, errorThrown, jsPanel ) {}
    Expects an array of two functions that will be passed to jQuerys jqXHR.then() callback. The first function serves as callback for a successful request, the second one as callback for a failed request.

NEW: Inside the callback functions listed above the this keyword refers to the content property of the jsPanel when using a "normal" function.

Examples

Example 1 with a minimum setup of option.ajax

$.jsPanel({
    ajax: {
        url: '../files/example-ajax-a.html'
    },
    title:    'Example using option.ajax',
    size:     'auto',
    position: 'center',
    theme:    'info'
});
Execute example 1

Example 2 using the parameters done, fail and always
Note that the callbacks uses the additional argument jsPanel

$.jsPanel({
    ajax: {
        url:    '../files/example-ajax-2a.html',
        done:   function( data, textStatus, jqXHR, jsPanel ){
            this.prepend('<p style="...">done callback - XMLHttpRequest.statusText: ' + jqXHR.statusText + '</p>');
        },
        fail:   function( jqXHR, textStatus, errorThrown, jsPanel ){
            this.append(jqXHR.responseText);
        },
        always: function( arg1, textStatus, arg3, jsPanel ){
            this.append('<p style="...">always callback - textStatus: ' + textStatus + '</p>');
        }
    },
    size:     {width: 850, height: 530},
    position: 'center',
    theme:    'success'
});
Execute example 2 Execute example 2 with error

Example 3 using parameter then

$.jsPanel({
    ajax: {
        url: '../files/example-ajax-3a.html',
        then: [
            function (data, textStatus, jqXHR, jsPanel) {
                jsPanel.title('Example for option.ajax.then');
                jsPanel.content.prepend('<p style="...">then 1st function - textStatus: ' + textStatus + '</p>');
            },
            function (jqXHR, textStatus, errorThrown, jsPanel) {
                jsPanel.content.prepend(jqXHR.responseText);
            }
        ]
    }
    size:     { width: 720, height: 470 },
    position: 'center',
    theme:    'info'
});
Execute example 3 Execute example 3 with error

Example 4 sending data to the server with a "POST" request

$.jsPanel({
    ajax: {
        url: '../files/optionLoad.php',
        type: 'POST',
        data: {author: 'Stefan Sträßer'},
        then: [
            function (data, textStatus, jqXHR, jsPanel) {
                jsPanel.content.prepend('<p style="...">then 1st function - textStatus: ' + textStatus + '</p>');
            },
            function (jqXHR, textStatus, errorThrown, jsPanel) {
                jsPanel.content.prepend(jqXHR.responseText);
            }
        ]
    },
    size:     { width: 720, height: 470 },
    position: 'center',
    theme:    'info'
});
Execute example 4

Some AJAX resources