MagicQuery
Sends a request to the server and receives a response that can be parsed using the Response service.
Usage
This is an example of a simple use of MagicQuery to generate a password on the server-side and set it into the input field. Please see more about how to use the Response service and what features can be provided for using MagicQuery.
<form> <div class="form-item"> <label>Password</label> <div class="is-append is-50"> <input type="text" id="password" name="password"> <button data-kube="magicquery" data-url="/magicquery-script/">Generate</button> </div> </div> </form> // JSON response { "type": "value", "data": { "#password":"P2T8AYAL" } }
Settings
url
Type: Boolean
String
Default: false
This option allows to set the path by which the module will access the data.
<button data-kube="magicquery" data-url="/my-server-script/">Get</button>
Events
Event | Description |
---|---|
success |
This event fires when the query gets JSON string and the response is not empty. |
Catch events in your module:
(function($K) { $K.add('module', 'mymodule', { init: function(app, context) { this.app = app; }, // catch event onmessage: { magicquery: { success: function(sender, json) { console.log('Got it!'); } } } }); })(Kube);
Catch events from a specific magicquery module
Set an ID for the magicquery:
<button id="mymagic" data-kube="magicquery" data-url="/my-server-script/">Get</button>
Or set data-name
attribute:
<button data-name="mymagic" data-kube="magicquery" data-url="/my-server-script/">Get</button>
Catch events in your module by the specified ID or data-name:
(function($K) { $K.add('module', 'mymodule', { init: function(app, context) { this.app = app; }, // catch event onmessage: { magicquery: { success: function(sender, json) { if (sender._id === 'mymagic') { console.log('Got it!'); } } } } }); })(Kube);