Advanced

Management of Loading Errors

Since data loading depends on multiple factors, server side frequently returns loading error messages instead of requested data. The webix UI library allows trapping such errors and treating them in some way on the client side.

Default Error Management

By default if an error occurs, there appears a webix.message with details being shown in console. This functionality works only in the uncompressed code version while the minified version doesn't show any error messages.

Global Error Events

You can create your own global loading error handler that will catch server-side error responses regardless of the component:

onAjaxError(xhr) - fires when any Ajax request results in an error;
onLoadError(xhr, view) - fires when an error has happened during loading the data into any component on the page.

Global events are attached to Webix object:

webix.attachEvent("onLoadError", function(xhr, view){
    //xhr - xmlHttpRequest object
    //view - component which triggered error
 
    // ... custom code ...
});

Note that these events will fire only for Ajax requests issued by Webix. It can be a custom request created with Webix Ajax interface or an automatic one (issued by a data component during data loading or saving);

Component Error Events

At the same time, each data component features its own onLoadError event with the same parameters:

$$("list").attachEvent("onLoadError", function(xhr){
    /* your handler code here */
});

Error Handling for Data Requests

The result of a data request is a promise. If the server returns data, the promise is resolved, and you can access the data in the then() method of the promise. If there is an error, the promise rejects, and you can handle the error in the fail() method of a promise.

$$("list").load("data.php").then(function(data){
    /* ... */
}).fail(function(err){
    /* ... */
});

You can do the same with a custom webix.ajax request:

webix.ajax("data.php").then(function(data){
    /* ... */
}).fail(function(err){
    /* ... */
});

Furthermore, you can add a callback that will run after the request succeeds or fails:

$$("list").load("data.php",{
    success:function(text, data, ajax){ /* ... */ },
    error:function(text, data, ajax){ /* ... */ }
});
 
webix.ajax("data.php", {
    success:function(text, data, xhr){ /* ... */ },
    error:function(text, data, xhr){ /* ... */ }
});