Response
This service parses the JSON received from the server and calls the commands that were specified in the server response.
Demo
// HTML <div data-kube="response-test"> <div id="response-demo-box" class="is-hidden">...</div> <button data-type="send">Send Request</button> </div> // JS (function($K) { $K.add('module', 'response-test', { init: function(app, context) { this.app = app; this.response = app.response; }, // events onclick: function(e, element, type) { e.preventDefault(); if (type === 'send') { $K.ajax.post({ url: '/get-data-from-server/', success: this._parse.bind(this) }); } }, _parse: function(data) { // parse commands from the response data this.response.parse(data); } }); })(Kube); // JSON response from the server [ { "type": "message", "data": { "message": "Hello!", "type": "is-focus", "position": "centered" } }, { "type": "animate", "data": { "#response-demo-box": "zoomIn" } } ]
Methods
parse
data | JSON Object |
data that will be parsed by the service to execute the commands sent in these data |
Returns: Boolean
Parse a JSON string or a specified javascript object and then calls the commands.
(function($K) { $K.add('module', 'mymodule', { init: function(app, context) { this.app = app; // define service this.response = app.response; }, getData: function() { // get response with the commands $K.ajax.post({ url: '/get-data-from-server/', success: this._parse.bind(this) }); }, _parse: function(data) { // parse commands from the response data var json = this.response.parse(data); // optional - check if the string was empty or not if (json) { this.app.broadcast('mymodule.success', this, json); } else { this.app.broadcast('mymodule.error', this, json); } } }); })(Kube);
Responses
location
This command will redirect the browser to the specified url (location) after parsing the response.
// JSON { "type": "location", "data": "/my-url/" }
message
This command will show the message (via the message service) after parsing the response.
// JSON { "type": "message", "data": { "message": "Success message" } } // Set the type of the message { "type": "message", "data": { "message": "Fail message". "type": "is-error" } }
value
This command will set the value/values to inputs with the specified IDs.
// JSON { "type": "value", "data": { "#user-name": "My username" } } // Multiple values { "type": "value", "data": { "#user-name": "My username", "#user-lastname": "My lastname" } }
html
This command will set the html to elements with the specified selectors.
// JSON { "type": "html", "data": { "#box": "<p>my html</p>" } } // Multiple elements { "type": "html", "data": { "#box": "<p>my html</p>", ".content": "<p>my html</p>" } }
addClass
This command will set the class to elements with the specified selectors.
// JSON { "type": "addClass", "data": { "#box": "my-class" } } // Multiple elements { "type": "addClass", "data": { "#box": "my-class my-second-class", ".content": "my-red-class" } }
removeClass
This command will remove the class to elements with the specified selectors.
// JSON { "type": "removeClass", "data": { "#box": "my-class" } } // Multiple elements { "type": "removeClass", "data": { "#box": "my-class my-second-class", ".content": "my-red-class" } }
show
This command will show elements with the specified selectors.
// JSON { "type": "show", "data": { "#box": true } } // Multiple elements { "type": "show", "data": { "#box": true ".content": true } }
hide
This command will hide elements with the specified selectors.
// JSON { "type": "hide", "data": { "#box": true } } // Multiple elements { "type": "hide", "data": { "#box": true ".content": true } }
animate
// JSON { "type": "animate", "data": { "#box": "slideUp" } } // Multiple elements { "type": "animate", "data": { "#box": "slideUp" "#box-2": "zoomOut" } }
Multiple commands
Just set the key indexes to the JSON to send multiple commands from a server.
// JSON [ { "type": "animate", "data": { "#box": "slideUp" } }, { "type": "html", "data": { "#layer": "<p>my html</p>" } } ]