Jump to content


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

dropdown css style callback

  • Please log in to reply
11 replies to this topic

#1 kenshicu

kenshicu

    Advanced Member

  • Members
  • PipPipPip
  • 85 posts
  • LocationHolguín, Cuba

Posted 18 March 2013 - 02: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



#2 victor

victor

    grocery CRUD Hero

  • Advanced Member
  • PipPipPip
  • 967 posts
  • LocationMinsk

Posted 18 March 2013 - 07:05 PM

post has been deleted

#3 davidoster

davidoster

    Grocery CRUD Ninja

  • Advanced Member
  • PipPipPip
  • 1,068 posts
  • LocationAthens, Greece

Posted 19 March 2013 - 06: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>

____________________________________________________________

 

rtfm_small.jpg---!!!Please read these guidelines before asking to the forums!!!---

____________________________________________________________

 

David Oster aka George Pasparakis,
http://odphotography.com
http://eletter.gr


#4 kenshicu

kenshicu

    Advanced Member

  • Members
  • PipPipPip
  • 85 posts
  • LocationHolguín, Cuba

Posted 20 March 2013 - 04: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
}


#5 kenshicu

kenshicu

    Advanced Member

  • Members
  • PipPipPip
  • 85 posts
  • LocationHolguín, Cuba

Posted 20 March 2013 - 04: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>';


#6 victor

victor

    grocery CRUD Hero

  • Advanced Member
  • PipPipPip
  • 967 posts
  • LocationMinsk

Posted 20 March 2013 - 04:14 PM

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

#7 victor

victor

    grocery CRUD Hero

  • Advanced Member
  • PipPipPip
  • 967 posts
  • LocationMinsk

Posted 20 March 2013 - 04:14 PM

or you can send me a private message with your code

#8 kenshicu

kenshicu

    Advanced Member

  • Members
  • PipPipPip
  • 85 posts
  • LocationHolguín, Cuba

Posted 20 March 2013 - 06:20 PM

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



#9 victor

victor

    grocery CRUD Hero

  • Advanced Member
  • PipPipPip
  • 967 posts
  • LocationMinsk

Posted 20 March 2013 - 07:32 PM

post has been deleted



#10 victor

victor

    grocery CRUD Hero

  • Advanced Member
  • PipPipPip
  • 967 posts
  • LocationMinsk

Posted 20 March 2013 - 09:00 PM

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



#11 lgmsampaio

lgmsampaio

    Newbie

  • Members
  • Pip
  • 2 posts
  • LocationNara, Japan

Posted 25 June 2013 - 04: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
 



#12 kenshicu

kenshicu

    Advanced Member

  • Members
  • PipPipPip
  • 85 posts
  • LocationHolguín, Cuba

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







0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users