Internally option.load uses jquery.load() to load content into the content section. This means that option.load expects an object with the same parameters as jquery.load(). These are:

• url Type: string

  A string containing the URL to which the request is sent. url is the only required parameter.

• data Type: PlainObject or String

  A plain object or string that is sent to the server with the request.

• complete Type: Function( String responseText, String textStatus, jqXHR jqXHR, object jsPanel )

  A callback function that is executed when the request completes. Note that option.load.complete introduces a fourth argument: the jsPanel itself

  NEW: Inside the complete callback function the this keyword refers to the content property of the jsPanel.

The Default value of option.load is false.

For detailed information about jquery.load() refer to the jQuery API

Example 1 with a minimum setup

$.jsPanel({
    load: {
        url: "../files/loremipsum.html"
    },
    position: "center",
    size:     {width: 420, height: 270},
    overflow: {vertical: 'scroll'},
    theme:    "light"
});

Execute example 1

Example 2 adds a callback function

Note that the complete callback uses the fourth argument jsPanel

$.jsPanel({
    load: {
        url: "../files/loremipsum.html",
        complete: function(response, status, xhr, jsPanel){
            this.prepend('<p style="...">XMLHttpRequest.statusText: ' + xhr.statusText + '</p>');
        }
    },
    position: "center",
    size:     {width: 420, height: 270},
    overflow: {vertical: 'scroll'},
    theme:    "light"
});

Execute example 2 Execute example 2 with error

Example 3 additionally sends data to the server

$.jsPanel({
    load: {
        url: "../files/optionLoad.php",
        data: {author: "Stefan Sträßer"},
        complete: function(response, status, xhr, jsPanel){
            jsPanel.content.prepend('<p style="text-align:center;padding:10px;background:yellow;">XMLHttpRequest.statusText: ' + xhr.statusText + '</p>');
        }
    },
    position: "center",
    theme:    "light"
});

// optionLoad.php
<?php
if ( isset($_POST["author"]) ) {
    echo "<p style='text-align:center;'>Data sent to the server: " . $_POST["author"] . "</p>";
}
?>

Execute example 3

Example 4 loads table data
Additionally this example applies motties tablesorter plugin to the table.

$.jsPanel({
    load: {
        url: '../files/summits.html table#summits', // note that only a page fragment is loaded
        complete: function(response, status, xhr, panel){
            $("#summits", panel.content).tablesorter({
                widgets: ["stickyHeaders", "filter", "zebra"],
                widgetOptions : {
                    stickyHeaders_attachTo       : $(panel.content),
                    stickyHeaders_addResizeEvent : false,
                    filter_ignoreCase            : false
                },
                theme: 'blue',
                headers: {
                    0: { sorter: "text" },
                    1: { sorter: "digit" },
                    2: { sorter: "text" },
                    3: { sorter: false, filter: false },
                    4: { sorter: "shortDate", dateFormat: "yyyy-mm-dd" }
                }
            });
        }
    },
    position: 'center',
    size:     { width: 700, height: 350 },
    overflow: { vertical: 'scroll' },
    theme:    'primary',
    title:    'Some peaks I climbed'
});

Execute example 4

Example 5 loads a CSS clock - cssdeck.com/labs/a-css-clock
This example also removes the header section and sets background of jsPanel and jsPanel content section to transparent. The content section is set as handle for the draggable interaction and gets a doubleclick handler to close the panel. The clock is resizable with the aspect ratio being maintained. Actual resizing happens on resizestop.

$.jsPanel({
    load: {
        url: "../files/clock2.html"
    },
    position:     "center",
    offset:       {top: 0, left: 300},
    size:         {width: 180, height: 180},
    removeHeader: true,
    draggable:    {handle: "div.jsPanel-content"},
    resizable: {
        aspectRatio: true,
        grid: [ 2, 2 ],
        stop: function(event, ui) {
            var sizeDiff = ui.size.width - ui.originalSize.width;
            // http://ymson.tistory.com/entry/Get-CSS-TranslateX-TranslateY-Value-using-jQuery
            var matrix = $(".clock .ticks span", ui.element).eq(0).css("transform").replace(/[^0-9\-.,]/g, '').split(',');
            var translateX = matrix[12] || matrix[4];
            $(".clock", ui.element).css({width: ui.size.width + "px", height: ui.size.height + "px"});
            for (var i = 1; i < 61; i++) {
                $(".clock .ticks span:nth-child(" + i + ")", ui.element).css({
                    transform: "rotate(" + (i*6) + "deg) " + "translateX(" + (Math.ceil(translateX) + (sizeDiff/2)) + "px)"
                });
            }
        }
    },
    dblclicks:    {content: "close"},
    callback: function() {
        this.css({background: "transparent", boxShadow: "none"})
            .content.css({background: "transparent"});
    }
});

Execute example 5