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

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);