⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Why do I lose a Dropdown CSS style when I make a Callback



kenshicu
  • profile picture
  • Member

Posted 18 March 2013 - 14:39 PM

By making a callback to a dropdown loses the style (if the first dropdown the form, if not so it's okay)

I put the code here:

$crud->callback_field ( 'id_provincia', array ( $this, '_callback_field_provincia' ) );
 // Ayudante de funciones de Filtrar DropDowns según el usuario logeado
function filter_dropdown($table, $id_table, $desc_table, $id_field)
{
 $this->db->select ( '*' );
 $this->db->from ( $table );
 $this->db->where ( $id_table, $id_field );
 $result = $this->db->get ();
 $data = $result->row ();	
 $html = '<div><select name="'.$id_table.'" class="chosen-select" data-placeholder="Selecciona '.ucwords($table).'" style="width: 200px;">';
 $html.= '<option value=""></option>';
 $html.= '<option value="'.$data->$id_table.'" >'.$data->$desc_table.'</option>';
 $html.= '</select></div>';
 return $html; 
 // retorna el selectbox filtrado
 }
	
 // Filtrar DropDowns según el usuario logeado
 function _callback_field_provincia($value = '', $primary_key = null)
 {   
 return $this->filter_dropdown('provincia','id_provincia','desc_provincia',$this->session->userdata('provincia'));
 }

before callback:

dropdown_style.jpg

 

after callback:

dropdown_nostyle.jpg

 

Note: I'm using this library gc_dependent_select


victor
  • profile picture
  • Member

Posted 18 March 2013 - 19:05 PM

post has been deleted

davidoster
  • profile picture
  • Member

Posted 19 March 2013 - 18:16 PM

You are missing some more stuff... check before the callback how it is,

 

example,

 

<div id="field-activities_id_chzn" class="chzn-container chzn-container-single" style="width: 300px;"><a href="javascript:void(0)" class="chzn-single"><span>Επιλογή Δραστηριότητα</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 298px; top: 25px;"><div class="chzn-search"><input type="text" autocomplete="off" style="width: 278px;"></div><ul class="chzn-results"><li id="field-activities_id_chzn_o_1" class="active-result" style="">2013&nbsp;Pilates</li><li id="field-activities_id_chzn_o_2" class="active-result" style="">2013&nbsp;Yoga</li><li id="field-activities_id_chzn_o_3" class="active-result" style="">2013&nbsp;Tai Chi</li><li id="field-activities_id_chzn_o_4" class="active-result" style="">2013&nbsp;Qi Gong</li><li id="field-activities_id_chzn_o_5" class="active-result" style="">2013&nbsp;Seminars</li><li id="field-activities_id_chzn_o_6" class="active-result" style="">2013&nbsp;H-Healings</li><li id="field-activities_id_chzn_o_7" class="active-result" style="">2013&nbsp;Products</li><li id="field-activities_id_chzn_o_8" class="active-result" style="">2013&nbsp;Work/Study Groups</li><li id="field-activities_id_chzn_o_9" class="active-result" style="">2013&nbsp;Meetings</li><li id="field-activities_id_chzn_o_10" class="active-result" style="">2013&nbsp;VIP Card</li><li id="field-activities_id_chzn_o_11" class="active-result" style="">2013&nbsp;Gift Card</li><li id="field-activities_id_chzn_o_12" class="active-result" style="">2013&nbsp;H-Massages</li><li id="field-activities_id_chzn_o_13" class="active-result" style="">2013&nbsp;H-Beauty Face&amp;Body</li><li id="field-activities_id_chzn_o_14" class="active-result" style="">2013&nbsp;Med. Angelic</li><li id="field-activities_id_chzn_o_15" class="active-result" style="">2013&nbsp;Med. 2H</li><li id="field-activities_id_chzn_o_16" class="active-result" style="">2012&nbsp;Pilates</li><li id="field-activities_id_chzn_o_17" class="active-result" style="">2012&nbsp;Yoga</li><li id="field-activities_id_chzn_o_18" class="active-result" style="">2012&nbsp;Tai Chi Quan</li><li id="field-activities_id_chzn_o_19" class="active-result" style="">2012&nbsp;Qi Gong</li><li id="field-activities_id_chzn_o_20" class="active-result" style="">2012&nbsp;Seminars</li><li id="field-activities_id_chzn_o_21" class="active-result" style="">2012&nbsp;H-Healings</li><li id="field-activities_id_chzn_o_22" class="active-result" style="">2012&nbsp;Products</li><li id="field-activities_id_chzn_o_23" class="active-result" style="">2012&nbsp;Work/Study Groups</li><li id="field-activities_id_chzn_o_24" class="active-result" style="">2012&nbsp;Meetings</li><li id="field-activities_id_chzn_o_25" class="active-result" style="">2012&nbsp;VIP Card</li><li id="field-activities_id_chzn_o_26" class="active-result" style="">2012&nbsp;Gift Card</li><li id="field-activities_id_chzn_o_27" class="active-result" style="">2012&nbsp;H-Massages</li><li id="field-activities_id_chzn_o_28" class="active-result" style="">2012&nbsp;H-Beauty Face&amp;Body</li><li id="field-activities_id_chzn_o_29" class="active-result" style="">2012&nbsp;Med. Angelic</li><li id="field-activities_id_chzn_o_30" class="active-result" style="">2012&nbsp;Med. 2H</li></ul></div></div>

kenshicu
  • profile picture
  • Member

Posted 20 March 2013 - 16:05 PM

I found a solution, I put in bold. For some reason did not load the CSS and JS for chosen

 

// Ayudante de funciones de Filtrar DropDowns según el usuario logeado
function filter_dropdown($table, $id_table, $desc_table, $id_field)
{
 $this->db->select ( '*' );
 $this->db->from ( $table );
 $this->db->where ( $id_table, $id_field );
 $result = $this->db->get ();
 $data = $result->row ();	

 	$html = '<link type="text/css" rel="stylesheet" href="'.base_url().'/assets/grocery_crud/css/jquery_plugins/chosen/chosen.css" />';
	$html .= '<script src="'.base_url().'/assets/grocery_crud/js/jquery_plugins/jquery.chosen.min.js"></script>';
	$html .= '<script src="'.base_url().'/assets/grocery_crud/js/jquery_plugins/config/jquery.chosen.config.js"></script>';
 
 $html.= '<div><select name="'.$id_table.'" class="chosen-select" data-placeholder="Selecciona '.ucwords($table).'" style="width: 200px;">';
 $html.= '<option value=""></option>';
 $html.= '<option value="'.$data->$id_table.'" >'.$data->$desc_table.'</option>';
 $html.= '</select></div>';
 return $html; 
 // retorna el selectbox filtrado
}

kenshicu
  • profile picture
  • Member

Posted 20 March 2013 - 16:09 PM

i Add this to the previous function

 

$html = '<link type="text/css" rel="stylesheet" href="'.base_url().'/assets/grocery_crud/css/jquery_plugins/chosen/chosen.css" />';
$html .= '<script src="'.base_url().'/assets/grocery_crud/js/jquery_plugins/jquery.chosen.min.js"></script>';
$html .= '<script src="'.base_url().'/assets/grocery_crud/js/jquery_plugins/config/jquery.chosen.config.js"></script>';

victor
  • profile picture
  • Member

Posted 20 March 2013 - 16:14 PM

can you show your controller's code? That interesting for me too

victor
  • profile picture
  • Member

Posted 20 March 2013 - 16:14 PM

or you can send me a private message with your code

kenshicu
  • profile picture
  • Member

Posted 20 March 2013 - 18:20 PM

my slow internet connection prevented me now access private messages, can be a mail?


victor
  • profile picture
  • Member

Posted 20 March 2013 - 19:32 PM

post has been deleted


victor
  • profile picture
  • Member

Posted 20 March 2013 - 21:00 PM

Thanks, I'll take a look at that as soon as possible!


lgmsampaio
  • profile picture
  • Member

Posted 25 June 2013 - 16:19 PM

Hey guys

 

Is there a definitive solution for this issue? I'm facing exactly same problem.

 

This is my callback: 

$crud->callback_add_field('id_a',array($this,'_add_app_field'));

This is the function:

function _add_app_field (){
   $options = array();
   $app_id = $this->session->userdata('app_id');
   $this->load->helper('form');
		
   foreach ($this->db->get('application_a')->result() as $row){
	$options[$row->id_a] = $row->name;
   }
		
  return form_dropdown('id_a', $options, $app_id, "id='field-id_a' class='chosen-select' data-placeholder='Select Application' style='width:300px'");
}

As you can see, I also added some extra attributes (class, data-placeholder and style) that exists when the "auto-generated" drop-down is used. They doesn't make any effect. When using the callback function, there is no way to make it looks like the original one, for example, in the edit form.

 

---- UPDATE

I just realized those javascript files that @kenshicu metioned are added to page only when some specific methods are invoked like "get_set_input" , "get_multiselect_input" , ''get_enum_input" and so on.  So, they are not included when the dropdown is added by callback. 

 

An easy workaround is add these scripts to template file.

 

Can anybody confirm that it's a bug?

Thanks in advance
 


kenshicu
  • profile picture
  • Member

Posted 27 June 2013 - 01:37 AM

I think GC only loads the following files when it creates a dropdown:

chosen.css

jquery.chosen.min.js

jquery.chosen.config.js

 

Another solution would be to load these files at the beginning of the view, in the head of the html.

sorry my bad english