Need help with dependent field type setup

maxbel · January 2015

Hi all,

I have 3 simple modules: DIVISIONS (as in company divisions), GROUPS (as in product groups) and FEATURES. Tables are as follows:
DIVISIONS: "divisions_id", "division_name"
GROUPS: "groups_id", "group_name", "assigned_to_division_id"
FEATURES: "features_id", "feature_name", "assigned_to_group_id"

In the FEATURES form view, I have a "division" field (select) that is populated by data from the divisions table. I'm trying to setup a dependent "groups" field that will, once a division is selected from its dropdown, be populated with the corresponding groups.

I've looked through the documentation but I'm having trouble getting this to work. Can anyone give me a simple example of how this would work, using my setup? I'm especially interested in the javascript (if needed) and in how the ajax function would work (and in which model to put it) - I'm not very familiar with ajax.

Thank you for any help.

admin · January 2015

What does your current form_fields method look like... in particular those fields?

maxbel · January 2015

It's rather large. Here are the relevant fields: (I can send more details if needed)


$CI->load->model('divisions_model');
$divisionList = $CI->divisions_model->options_list('divisions_id', 'division_name');

$fields['id_division'] = array('label' => 'DIVISION', 'type' => 'select', 'options' => $divisionList,  'first_option' => "Choisir la division...");
$fields['id_groups'] = array('type' => 'dependent', 'depends_on' => 'id_division', 'url' => fuel_url('groups/ajax/get_groups_by_division_id'), 'multiple' => FALSE, 'replace_selector' => '.division_depends');

With this configuration, shouldn't an AJAX call be made when I select something from the DIVISION dropdown list, fetching whatever data is returned by the ajax_get_groups_by_division_id function in the groups_model? Or do I misunderstand completly how this is supposed to work?

admin · January 2015

That looks correct to me. Is there any AJAX request happening?

maxbel · January 2015

Yes. If I select domething in the DIVISION list, a GET request is sent, like this one:
http://localhost:9090/1-DURABAC-MASTER2/admin/groups/ajax/get_groups_by_division_id?id_division=3

However, the following errors are thrown in the console:

ReferenceError: reference to undefined property d.traditional jquery.js:4
ReferenceError: reference to undefined property f.ajaxSettings.traditional jquery.js:4
ReferenceError: reference to undefined property f[0] jquery.js:2
ReferenceError: reference to undefined property e.nodeType jquery.js:3
ReferenceError: reference to undefined property d.nodeType jquery.js:3

Here's my get_groups_by_division method, maybe I'm doing something wrong there:


function ajax_get_groups_by_division_id($div) {
     $data = array();
    $this->db->where('groups_brand', $div['id_division']);
    $this->db->where('groups_visible', 1);
    $this->db->where('groups_level', 'type');
    $this->db->select('groups_id, groups_name_fr', 'groups');
    $this->db->order_by('precedence', 'asc');
     $Q = $this->db->get('groups');
     if ($Q->num_rows() > 0){
       foreach ($Q->result_array() as $row){
         $data[] = $row;
       }
    }
    $Q->free_result();  
    return $data; 
}

The groups_id field doesn't change after the request. I appreciate all your help.

maxbel · January 2015

Is there a working example of this in the fuel module? I couldn't find one that could've been my inspiration.

admin · January 2015

The data returned from ajax_get_groups_by_division_id should be an HTML string. Try just returning a string value to see if that works.

maxbel · January 2015

Do you mean something like this?

function ajax_get_groups_by_division_id($div) {
$data = "test string";
return $data;
}

If so, still nothing. I select something from the DIVISION dropdown, the GET request is sent, but nothing refreshes on the page.

This is my first foray into asynchronous stuff. I don't really know where or how to check what was returned from the ajax_... function.

admin · January 2015

If you look at the AJAX request in the console of your browser (In Chrome, Developer Tools -> Network -> XHR), is "test string" being returned?

maxbel · January 2015

Ok, I was looking in Network -> XHR (using Firefox Dev Edition) but I didn't see the RESPONSE tab when I selected the AJAX request.

Yes, "test string" is being returned. I also tried the original code and it was returning the object. I can also return an array.

admin · January 2015

OK... so the request is happening correctly but the replacement after the request seems to be the issue. What is the class ".division_depends" element?

maxbel · January 2015

It wasn't assigned to any element. I didn't really get what the "replace_selector" was for. If I understand correctly now, it should be the class or id of the element which is to be replaced.

And if I don't use a "replace_selector" attribute, then the field to be replaced in my case would be "id_groups"... if I understand correctly.

I did another test populating "id groups" beforehand with an array of options (testa, testb and testc) and leaving "replace_selector" out of the "id_groups" attributes.

Interestingly now, once I select something in the DIVISION dropdown, the Id_groups list (which originally contains"testa, testb nad testc") is refereshed and then contains nothing (I tried returning the string, the array and the object).

Here is the relevant HTML on page load:

<tr>
	<td class="label"><label for="id_division" id="label_id_division">DIVISION</label></td>
	<td class="value"><select name="id_division" id="id_division"  >
		<option value="" label="Choisir la division...">Choisir la division...</option>
		<option value="1" label="Durabac">Durabac</option>
		<option value="2" label="Duralift-Chagnon-Inpak">Duralift-Chagnon-Inpak</option>
		<option value="3" label="Durapac">Durapac</option>
		<option value="4" label="Duraplast">Duraplast</option>
</select>
</td>
</tr>
<tr>
	<td class="label"><label for="id_groups" id="label_id_groups">Id groups</label></td>
	<td class="value"><div class="dependent_data" style="display: none;">[]</div>
<div class="orig_value" style="display: none;">""</div>
<select name="id_groups" id="id_groups"  class="dependent" data-depends_on="id_division" data-ajax_url="http://localhost:9090/1-DURABAC-MASTER2/admin/groups/ajax/get_groups_by_division_id" >
		<option value="0" label="testa">testa</option>
		<option value="1" label="testb">testb</option>
		<option value="2" label="testc">testc</option>
</select>
</td>
</tr>

And once a selection is made in DIVISION:

<tr>

    <td class="label"><label id="label_id_division" for="id_division">DIVISION</label>
    </td>
    <td class="value"><select id="id_division" class="dependee" name="id_division">
           <option label="Choisir la division..." value=""></option>
            <option label="Durabac" value="1"></option>
            <option label="Duralift-Chagnon-Inpak" value="2"></option>
            <option label="Durapac" value="3"></option>
            <option label="Duraplast" value="4"></option>
        </select>
    </td>

</tr>
<tr>

    <td class="label">
        <label id="label_id_groups" for="id_groups">Id groups</label>
    </td>
    <td class="value">
        <div class="dependent_data" style="display: none;">

            []

        </div>
        <div class="orig_value" style="display: none;">

            ""

        </div>
        <select id="id_groups" class="dependent" data-ajax_url="http://localhost:9090/1-DURABAC-MASTER2/admin/groups/ajax/get_groups_by_division_id" data-depends_on="id_division" name="id_groups">
        </select>
    </td>

</tr>

admin · January 2015

Normally, it calls the base_module_model::ajax_options() method which returns HTML option elements. If your method returns option elements like that method, does it work.

maxbel · February 2015

Yes it does. If I use the base_module_model::ajax_options() logic in my method to return a formatted html list, the dependent field works fine. Here's my method:

function ajax_get_groups_by_division_id($div) {

        $options = $this->groups_model->options_list('groups_id', 'groups_name_fr');
		$str = '';
		foreach($options as $key => $val)
		{
			$str .= "<option value=\"".$key."\" label=\"".$val."\">".$val."</option>\n";
		}
		return $str;

    return $str; 
}

If I only return the options list as an array (i.e. simply returning $options), the dependent field doesn't work. The ajax_options() method does not seem to be called to format the data in $options.

I can work with formatting the data in my method as above, but I don't think that is how you intended the dependent field to function (not really "plug and play). If it is, maybe adjusting the documentation to specify how the data returned by the ajax call should be formatted...

If it's not, I'm glad to help with any other tests you'd have me do.

admin · February 2015

The returned value for the AJAX method (e.g. "ajax_get_groups_by_division_id") should be HTML so that the AJAX callback can insert it into the DOM. Perhaps some updates to the documentation may be best to clear up that confusion.

maxbel · February 2015

Ok great! It might seem clear to another user, but an added example/clarification to the docs would've greatly helped me (and perhaps even prevented me from taking up some of your time). Thanks again for the help!

Howdy, Stranger!

Categories

Need help with dependent field type setup

Comments