1. The 3.8 code for Fabrik is now available on github, in the 'master' branch. If you are familiar with updating Fabrik from github, we would appreciate it if you could test this code on J! 3.8 for us. Once we have some feedback, we'll build a 3.8 release.

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(){
    }
    });
     
() (9011 Views)
Last Modified: Jan 19, 2014 at 1:03 PM (Cached)
XenCarta PRO © Jason Axelrod from 8WAYRUN.COM