Ajax Form Ex

Installation

Load jQuery before load the ajaxFormEx.js

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="ajaxFormEx.js"></script> 

Basic Usage

Binding Form(s) you want to perform ajax request. It will perform a jquery $.ajax() for you when form onSubmit().

It will take the action attribute and method attribute as a jquery $.ajax() url and method parameters respectively.

And it will auto do the form serialize() for you and pass to $.ajax() data parameter.

HTML:

<form action="/path/to/somewhere" method="post">
    <input type="text" name="first_name" value="some var">
    <input type="text" name="last_name" value="some var">
</form>

Javascript:

$('form').ajaxFormEx();

Options and Callbacks

Here is the list of options and callbacks.

There will some new added callbacks ajaxHandler for use. Some of them will run by sequence.

Debug option default as false. When you turn it on, plugin will console log out some message to let you know the sequence.

Open the development console and click the below button see what happen when debug is on.

$('form').ajaxFormEx({
    debug: false,
    ajaxHandler: {
        beforeSend: function(jqXHR, settings) {
            // Do Something
        },
        successStart: function(data, textStatus, jqXHR) {
            // Do Something
        },
        successEnd: function(data, textStatus, jqXHR) {
            // Do Something
        },
        complete: function(jqXHR, textStatus) {
            // Do Something
        },
        errorStart: function(jqXHR, textStatus, errorThrown) {
            // Do Something
        },
        errorEnd: function(jqXHR, textStatus, errorThrown) {
            // Do Something
        }
    },
    injectAjaxHandler: null
});

Inject Ajax Handler

You will be wonder what is the use of the injectAjaxHandler option.

It will be a little bit crazy and hard to explain.

So let's take a use case as a example.

Let's say we have two form to perform ajax request. Both of them will redirect after success but one of this will alert message to user.

<form class="ajax-request" action="/path/to/somewhere" method="post">
    <input type="text" name="first_name">
    <input type="text" name="last_name">
    <button type="submit">Save</button>
</form>
<form class="ajax-request" data-form-success="alertUser" action="/path/to/somewhere" method="post">
    <!-- This will  alert user -->
    <input type="text" name="first_name">
    <input type="text" name="last_name">
    <button type="submit">Save</button>
</form>

// This is what I do to solve this problem by using this plugin.
var generalAjaxHandler = {
    successEnd: function (data, textStatus, jqXHR) {
        console.log('!!!!!!Rediect!!!!!!');
    }
};

var injectAjaxHandler {
    alertUser: function (data, textStatus, jqXHR) {
        alert('This is this injectAjaxHandler.');
    }
};

$('ajax-request').ajaxFormEx({
    ajaxHandler: generalAjaxHandler,
    injectAjaxHandler: injectAjaxHandler
});

When you define a data attribute (data-form-success), The plugin will find run the function for that namespace (alertUser) you passed in to this plugin.

Open the development console and click the below button see what's going on.

Here is the data attribute list for injectAjaxHandler.

• form-beforesend
• form-success
• form-complete
• form-error

Please note that all injectAjaxHandler function will run after the start callbacks (beforeSend, successStart, errorStart) and before the end callbacks (successEnd, errorEnd, complete) in the sequence.

More Example

Two action url by using the same form