Need help with dependent field type setup

Comments

• admin

  January 2015 edited 11:26AM

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

  January 2015 edited 11:26AM

  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 edited 11:26AM

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

  January 2015 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.
• maxbel

  January 2015 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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 edited 11:26AM

  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!