#240

Product support

Get help in the plugin support forum.

Categories

  • Utility

Very simple!

ion.js - This is an easy-to-use shell for working with AJAX requests in October CMS projects.

ion.js

ion.js - Simple ajax-wrapper for OctoberCMS(Laravel5)

Using simple data attributes api.

Version: 1.0.1

Requirements

jQuery v2. Twitter Bootstrap v2. (Optionally, to control bootstrap modal windows)

Very simple!

ion.js - This is an easy-to-use shell for working with AJAX-requests in OctoberCMS projects.

Example

HTML

<div>
<label>Name</label><br/>
<input name="name" type="text" class="formdata" />
<label>Email</label><br/>
<input name="email" type="text" class="formdata" />
<label>Message</label><br/>
<textarea class="formdata"></textarea>
<label>Attachments</label><br/>
<input name="files" class="formdata" type="file" multiple="">
</div>
<button ion="data=.formdata;ajax=/api/v1/feedback/send;prepend=#SystemMessages;">Send</button>

It will collect the entered data from all elements by the .formdata selector and send it to the URL "/api/v1/feedback/sand" using POST method. The #SystemMessages container is used for pop-up messages and is present by default in the ion component.

CMS Page

title = "FeedBack handler"
url = "/api/v1/feedback/send"
description = "FeedBack handler"
is_hidden = 0
==
<?php
function onStart(){

    $name = post('name');
    $email = post('email');
    $message = post('message');
    $uploadedFiles = Input::file();

    # Some logic...

    if ($validator->fails())
    {
        $this['alerts'] =  $validator->messages()->all(); // For example
    } else {
        # Some logic...
    }

?>
==
{% if alerts %}
    {% for alert in alerts %}
      <div class="error">{{ alert }}</div>
    {% endfor %}
{% else %}
    <div class="message">Thank you! You will be contacted in the near future.<ion>reload=3;</ion></div>
{% endif %}

Connect

Add the component before the closing body tag.

ion.js

API

DATA - Jquery selector: DOM-elements for data collection.

data=.formlogin

AJAX - URL to send an Ajax request

ajax=/api/v3/myroute;

HTML - Jquery selector: Container for returned data

html=#ContainerForAnswer;

APPEND - Add data to the end of the container.

APPEND=#ContainerForAnswer;

PREPEND - Add data to the beginning of the container.

PREPEND=#ContainerForAnswer;

VAL - Its variables that will be transferred (will override DATA if the keys match).

val='foo':123,'bar':'ParamPamPam!';

GET - Enabling a GET Parameter String in a Query

get=true;

RUN - Running the declared function (eval)

run=myfunc();

MODAL - Open twitter bootstrap modal window (#MyModal Integrates with the component)

modal=#MyModal;
modal=hide;

All modal windows (with the .modal class) will be hidden

CLEAN - Clears field values or text within the ellemen by the selector

clean=.myfilds;

DEBUG - Sends all the returned data to the console (console.log)

debug=true;

TYPE - Determine the REST type of the request

type=put;
type=delete;

RELOAD - Reload this Page after a certain time

reload=2;

Reloads the page after 2 seconds

License

oc-ion.js is open-sourced software licensed under the MIT license.

1.0.4

Fix error of send the value attribute without data attribute.

May 29, 2017

1.0.3

Fix error of attaching the value of val attribute to the data sent.

May 29, 2017

1.0.2

Added examles to README.md

May 11, 2017

1.0.1

First version of ion

Apr 18, 2017