Need help with dependent field type setup

edited January 2015 in Modules
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.

Comments

  • edited 2:50AM
    What does your current form_fields method look like... in particular those fields?
  • edited 2:50AM
    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?
  • edited 2:50AM
    That looks correct to me. Is there any AJAX request happening?
  • edited 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.
  • edited 2:50AM
    Is there a working example of this in the fuel module? I couldn't find one that could've been my inspiration.
  • edited 2:50AM
    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.
  • edited 2:50AM
    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.
  • edited 2:50AM
    If you look at the AJAX request in the console of your browser (In Chrome, Developer Tools -> Network -> XHR), is "test string" being returned?
  • edited 2:50AM
    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.
  • edited 2:50AM
    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?
  • edited 2:50AM
    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>
  • edited 2:50AM
    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.
  • edited 2:50AM
    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.
  • edited 2:50AM
    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.
  • edited 2:50AM
    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!
Sign In or Register to comment.