utils.errors.js

Infinite scrolling while loading paginated content

Responsive image

Code

Action

UTILS.Errors.show('An error has occured!');
var _onError = (error) => { if (error instanceof Error) UTILS.Errors.show(error.message); }; var _onSuccess = (response) => { _.isString(response) && (response = JSON.parse(response)); if (!UTILS.Errors.isError(response,true)) console.log('success!'); }; _onSuccess({ errors:[], fields:[] });

This is mainly used in applications where in case of an error you would want to display the error, otherwise proceed

Note, check your browser console to see the success output

var _onError = (error) => { if (error instanceof Error) UTILS.Errors.show(error.message); }; var _onSuccess = (response) => { //if string, lets parse it _.isString(response) && (response = JSON.parse(response)); if (!UTILS.Errors.isError(response,true)) //error displayed console.log('success!'); }; _onSuccess({ errors:[ { error:'Text is wrong!', fields:['input-with-error1'] } ] }); //

var _onSuccess = (response) => { //if string, lets parse it _.isString(response) && (response = JSON.parse(response)); response.direction = 'top'; //changing direction of the error msg if (!UTILS.Errors.isError(response)) //error displayed console.log('success!'); }; _onSuccess({ errors:[ { error:'You must select one option!', fields:['select-with-error1'] } ] }); /* */

var _onSuccess = (response) => { //if string, lets parse it _.isString(response) && (response = JSON.parse(response)); var is_silent = true; //custom visual effects response.fx = { base: $('#custom-error-wrapper1'), effect: 'shake' }; if (!UTILS.Errors.isError(response,is_silent)) //error displayed console.log('success!'); }; _onSuccess({ errors:[ { error:'Show custom effect!', fields:[] } ] });

Custom shake effect to show how errors may be displayed differently

API

Option

Required

Default

Description

space optional {}

Holds the error definitions. In complex environments (especially w/ internationalization) it is favorable to define a JSON containing error definitions

effects optional { shake: 'callout.shake', bounce: 'callout.bounce', flash: 'callout.flash', pulse: 'callout.pulse', tada: 'callout.tada' }

Holds the effects definitions used in conjunction with velocity.js UI Pack

Methods

Method

Default

Description

setSpace null

You can extend/overwrite the space

UTILS.Errors.setSpace({ 'noEmail': 'You must specify an email address!', 'noAccount': 'No account was found!' });
setEffects null

You can extend/overwrite the effects

UTILS.Errors.setEffects({ swing: 'callout.swing' });
isError null

By passing the { }

var data = { errors: [], //optional -> { error:'Error text', fields:['#form-field-id'] } fx: {} //optional -> { base:$('#DOM'), effect:'shake' } }; UTILS.Errors.isError(data); //==> return true/false while showing the error message
getMessage null

Retrieves the full error message based on the key inside the UTILS.Errors.values.space

UTILS.Errors.getMessage('noEmail'); //==> returns 'You must specify an email address!'
show null

Displays the error message. If the message is not found the original message is returned

UTILS.Errors.show('noEmail'); //==> returns 'You must specify an email address!' UTILS.Errors.show('this is just a test'); //==> returns 'this is just a test'
Loading resources, please wait...