Ajax for Express Forms - Light Edition

Use Ajax Forms with other JavaScript tools (tabs, popup...)

This package was designed to make Ajax Express Forms work automatically in as many situations as possible.

When you have other JavaScript tools interacting with the form as well, however, you might need to set the form manually.

Luckily it's easy.

If you are you using Magic tabs by @johntheFish read on. Ajax for Express Forms and Magic Tabs work flawlessly together with a simple bit of code. Find a quick explanation in the Magic Tabs Documentation.

You have access to a JS object ajaxForms_express_form that gives you the bID and the AjaxForms object for each form on the page that was ajaxified or supposed to be ajaxified.

Let's say the form with bID 123 is supposed to get the Ajax treatment. But you also have a different script that will interact with the form to put it in a popup or tabs or anything like that.

  • If the Ajax script ran first, by the time you run your other script, the ajaxForms_express_form object will contain the AjaxForms object for that form
  • If your script ran first and you grab the AjaxForms object, you will get the form bID but instead of the attached AjaxForms, you will get boolean FALSE

That lets you determine if the Ajax code was run or not.

If the Ajax code was run first then your script might interfere with it and you might want to rerun the Ajax script after your code has completed.

The script offers you a very handy setForm() function for you to use.

setForm() takes 2 parameters, both optional:

  • form: a selector for a form in case you need to specify the form to attach the Ajax script to
  • callback: a function that will be called on form submission (more on that below)
As explained above, if, by the time you grab the ajaxForms_express_form object you find forms that were not Ajaxified yet you should leave them alone, run your script and let the Ajax script do its job afterward. That means that if you follow this advice you will only ever use this function when the script already has a form object and you don't need to use the form parameter.
 

First example: reset all the forms using jQuery


if (typeof ajaxForms_express_form !== "undefined") {
    $.each(ajaxForms_express_form, function(bID, obj) {
        console.log(bID);
        if (obj) {
            obj.setForm();
        }
    });
}


Second example: reset all the forms using Vanilla JavaScript


if (typeof ajaxForms_express_form !== "undefined") {
    Object.keys(ajaxForms_express_form).forEach(function(bID) {
        console.log(bID);
        var obj = ajaxForms_express_form[bID];
        if (obj) {
            obj.setForm();
        }
    });
}


Third Example: reset just 1 form when you know its bID


if (typeof ajaxForms_express_form !== "undefined") {
    var knownBID = 123;
    var obj = ajaxForms_express_form[knownBID];
    if (obj) {
        obj.setForm();
    }
}