-
A new version of Full Calendar is now available.
See the details here
User ajax
- Views Views: 14,645
- 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:
- 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.
- 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:
And the function in user_ajax.php: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');
}
}
});
});
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();
}