Intermediate

Customizing Loading Pattern with Ajax

By default Webix loads data to its component by an asynchronous Ajax GET request. However, various modifications are possible.

Loading Data via POST Request

By default data is loaded via GET request. To change it to POST, use post prefix.

{
    view:"datatable",
    ..config..
    url: "post->load.php"
}

Loading Data via Synchronous Ajax Request

You can change the request to a synchronous one (sometimes it may be useful).

{
    view:"datatable",
    ..config..
    url: "sync->load.php"
}

Modifying Background Ajax Requests

There exists no possibility to modify background Ajax requests sent by the above pattern.

However, you can catch Webix onBeforeAjax event to modify ANY Ajax request on the page (so be attentive):

Sending Headers

webix.attachEvent("onBeforeAjax", 
    function(mode, url, data, request, headers, files, promise){
        headers["Content-type"]= "application/json";
    }
);

Note that Webix Ajax module (described below) features a built-in functionality for sending headers with server-side requests.

Loading with Webix Ajax Helper

To load data on demand without breaking application flow, you can resort to Webix Ajax interface.

//get request (default)
webix.ajax("data/load.php",function (text,data){
    $$("list").parse(text);
});

Server-side script should return inline data in any of supported data types so that it can be parsed into the necessary component.

Above snippet will set the new data for list. To add new data to the existing list data, define start position for parsing:

webix.ajax("data/load.php",function (text,data){
    $$("list").parse({
        pos: $$("list").count(), //start position
        data:text
    });
});

For setting the necessary server-side response manually, see the dedicated article. As to Server Side Connector, they return data in JSON or XML format depending on connector type.

Ajax loading allows passing parameters to server-side script as GET request:

webix.ajax("server/load.php?id="+id, function(text, data){
    ...//callback
});

Learn more about Webix Ajax Operations.

Adding Extra Functionality to Loading Functions

Here you should consult:

Back to top