[larasmith]

I am using the dependent drop down from here: 

/topic/1561-simple-dependant-dropdown-extension/

This is very useful and effective but this dependent drop down list produces is a single drop down list.... Can it do a multiple select / multiselect? If so... how can we do it? Please show an example... Thanks in advance!

 

Other methods are also welcome as long as the output is a dependent drop down that allows multiselect...

 

 

[larasmith]

As I continue to search solution to this problem, I tried to use set_relation_n_n. Values that appear here can be customized here using the $where condition, in my code:

	$where = array('funct_prog_id'=> $_SESSION['dropval']);
 	$crud->set_relation_n_n('Function', 'tbltos_funct', 'tblfunction', 'tos_id', 'funct_id', 'funct_Name', 'priority',$where);

This code is located in my controller and is set before creating the output...However, the  I'm using $_SESSION to store the value of a field to fulfill the where condition because the selection of the data should be dynamic meaning when the user selects the 'Program' from the drop down during add or edit state, the values of the output should be based on it.

Here is the code in the view:

	<script type="text/javascript">
		$(document).ready(function(){			
			$("#field-tos_prog_id").change(function() {
				$.get("/lara/merge/GetDrop",{drop:this.value},
				function (result){
						$('#Function_field_box').load(' #field-Function');			
				});
			});
		});			
    </script>

Here's the code in the GetDrop.php:

<?php 
session_start();
class GetDrop extends MY_Controller {	
 	public function index()
		{
			$_SESSION['dropval'] =  $_GET['drop'];
		}		
	}		
?>

And the output is this:

I am successful in getting the value of the program and placing it on the where condition but the output element transforms into this:

 

I did my best to fix this but no luck... Any suggestions? Other method perhaps? Thanks in advance!

[larasmith]

anyone there?  :rolleyes:

[victor]

In a few words your solution is:

1)you need to get dependent items via ajax

2) delete all elements from the multi-select

for example:

$('#mySelect').find('option').remove();
now your dropdown is empty.

3) add new elements

$('#mySelect').append('<option value="whatever">text</option>');

4) Refresh "choosen select" plugin

$('#mySelect').trigger("liszt:updated");  

 

[larasmith]

In a few words your solution is:

1)you need to get dependent items via ajax

2) delete all elements from the multi-select

for example:

$('#mySelect').find('option').remove();
now your dropdown is empty.

3) add new elements

$('#mySelect').append('<option value="whatever">text</option>');

4) Refresh "choosen select" plugin

$('#mySelect').trigger("liszt:updated");  

 

 

Dear grocery CRUD hero,

 

Thank you for your reply... I was trying to do as instructed... Sorry but I cannot make this work... Could you further elaborate... Forgive my noobness. I'm a newbie at these things... I really appreciate your response... Thank you!

[larasmith]

In a few words your solution is:

1)you need to get dependent items via ajax

2) delete all elements from the multi-select

for example:

$('#mySelect').find('option').remove();
now your dropdown is empty.

3) add new elements

$('#mySelect').append('<option value="whatever">text</option>');

4) Refresh "choosen select" plugin

$('#mySelect').trigger("liszt:updated");  

 

 

Dear grocery CRUD hero,

 

Thank you for your reply... I was trying to do as instructed... Sorry but I cannot make this work... Could you further elaborate... Forgive my noobness. I'm a newbie at these things... I really appreciate your response... Thank you!

[victor]

show your data please and your code

[larasmith]

Thank you Sir!

 

Here it is: (Call back)

	function tos_CBae_selFunc()
	{
		return '
			<script type="text/javascript">
				$(document).ready(function(){
					$("#secret_field_box").hide();
					$("#field-tos_prog_id").change(function() {
						alert("Prog ID selected");	// xxx				
						$.get("/lara/merge/GetDrop",{drop:this.value},
						function (result){
								$("#field-Functions").find("option").remove();		
								$("#Function_field_box").load(" #field-Functions");
								$("#Function_field_box").trigger("liszt:updated");  
													
						})																			
					})
				})				
			</script>
			
			' ;	
	}

Here's the one that creates my output:

	public function tos()
	{	
 		/*Create ajax_grocery_CRUD instead of grocery_CRUD. This extends the functionality with the
 		 field_set_defaults keeping all functionality as well (I extended this to grocery_CRUD)*/
 				
		$crud = new ajax_grocery_CRUD();
		
		// Set theme
		$crud->set_theme('datatables');		

		// Set table name
		$crud->set_table('tbltos'); 
						
		// Set this name instead of 'Record' in prompt
		$crud->set_subject('Table of Specification');
		
		//* These displays custom name instead of field name in columns							
		$crud->display_as('tos_prog_id','Program');
		$crud->display_as('tos_course_DescTitle_id','Descriptive Title');
		$crud->display_as('tos_course_RefNo_id','Reference No.');			
		$crud->display_as('tos_course_Title_id','Title');
		$crud->display_as('tos_lo_name_id','Learning Objective');
		$crud->display_as('tos_topic_name_id','Topic');
		$crud->display_as('tos_sem_id','Semester');
		$crud->display_as('tos_qtype_id','Question Type');
		$crud->display_as('tos_coglvl_id','Cognitive Level');
		$crud->display_as('tos_diffindex_id','Difficulty Index');
		$crud->display_as('tos_encoder_id','Encoder');
		$crud->display_as('tos_reviewed_id','Reviewed');
		$crud->display_as('tos_remarks_id','Remarks');
		$crud->display_as('tos_status_id','Status');
		$crud->display_as('tos_published_id','Published');
		$crud->display_as('tos_PilotTest_id','Pilot Tested');		
		//*	

/*		// Makes fields required in edit mode
	    	$crud->required_fields('tos_prog_id', 'tos_funct_id', 'tos_course_DescTitle_id', 'tos_course_RefNo_id', 'tos_course_Title_id', 'tos_lo_name_id', 'tos_topic_name_id', 'tos_sem_id', 'tos_qtype_id', 'tos_coglvl_id','tos_diffindex_id', 'tos_reviewed_id', 'tos_remarks_id', 'tos_status_id','tos_author');
   
		// Makes fields visible in add/edit mode (ang di nabanggit dito automatic nakatago)
		$crud->fields('tos_prog_id', 'tos_funct_id', 'tos_course_DescTitle_id', 'tos_course_RefNo_id', 'tos_course_Title_id', 'tos_lo_name_id', 'tos_topic_name_id', 'tos_sem_id', 'tos_qtype_id', 'tos_coglvl_id','tos_diffindex_id', 'tos_reviewed_id', 'tos_remarks_id', 'tos_status_id');
 */		
		// Sets dropdown list (Encoder aka UserName) then turn it as default value as text
//		$crud->set_relation('tos_encoder_id','tblusers','UserName');


		// Sets relation with dependent dropdown list (Program->Function)
		$crud->set_relation('tos_prog_id','tblprogram','prog_Name');		
//$crud->set_relation('funct_prog_id','tblprogram','prog_Name');
//{$crud->set_relation('funct_prog_id','tblprogram','prog_Name' )}


		// This is the set of code for hiding/showing OPTIONS depending on QType -*begin
		$f=array('secret','tos_id','tos_assmntype_id','tos_prog_id', 'Functions','tos_sem_id','tos_qtype_id','tos_remarks_id','tos_reviewed_id','tos_status_id','tos_published_id','tos_PilotTest_id','tos_qry','tos_ctr','tos_need');
		$crud->add_fields($f);
		$crud->edit_fields($f);
		$crud->callback_add_field('secret',array($this,'tos_CBae_selFunc'));
		$crud->callback_edit_field('secret',array($this,'tos_CBae_selFunc'));
		// -*end

		// Sets function  xxx
		$where = array('funct_prog_id'=> $_SESSION['dropval']);
	//	$where = array('funct_prog_id'=>$value);
//		if(!empty($test)){
			$crud->set_relation_n_n('Functions', 'tbltos_funct', 'tblfunction', 'tos_id', 'funct_id', "{funct_Name}", 'priority',$where);
//			echo 'pasok';
//			}else{ 
//				$crud->set_relation_n_n('Functions', 'tbltos_funct', 'tblfunction', 'tos_id', 'funct_id', "{funct_Name}-{funct_prog_id}", 'priority');
//			}
	
		// Sets dropdown list (Semester)
		$crud->set_relation('tos_sem_id','tblsem','Sem');

		// Sets dropdown list (QType)
		$crud->set_relation('tos_qtype_id','tblqtype','QType');

		// Sets dropdown list (Remarks)
		$crud->set_relation('tos_remarks_id','tblqrem','qrem_Name');	

		// Sets dropdown list (Status)
		$crud->set_relation('tos_status_id','tblstatus','status_Name');	

		// Sets dropdown list (Reviewed bool)
		$crud->set_relation('tos_reviewed_id','tblbool','bool_value');

		// Sets dropdown list (Published bool) then turn it as default value as text
		$crud->set_relation('tos_published_id','tblbool','bool_value');		

		// Sets dropdown list (PilotTest bool)  then turn it as default value as text
		$crud->set_relation('tos_PilotTest_id','tblbool','bool_value');

		//Removes the print feature
		$crud->unset_print();
		
		//**** These displays the output in the page
		$output = $crud->render();		
		$this->_view_output($output);
	}

Here's the "GetDrop.php"

<?php 
session_start();
class GetDrop extends MY_Controller {	
 	public function index()
		{
			$_SESSION['dropval'] =  $_GET['drop'];
		}		
	}		
?>

Sorry to disturb... I hope I do not annoy you... but you're my only hope now... Thank you very much! 

[victor]

why dou you do that:

1) remove options
$("#field-Functions").find("option").remove();       - good  
 

2) add new options into ... into the div...

$("#Function_field_box").load(" #field-Functions"); - ?
options are <options>

[larasmith]

And here's my tables and sample data:

[larasmith]

why dou you do that:

1) remove options
$("#field-Functions").find("option").remove();       - good  
 

2) add new options into ... into the div...

$("#Function_field_box").load(" #field-Functions"); - ?
options are <options>

1) Is ok?   :)

2) That is the code that I used to load the data from the "getdrop.php"... Is there any other method to do so?

[victor]

select is :
<select d=field-Functions>

<option>1</option>
<select>
you need to remove options:

$("#field-Functions").find("option").remove();  

 

<select id=field-Functions>

</select>

 

Then you need to add new options into the select. Do not replace <select>!!! the options only!

$("#Function_field_box"). - does your select has id="Function_field_box"?
no your select has id="field-Functions" 

Look at your code.

explain each of these rows:

1) $("#field-Functions").find("option").remove();        
2)  $("#Function_field_box").load(" #field-Functions");
3)  $("#Function_field_box").trigger("liszt:updated");

 

 

 

[larasmith]

select is :
<select d=field-Functions>

<option>1</option>
<select>
you need to remove options:

$("#field-Functions").find("option").remove();  

 

<select id=field-Functions>

</select>

 

Then you need to add new options into the select. Do not replace <select>!!! the options only!

$("#Function_field_box"). - does your select has id="Function_field_box"?
no your select has id="field-Functions" 

Look at your code.

explain each of these rows:

1) $("#field-Functions").find("option").remove();        
2)  $("#Function_field_box").load(" #field-Functions");
3)  $("#Function_field_box").trigger("liszt:updated");

 

 

 

1) $("#field-Functions").find("option").remove();     -  #field-Functions is the name of the "select" from here:

  

<select id="field-Functions" name="Functions[]" multiple="multiple" size="8" class="multiselect" data-placeholder="Select Functions" style="display: none;"><option value="3" selected="selected">CMT F1: Navigation at the Operational Level</option><option value="6">CMT F2: Cargo Handling and Storage at the Operational Level</option><option value="9">CMT F3: Controlling the Operation of the Ship and Care for Persons on Board at the Operational Level</option><option value="11">Allied (Deck)</option></select>

2)  $("#Function_field_box").load(" #field-Functions"); - this is the div that holds the "select" called " #field-Functions I re-load it so that the values of the "select" is updated....

I did remove this line though...

3)  $("#Function_field_box").trigger("liszt:updated"); - I changed this to $("#field-Functions").trigger("liszt:updated");

 

By the way how can i properly retrieve the dependent via ajax? Also how can I properly append it? As I tried to use $("#field-Functions").find("option").remove();  Nothing happens....

 

Thank you for your time and patience! 

[larasmith]

Finally I get this to work! :)  I just hope someone find this solution also useful for them...  :lol:

HERE IS THE SOLUTION:

1. Get dependent items using ajax/jquery:

    Create a CONTROLLER that creates/receives the needed output based on the selected value on the drop down. I placed it on the same file that contains the controller that generates my datagrid. The file name is: "ctrl_gcrud.php"

public function get_funct_by_prog($progID)
	{
	$mysqli = new mysqli("localhost", "USERNAME", "PASSWORD ", "DBNAME");
	$result = $mysqli->query("SELECT * FROM tblfunction WHERE funct_prog_id ='".$progID."'");		

	while($row_funct = mysqli_fetch_array($result))
	{
             echo "<option value='".$row_funct['funct_id']."'>".$row_funct['funct_Name']."</option>";
	}
}

2. Create a callback inside the same controller: "ctrl_gcrud.php". This call back is responsible for the following:

    a. Delete all elements from the multi-select: $("#field-Functions").find("option").remove();

    b. Add new elements in the multi-select: $("#field-Functions").html($response.responseText);

    c. Refresh "choosen select" plugin: $("#field-Functions").trigger("liszt:updated"); and $(".remove-all").trigger("click");

   Here is the code for the working callback:

	function tos_CBae_selFunc()
	{         		
		return '
			<script type="text/javascript">
				$(document).ready(function(){
					$("#secret_field_box").hide();
					$("#field-tos_prog_id").change(function() {
						var progID = $("#field-tos_prog_id").val();  
								$(".remove-all").trigger("click");
							     $.ajax({
							         "url" :  "http://localhost/OCGA/ctrl_gcrud/get_funct_by_prog/"+ progID,      
							         "cache" : true,
							         "beforeSend" : function (){
							              //Show a message
							         },
							         "complete" : function($response, $status){
							             if ($status != "error" && $status != "timeout") {
							             	$("#field-tos_qry").find("option").remove();
							                $("#field-tos_qry").html($response.responseText);
							                $("#field-tos_qry").trigger("liszt:updated");
							                 
							             	$("#field-Functions").find("option").remove();
							                $("#field-Functions").html($response.responseText);
							                $("#field-Functions").trigger("liszt:updated");	
							                $(".remove-all").trigger("click");						                 
							             }
							         },
							         "error" : function ($responseObj){
							             alert("Something went wrong while processing your request.\n\nError => "
							                 + $responseObj.responseText);
							         }
							     }); 
					})	
				})									
			</script>			
			' ;				
	}

3. This is the controller that generates my datagrid: Notice the lines of code that is used to make our callback work.And here is the successful desired output:

	public function tos()
	{	
 		/*Create ajax_grocery_CRUD instead of grocery_CRUD. This extends the functionality with the
 		 field_set_defaults keeping all functionality as well (I extended this to grocery_CRUD)*/
 				
		$crud = new ajax_grocery_CRUD();
		
		// Set theme
		$crud->set_theme('datatables');		

		// Set table name
		$crud->set_table('tbltos'); 
						
		// Set this name instead of 'Record' in prompt
		$crud->set_subject('Table of Specification');
				
		//* These displays custom name instead of field name in columns						
		$crud->display_as('tos_prog_id','Program');
		$crud->display_as('tos_course_DescTitle_id','Descriptive Title');
		$crud->display_as('tos_course_RefNo_id','Reference No.');			
		$crud->display_as('tos_course_Title_id','Title');
		$crud->display_as('tos_lo_name_id','Learning Objective');
		$crud->display_as('tos_topic_name_id','Topic');
		$crud->display_as('tos_sem_id','Semester');
		$crud->display_as('tos_qtype_id','Question Type');
		$crud->display_as('tos_coglvl_id','Cognitive Level');
		$crud->display_as('tos_diffindex_id','Difficulty Index');
		$crud->display_as('tos_encoder_id','Encoder');
		$crud->display_as('tos_reviewed_id','Reviewed');
		$crud->display_as('tos_remarks_id','Remarks');
		$crud->display_as('tos_status_id','Status');
		$crud->display_as('tos_published_id','Published');
		$crud->display_as('tos_PilotTest_id','Pilot Tested');		
		//*	

                // Sets relation with dependent dropdown list (Program->Function)
                $crud->set_relation('tos_prog_id','tblprogram','prog_Name');

   		// Sets function (this must be dependent on the program)
         	$crud->set_relation_n_n('Functions', 'tbltos_funct', 'tblfunction', 'tos_id', 'funct_id', "{funct_Name}", 'priority');

		// This is the set of code for using the callback -*begin ppp
		$f=array'secret','tos_id','tos_assmntype_id','tos_prog_id','Functions','tos_sem_id','tos_qtype_id','tos_remarks_id','tos_reviewed_id','tos_status_id','tos_published_id','tos_PilotTest_id','tos_qry','tos_ctr','tos_need'); $crud->add_fields($f); $crud->edit_fields($f); $crud->callback_add_field('secret',array($this,'tos_CBae_selFunc')); $crud->callback_edit_field('secret',array($this,'tos_CBae_selFunc')); // -*end        

		// Sets dropdown list (Semester)
		$crud->set_relation('tos_sem_id','tblsem','Sem');

		// Sets dropdown list (QType)
		$crud->set_relation('tos_qtype_id','tblqtype','QType');

		// Sets dropdown list (Remarks)
		$crud->set_relation('tos_remarks_id','tblqrem','qrem_Name');

		// Sets dropdown list (Status)
		$crud->set_relation('tos_status_id','tblstatus','status_Name');

		// Sets dropdown list (Reviewed bool)
		$crud->set_relation('tos_reviewed_id','tblbool','bool_value');

		// Sets dropdown list (Published bool) then turn it as default value as text
		$crud->set_relation('tos_published_id','tblbool','bool_value');

		// Sets dropdown list (PilotTest bool) then turn it as default value as text
		$crud->set_relation('tos_PilotTest_id','tblbool','bool_value');

		//Removes the print feature $crud->unset_print();

		//**** These displays the output in the page
		$output = $crud->render();
		$this->_view_output($output);
	}

 

Special thanks to the hints provided by none other than the grocery CRUD Hero himself: Sir Victor... It took me almost a month to get it though... I just hope this helps someone too.... This method is also tested working in multiselect created by using this code:

   	$this->db->select('funct_id, funct_Name');
	$results = $this->db->get('tblfunction')->result();
	$funct_multiselect = array();
	foreach ($results as $result) {
    	$funct_multiselect[$result->funct_id] = $result->funct_Name;
	}
	$crud->field_type('tos_qry', 'multiselect', $funct_multiselect); 

Here is what it looks like:

 

Happy GCng!  :D

[holmesii]

Helpful, mark!