1. "Fabrik 4" helpers needed!

    You are invited to join other community members active in coding, maintaining and improving Fabrik. Please visit https://fabrik.help for more information!
    Dismiss Notice

Javascript form plugin

Jan 19, 2014
Javascript form plugin
  • Note this is for Fabrik 2.x ONLY.

    If you are using Fabrik 3.x onwards please see Fabrik 3 form javascript

    [​IMG]


    Similar to the Run PHP plug-in, the Run JS plug-in allows you to attach an instance of a javascript class to your form.
    The JavaScript files need to be stored in components/com_fabrik/plugins/form/fabrikjs/scripts.
    Each file should contain a class with the same name as its filename, so if for example our file name was dostuff.js then its class should be created as below:


    Code (Javascript):

    var dostuff = new Class({
    initialize: function(form)
    {
    this.form = form;
    //the form js object
    }});
     
    The JavaScript object that controls the form initiates the form plug-in, passing itself into the required initialize method.
    When the form performs various actions, its JavaScript object calls a corresponding method in all of the form JS plug-ins attached to it.
    There is an example.js file in the plug-in which contains a list of each of these possible methods. For reference it has been included below:


    //class name needs to be the same as the file name
    Code (Javascript):

    var example = new Class({
    initialize: function(form)
    {
    this.form = form; //the form js object
    },
    //run when submit button is pressed
     
    onSubmit: function(){
    alert('onSubmit');
    //return false if you want the form to stop submission
    },
     
    //run once the form has sucessfully submitted data via ajax
     
    onAjaxSubmitComplete: function(){
    alert('complete');
    },
     
    onDoElementFX: function(){
    alert('onDoElementFX');
    },
    //run at the start of saving a group to the db
    // when you move from one group to another on
    //multipage forms
     
    saveGroupsToDb: function(){
    alert('saveGroupsToDb');
    },
    //run once the ajax call has completed when moving from one group to another
    //on multipage forms
    onCompleteSaveGroupsToDb: function(){
    alert('onCompleteSaveGroupsToDb');},
    //run each time you move from one group to another on
    //multipage forms
    onChangePage: function(){
    alert('onChangePage');
    },
    //run if the form has ajax validaton
    //run at start of element validaton that occurs on that elements onblur event
    onStartElementValidation: function(){
    alert('onStartElementValidation');
    },
    //run when above element validation's ajax call is completed
    onCompleteElementValidation: function(){
    alert('onCompleteElementValidation');
    },
    //called when a repeatable group is deleted
    onDeleteGroup: function(){
    alert('onDeleteGroup');
    },
    //called when a repeat group is duplicated
    onDuplicateGroup: function(){
    alert('onDuplicateGroup');
    },
    //called when the form gets updated
    onUpdate: function(){
    alert('onUpdate');
    },
    //called when the form is reset
    onReset: function(){
    }
    });
     
() (13990 Views)
Last Modified: Jan 19, 2014 at 1:03 PM (Cached)
XenCarta PRO © Jason Axelrod from 8WAYRUN.COM