load

loads data from an external data source

url	string| function| WebixProxy	the data URL
type	string	(optional) the type of data to load: "json" (default), "xml", "jsarray", "csv"
callback	function	(optional) the callback function
clear	boolean	if true, the current data are erased before new data are loaded

promise

a "promise" object

Example

$$("mylist").load("data.xml", "xml");

Related samples

The data URL

The url parameter is automatically passed to the load() method. It can be set as:

• string - the path to a file or a script

$$("table").load("some.php");

• function - the logic that is able to get data and parse them on its own

$$("table").load(function(){
    return webix.ajax().post("some.php", params);
});

• object - the loading proxy object

$$("list").load({
    $proxy:true,
    load:function(view, params){
        return webix.ajax().get("some.php", params);
    }
});

Data Type

By default, the data type is set to "json" and you do not need to set it if the data comes from the server in the JSON format:

$$("component_id").load("data.json");

If you receive data in other formats, set the data type as the second parameter of load():

$$("component_id").load("data.xml","xml");

Promise

The method returns a Promises/A+ compatible promise object than contains the eventual result of an AJAX request. You can use the promise to catch the result of a request (successful or otherwise).

The loading promise is resolved as soon as data arrives to the client side. You can catch this moment by adding the then() handler. then() receives the data object with functions for parsing the server response:

$$("table").load("some.php").then(function(data){
    /* ...you code here */
    data = data.json();
});

You can catch errors with the fail() / catch() (the Webix alias of fail()) methods:

$$("table").load("some.php").fail(function(xhr){
    /* ...you code here */
    console.log(xhr.responseText);
});

To do something when the request either succeeded or failed, use finally():

$$("table").load("some.php").finally(function(){
    /* ...you code here */
});

Learn more possibilities at:

• Data Loading
• Ajax Operations

Callback

Alternatively to promise API, you can use the callback to trigger some actions after loading is finished. The callback can be a function or an object.

The callback function takes 3 parameters:

1. The text of the response
2. The data object of the response
3. The raw HTTP request object

$$("component_id").load("data.json", function(text, data, http_request){
    // do something with data.json()
});

The callback object can contain 2 properties for handling the success and the failure of a request:

• success
• error

$$("component_id").load("data.xml", "xml", {
    success:function(text, data, http_request){
        webix.message("success");
    },
    error: function(text, data, http_request){
        webix.alert("error");
    }
});

If you set the data type, the callback (object or function) is passed to load() as the third parameter:

$$("component_id").load("data.xml","xml",function(text, data, http_request){
    // do something with the data object
});

Post and synchronous loading

The load method sends a GET request. If you want to send a POST or a syncronous request, you can use one of the two options:

1. create a proxy:

$$("component_id").load({
    $proxy:true,
    load(view,params){
        return webix.ajax().post("some.json",params);
    }
});

2. send the request with webix.ajax() and use the parse method to parse the data into the component:

// sync data loading
var xhr = webix.ajax().sync().get("some.json");
$$("component_id").parse(xhr.responseText);

// using POST for data loading
webix.ajax().post("mydata.php", "some=value").then(function(data){
    $$("component_id").parse(data.text());
});

Back to top