Populate a jQuery dropdown using AJAX from JSON data from Joomla custom fields

Populate a jQuery dropdown using AJAX from JSON data from Joomla custom fields

Most people still doubt the application building capabilities of Joomla CMS. Since inception, Joomla always kept its CMS programming on MVC and facilitated many 3rd party application building extensions to run smoothly and enjoy the Joomla ACL to maximum extent.

One of application building extensions is Fabrik, which is the best known application building extension till date. This extension contains various plugins for forms and lists.

We here presume that viewers of this article are already familiar to the use the Fabrik extention at middle level and can also create the Joomla custom fields.

We proceed further, Joomla has meanwhile introduced various advanced capabilities like custom fields in Joomla articles. Here, for the purpose of making Fabrik dropdown field using Joomla custom field. We will first make a Joomla custom field using repeatable field. We are making Hotel Package field and select repeatable and create two columns (first for hotel name and second for hotel price) as per following image.

If you are using Joomla custom fields already, you are well aware that these JCF's are not avaiable for selection from Joomla frontend. There are available to the administrators from Joomla backend only so that important custom data can be saved regarding the article from backend and can be displayed only at frontend. Secondly, if you reviewed the database from backend, Joomla saves the custom fields data in JSON format and displays it by decoding this JSON data in frontend.

Now, save this field and go back to the article from Joomla backend where you want to use this repeatable field. Here as per below image, we can use this custom field in articles from backend (no fronend use, as discussed earlier).

 Now go back to Fabrik extension and click elements in your current form where you want to use dropdown element. We presume that you are already using the Form.

Click on new button and create dropdown element. Here will not use any of two option e.g. sub-options or advanced options for population through query. In this drop-down we will use only Javascript tab to run Javascript and jQuery. Fill the below code in Javascript tab in dropdown element:

    var form = Fabrik.getBlock('form_23');
    var hotelopt = form.formElements.get('xxxx_booking_packages___hotel_opt').getValue();
    
  if (hotelopt == '1') {  

var identify = form.formElements.get('xxxx_booking_packages___pkg_id').getValue();

var helpers =
{
    buildDropdown: function(result, dropdown, emptyMessage)
    {
        dropdown.html('');
        dropdown.append('<option value="">' + emptyMessage + '</option>');

        if(result !== '')

        {
            jQuery.each(result, function(k, v) {

                dropdown.append('<option value="' + v.price + '">' + v.hotel + '</option>');
            });

        }

    }

};
  
    var data = {
        'option'    : 'com_fabrik',
        'format'    : 'raw',
        'task'      : 'plugin.userAjax',
        'method'    : 'hotelPackages',
        'identify'    : identify
    };
    new Request({
        'url': '',
        'data': data,
    
        onComplete:function(r){
           
                   helpers.buildDropdown(
                    jQuery.parseJSON(r),
                    jQuery('#xxxx_booking_packages___package_name'),
                    'Select Hotel Package'

                );
           
        }
    }).send();
    
  }

Now create file namining user.ajax.php at location components\com_fabrik and put the following code:

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 hotelPackages()
	{
		$db = JFactory::getDbo();
		$retStr = '';
		$artid = JRequest::getVar('identify', '');
		
		$db->setQuery('SELECT `value` FROM `#__fields_values` WHERE `item_id`="'.$artid.'" AND `field_id`=38 ');
		$result = $db->loadResult();
		echo $result;

	}
}

 

 

Pin It

Add comment


Security code
Refresh

Related Articles