• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

User ajax

  • Views Views: 13,818
  • Last updated Last updated:
  • Ajax allows you to change content on a page without having to reload the whole page. It allows you to create functionality that can enhance a users experience and is very useful for creating dynamic content. The user ajax concept, allows you to define a custom set of features on your server which can be called from the browser via an ajax request to modify your form.

    Please note if following the User Ajax tutorial the code shown is out of date if using the latest version of Joomla (3.x) and Fabrikar (3.x). Use the code shown below, however the principles still remain true.

    To make an AJAX request you need two pieces of code:
    1. Javascript - which will make the request to another file/function and handle the response eg change your webpage. This code is more than likely to reside in an element's Javascript section.
    2. PHP - this is the code that you call and does something before returning an output. It lives on your server somewhere.

    Example: User ajax in form​

    This wiki page is taken from the example file which can be found in components/com_fabrik/user_ajax_example.php.

    To get started copy this file and rename it to user_ajax.php.
    Then insert your function into the userAjax class, as per the example userExists() function.
    To call your AJAX method, use a URL of this format from your custom JS code:

    Code:

    index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=userExists&username=" + myUsername;

    Fabrik will automatically try and call the function name specified in your 'method='.
    You are responsible for grabbing any other parameters, using:

    PHP:

    $app = JFactory::getApplication();
    $input = $app->input;
    $input->getString('variablename');

    as per the myUsername example in userExists() below.

    The userExists() example is designed to test if a username given in a text element exists. If it does, an alert will pop up, then the field will be cleared and the cursor re-focused to it.

    This function should be copied in to a custom JS file in ./components/com_fabrik/js/form_X.js, where X is your numeric form ID. This is the standard way of including any custom Javascript on a Fabrik page, by specifying "thing_X" (form_X, list_X, viz_X).

    The easiest way to call AJAX from your JS is to use the Mootools Ajax class, for instance:

    function userExists(myUsername,refocus) {
    var url = "index.phpoption=com_fabrik&format=raw&task=plugin.userAjax&method=userExists&username=" + myUsername;
    new Request({url:url,
    onComplete: function(response) {
    if (response != '') {
    alert(response);
    refocus.value = '';
    refocus.focus();
    }
    }
    }).send();
    }

    In this case, the above code is called from the 'onchange' trigger
    of a text element like this:


    var thisElement = Fabrik.getBlock('form_1').Elements.get('jos_fabrik_formdata_13___username');
    var myUsername = thisElement.get('value');
    userExists(myUsername,thisElement);

    The element JS grabs the content of the text field, and also supplies
    the element object, so the userExists() function can then empty and refocus if the
    specified username already exists.

    Another example of using Mootools Ajax might be something like this, which assumes a function
    in this file called buildStateDropDown() (not shown here), which would build the dropdown
    menu for a list of states which you want to update on the fly (for instance if you
    have a "Country" dropdown, and wish to repopulate the State menu when it changes):


    function ajaxTest() {
    var url = "index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=etStateDropDown";
    new Request({url:url,
    method: 'get',
    update: document.id('jos_fabrik_formdata_13___states')
    }).send();
    }

    The important note here is the 'update' parameter, which tells Mootools the ID of the form element you want to replace with the AJAX response.

    PHP:

    /**
    * Define your userAjax class
    *
    * @package Joomla
    * @subpackage Fabrik
    * @since 3.0
    */

    class UserAjax
    {
    /**
    * This is the method that is run. You should echo out the result you which to return to the browser
    *
    * @return void
    */

    public function userExists()
    {
    $db = FabrikWorker::getDbo();
    $query = $db->getQuery(true);
    $retStr = '';
    $app = JFactory::getApplication();
    $input = $app->input;
    $myUsername = $input->getString('username', '');
    $query->select('name')->from('#__users')->where('username = ' . $db->quote($myUsername));
    $db->setQuery($query, 1, 0);
    $result = $db->loadResult();

    if ($thisName = $result)
    {
    $retStr = "The username $myUsername is already in use by $thisName";
    }

    echo $retStr;
    }
    }

    Example: User ajax in list - toggle YesNo element​

    From https://fabrikar.com/forums/index.php?threads/edit-row-and-add-new-row.52013/#post-271517

    With this example, the id element should be in the first column of the list. First add a custom class "myvalid" to your YesNo element. Then in list_X.js add:
    jQuery(document).on("click", ".myvalid > i", function() {
    mythis = jQuery(this);

    mytr = jQuery(this).parents("tr");
    myrowid = mytr.find("td").eq(0).html();
    myrowid = jQuery.trim(myrowid);

    mystatus = jQuery(this).attr("class");
    mystatus = jQuery.trim(mystatus);

    jQuery.ajax({
    url: 'index.php?option=com_fabrik&format=raw&task=plugin.userAjax&method=ToggleYesNo&row_id='+myrowid+'&row_status='+mystatus,
    type: "GET",
    success: function(data) {
    if(mystatus === "icon-remove") {
    mythis.removeClass('icon-remove');
    mythis.addClass('icon-checkmark');
    } else {
    mythis.removeClass('icon-checkmark');
    mythis.addClass('icon-remove');
    }
    }
    });
    });
    And the function in user_ajax.php:
    Code:
    public function ToggleYesNo()
    {
    $mydb = JFactory::getDBO();
    $app = JFactory::getApplication();
    $input = $app->input;

    $row_id = $input->get('row_id', '');
    $mystatus = $input->get('row_status', '');

    if ($mystatus == "icon-checkmark") {
    $query = "UPDATE mytable SET active = '0' WHERE id = ".$mydb->Quote($row_id);
    } else {
    $query = "UPDATE mytable SET active = '1' WHERE id = ".$mydb->Quote($row_id);
    }

    $mydb->setQuery($query);
    $mydb->execute();
    }
Back
Top