Jump to content


walkingcrud

Member Since 13 Oct 2015
Offline Last Active Nov 09 2015 08:06 PM
-----

Topics I've Started

JQuery conflict with chosen files

13 October 2015 - 03:21 PM

Hello,

 

First post - thank you for the great setup - this is really a huge time saver and looks great. 

 

I've got a simple form working, relating two tables, and things work OK. I want to pre-populate one select field with a specific value (and this does work). I've used the callback_add_field and can render the select, but the styles are missing. The console shows JQuery conflict errors (JQuery not defined, $ not defined). I'm using the following before the render:

      $crud->set_css('assets/grocery_crud/css/jquery_plugins/chosen/chosen.css');
      $crud->set_js('assets/grocery_crud/js/jquery_plugins/jquery.chosen.min.js');
      $crud->set_js('assets/grocery_crud/js/jquery_plugins/ajax-chosen.js');
      $crud->set_js('assets/grocery_crud/js/jquery_plugins/config/jquery.chosen.config.js');

I can see the scripts are loaded when viewing the source from the output page. I'm not loading any additional JQuery files, and commenting out the bootstrap.min.js file doesn't resolve the conflict. I'm using the purchased bootstrap theme, but it happens on the default themes as well.

 

Output of the select is:

<select id="field-team" name="team" class="chosen-select" data-placeholder="Select Team" style="width: 300px;">
  <option value=""></option>
  <option value="3" selected="">TESTING</option>
</select>

Any ideas?

 

Thank you.