Welcome, Guest
Username: Password: Remember me

TOPIC: How to Ajaxify your relationship with Cook

How to Ajaxify your relationship with Cook 07 Feb 2017 18:25 #14998

  • vlemos
  • vlemos's Avatar
  • Online
  • Elite Member
  • Posts: 295
  • Thank you received: 41
  • Karma: 21
How to Ajaxify your relationship with Cook

Update field type to Ajax:
<field name="users"
		alias="_user_id_name"
		label="TEST_FIELD_NAME"
		filter="array"
		multiple="true"
		type="ckajax"
		labelKey="_user_id_name"
		ajaxContext="test.users.ajax.users"/>

Build an Ajax routine to return the html element:
case 'users':
/* Ajax List : Test
 * Called from: view:test, layout:test
 */

	// Get only the selected items from the pivot table.
	// Remember to create the filter on the pivot model
	$model = CkJModel::getInstance('Pivot', 'XxxModel');
	$model->setState('filter.group', 'Registered');
	$items = $model->getItems();
	foreach ($items as $key => $item)
		$selected[] = $item->user_id;

	// Get all the registered users from the users table
	// to populate the dropdown
	$model = $this->getModel();
	$model->setState('filter.group_title', 'Registered');
	$items = $model->getItems();

	// Build the selectbox and mark the selected entries
	// This will create a standard select on the target form
	echo '<input type="hidden" name=jform[users][] value=""/>';
	echo '<select id="jform_users" name="jform[users][]"  multiple>';
		foreach ($items as $key => $item)
			echo "<option". (in_array($item->id, $selected) ? " selected " : " ") . "value=\"" . $item->id . "\">" . $item->_user_id_name . "</option>";
	echo '</select>';

	// Here is the magic, Cook uses "chosen" to transform the 
	// selectbox. You can pass the jQuery call as below or
	// place it in the ajax Complete in a js file or wherever 
	echo '<script>jQuery("select[id$=\'jform_users\']").chosen({"disable_search_threshold":10,"search_contains":true,"allow_single_deselect":true,"placeholder_text_multiple":"Type or select some options","placeholder_text_single":"Select an option","no_results_text":"No results match"});';

	break;

The multi-select relationship now works like the native cook n:m box but loads after the form is built. The model code is missing but is child's play for most cook users.

This idea can be applied to any n:m relation.

Good luck. . . .
Last Edit: 07 Feb 2017 18:27 by vlemos.
The administrator has disabled public write access.

How to Ajaxify your relationship with Cook :evil: 07 Feb 2017 18:28 #14999

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 984
  • Karma: 140
All you wrote is soon deprecated.
Ajax fields will not anymore use any view function.
All the struff will be handled trough XML files (fields + filters)
This is another surprise coming for 3.2 with the new fields.
I can't wait to show you the achieved works.

Anyways K++ for this lesson you share here
Coding is now a piece of cake
The administrator has disabled public write access.
The following user(s) said Thank You: vlemos
Time to create page: 0.082 seconds

Get Started