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

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>"
        }
    }
]