[kuaskada]

Hi Amit!

 

I've changed the "set_relation_dependency" but i got the same result. Subcategory can be selected always and if a product category is selected you can select all the subcategories.

 

I'm using GC 1.4.1 and I downloaded the library published by you (Posted 21 August 2013 - 5:13 PM).

 

Thanks a lot.

[Amit Shah]

well practically.. this should work. Check in the firebug / console for the result returned.. the parameters should be properly configured. If mis-configured it is possible to have problem.

[kuaskada]

Hi!!

 

 

The result in the console:

 

[attachment=796:salida_consola.jpg]

 

 

e.fn.init[1]:

 

[attachment=797:efninit.jpg]

 

 

My tables:

 

Categorías:

 

id_categoria; nombre_categoria;

 

1; Surf

2; Bodyboard

3; Ropa

4; Complementos

 

 

 

Subcategorias:

 

id_subcategoria; nombre_subcategoria; id_categoria_subcategoria

 

1; Tablas de surf; 1

2; Trajes; 1

3; Otros; 1

4; Tablas de bodyboard; 2

5; Aletas; 2

6; Escarpines; 2

7; Licras; 2

8; Calzado; 3

9; Relojes; 4

10; Gorras; 4

 

 

 

I selected the category "4" (complementos), and the images are the result in the console. 

 

In e.fn.init[1]:

 

1. id: "field-subcategoria_producto"
   innerHTML: "<option value=""></option><option value="9">Relojes</option><option value="10">Gorras</option><option value=""></option>"
   innerText: "RelojesGorras"

Relojes (watches) and gorras (caps) are the correct subcategories for that category, but i can select all options on the second dropdown (subcategorias).

 

Best regards and thank you very much.

 

[Amit Shah]

Well friend - i believe jquery 1.10 and jquery.chosen is having some merger trouble.. i rather use chose.jquery.min (v 1.0) .. an upgrade to v 0.9.8 of jquery.chosen.. try this .. it might help u solve yr trouble..

 

of course u need to also upgrade the css

[kuaskada]

Yesssss!!!!!! yes yes yes!!!!

 

[attachment=798:funciona_dependant_dropdown.jpg]

 

 

I thought it was impossible for me, but now it's working perfect. I can't believe it yet...

 

 

If I delete the old library (jquery.chosen.min.js), the console return a warning because it can't find that library... Is this normal?

 

Thank you again... 

 

 

[kuaskada]

Hi again!

 

I have a new problem with the dependant dropdown. For adding elements works really nice, but when i try to edit one of them, I have the same error... I can select all the options on the second dropdown, and if the first dropdown is empty, I can select all options on the second too.

 

If I select some category and I try select a subcategory:

If category has 3 subcategories, i can only select 4 elements (subcategories + 1).

For example, if i select the category "complementos" (it has 2 subcategories, "gorras" y "relojes"...):

I can choose all the options:

[attachment=800:aparece_todo.jpg]

 

I can select three subcategories (aletas, calzado y camisetas). If I try select another subcategory, the console return:

[attachment=801:consola_edit_form.jpg]

 

 

When I delete the library "jquery.chosen.min" in the folder "jquery_plugins", in the edit form (the add form is right):

 

[attachment=799:dropdown_sin_formato.jpg]

 

 

Thanks!!

Sorry for my english :(.

[larasmith]

 

@bukky

 

Please change trigger('chosen:updated') to  trigger("liszt:updated") on function 'render_relation_dependency' in  ajax_grocery_crud.php file

 

 

private function render_relation_dependency($target_field, $source_field, $relation_field_on_source_table){


$sourceElement = "'#field-$source_field'";
$targetElement = "'#field-$target_field'";


$js_text = "
$(document).ready(function() {
$($targetElement).attr('disabled', true).trigger('liszt:updated');
$($sourceElement).change(function() {
$($targetElement).attr('disabled', false).trigger('liszt:updated');
var selectedValue = $($sourceElement).val();
if(selectedValue == '') {
$($targetElement).val('');
$($targetElement).attr('disabled', true).trigger('liszt:updated');
}
//alert('selectedValue'+selectedValue);
//alert('post:'+'ajax_extension/$target_field/$relation_field_on_source_table/'+encodeURI(selectedValue.replace(/\//g,'$this->slash_replacement')));
$.post('ajax_extension/$target_field/$relation_field_on_source_table/'+encodeURI(selectedValue.replace(/\//g,'$this->slash_replacement')), {}, function(data) {
var \$el = $($targetElement);
 var newOptions = data;
 \$el.empty(); // remove old options
 console.log(\$el);
 console.log('Emptied up the elements');
 \$el.append(\$('<option></option>').attr('value', '').text(''));
 \$.each(newOptions, function(key, value) {
   \$el.append(\$('<option></option>')
      .attr('value', key).text(value));
   });
 //\$el.attr('selectedIndex', '-1');
 \$el.chosen().trigger('liszt:updated');


        },'json');
        $($targetElement).change();
});
});
";


$this->inline_js($js_text);


}

I think this will solve your problem

 

This solution worked for me too! Thanks to all active people here like you!

[larasmith]

I have a question... The current drop down list that it produces is a single drop down list.... Can it do a multiple select? If so... how can we do it? Please show an example... Thanks in advance!

[mainlord]

Hi all,

 

First of all, Nice component!

 

I have inplemented it into my test aplication and it works correctly in almost all mine aplication.

 

The problem comes when i have to use a double dependant dropdown. Yes, i know this is a simple dependant dropdown.

 

Do you have any solution to upgrade this component into a "x dependant dropdown extension", or do you have any solution useless for this case?

 

Table board

idboard - Int - Primary key

idtype - Int

idcatering - Int

idmenu - Int

 

Table type

idtype - Int - Primary key

nametype - Varchar

 

Table catering

idcatering - Int - Primary key

namecatering - Varchar

 

Table menu

idmenu - Int - Primary key

idtype - Int

idcatering - Int

namemenu - Varchar

 

i need a dropdown for Menu table, relationed with the dropdowns of the tables type, and catering. all the data will be stored into the table Board.

 

 

 

Thanks in advanded.

 

 

PD: As Celia Cruz said, my english is not very good looking!

[slayer266]

Hi, I'm trying to use that extensions, but there is something that I don't get it:

I have companies, markets and operations: markets are like DOW-JONES, IBEX-35. And companies are the companies it belongs. Finally operations have it all.

So I want when user adds an operation, he selects the dropdown market, and then the second dropdown companies only shows the companies it belongs... this extension is for that isn't it?

 

I tried this:

 

$crud->set_relation_dependency('id_company', 'id_market', 'id');

 

 

My structure:

companies: (id, id_market, name)

markets: (id, name)

operations: (id, id_market, id_company)

 

What am I doing wrong?

 

Ty.

[Amit Shah]

well can u explain your scenario - what is dependant on what? then we might be able to give some solution for the same.

[slayer266]

I thought I explained aswell....

 

Look my operations form:

 

 

That is when an user wants to add an operation, if he clicks the company dropdown directly (Empresa, the second dropdown) it will show ALL companies and its not good...

So I want that the user selects first the market (Mercado, first dropdown) and when he selects a market, then when he cicks the company dropdown, it will show ONLY the companies they belong to the selected market.

[Amit Shah]

Well this if i am not mistakened - this one you talking about i edit and not add. I do understand the situation - i faced it mysef. Even for add - it just shows all the entries at the first instance.. This has been a drawback of the plugin but fortunately i found a way around for the same.

 

i have had the same scenario for add / edit drop down dependency for country / state / city

 

i am sharing u my piece of code - it might help u understand a solution for the same

$crud->set_relation('country', 'countries', 'country_name');				
		$segments = $this->uri->segments;
		$segmentFound = false;
		foreach($segments as $num => $value) {
			if($value == 'ajax_extension') {
				$segmentFound = true;
				break;
			}
		}
		if($segmentFound) {
			$crud->set_relation('city', 'cities', 'city_name');
			$crud->set_relation('state', 'states', 'state_name');
		} else {
			if($crud->getState() == 'edit') {
				//$pk = $crud->getStateInfo()->primary_key;
				//$row = $this->cModel->getByField('retailers', 'rid', $pk);
				if($curRow['country'] != '') {
					$allstates = $this->cModel->getAllFor('states', 'country_code', $curRow['country']);
					$states = array('1'=>'select state');
					foreach ($allstates as $state) {
						$states[$state['state_code']] = $state['state_name'];
					}
				}
				
				$state_code = $curRow['state'];
				if($state_code != '') {
					$allcities = $this->cModel->getAllFor('cities', 'state_code', $state_code);
					$cities = array('1'=>'select city');
					foreach ($allcities as $city) {
						$cities[$city['city_code']] = $city['city_name'];
					}
				} else {
					$cities = array('1'=>'select city');	
				}
				
				if($curRow['country'] == '') {
					$cities = array('1'=>'select state');
				}
			} else {
				$cities = array('1'=>'select city');
				$states = array('1'=>'select state');
			}
			$crud->field_type('city', 'dropdown', $cities);
			$crud->field_type('state', 'dropdown', $states);
		}

[Dogtooth]

Hi all, hi Amit,

Thank you for this nice example. It would be really helpful for beginners like me, if you could add the basic table structure. I still struggle to deduce it from the script.

When I create tables with country, states and cities, I would do it like this:

 

[attachment=861:tables.PNG]

 

But after working with Grocery for a week I have the impression that such chained relations are troublesome.

[Amit Shah]

Well my friend ...

 

the table structure was the same that i followed with additional table for retailers where in that i had country, state, city (didnt go with id but names instead) .. did it for purpose - u may stick with ids.

 

The main purpose with above was that when the form gets loaded for edit ... what it dose is loaded all the countries (thats fine) ...

not just that - it also loaded all states / cities (now thats sad ... this was not required here). Even if it would like to rebuild the dropdowns with exact expected values

it would have had to make calls based on the selections and proceed further accordingly.

Well anyways - the point here what i worked out for was .. when it is loading in case of add - for first time (apart from country) we dont need to populate any data for dropdowns.

In case of edit - what we actually want to do  - we just want to load up the state / cities based on the dependant selection.

 

That is exactly what the example above - what i shared up with.

 

Happy GCing :)

[denitriyandi]

i got blank ...  :( i'm wrong?

[wdj]

Hi,

    Thanks for sharing first ^^ 

the dependant dropdown works good! but I get this error on Firefox : SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 259 of the JSON data  when I click save and back to list.  it stays in edit page not going back to list page .

why ?  if I use back to grocery_CRUD , it's ok . So... It seems to having somewhere error on ajax_grocery_CRUD library ?

 

by the way , on Chrome the error is :  Uncaught SyntaxError: Unexpected token <

and it did update data.

 

Thanks for advance ^^  

Have a nice day

[Amit Shah]

hi there

 

this might be a possibility with some of the ajax response where the call might be flushing out some warnings and all...

either resolve that warning

or change the mode from development to prodution

 

that should do the trick

[wdj]

hi there

 

this might be a possibility with some of the ajax response where the call might be flushing out some warnings and all...

either resolve that warning

or change the mode from development to prodution

 

that should do the trick

hi, thanks for advice 

one way is change the mode from development to prodution :  but It is prodution mode  ....

resolve that warning ... could you give me more detail please ^^

and .... Only I got this problem ?

[Bill]

Hello .
I had the same problem of our friend WDJ , to a new record it works perfectly , but when I edit the GC JS should return the listing hangs and does not redirect .

I identified a problem with the $ this- > inline_js ( $ js_text ) ;
As a newbie commented solution
 

// $ this-> inline_js ( $ js_text ) ;

After I commented disponibilizei all Jquery direct view on the footer.

Thereby :

private function render_relation_dependency($target_field, $source_field, $relation_field_on_source_table){

		$sourceElement = "'#field-$source_field'";
		$targetElement = "'#field-$target_field'";
		
		$js_text = "
			$(document).ready(function() {
				//$($targetElement).attr('disabled', true).trigger('liszt:updated');
				$($sourceElement).change(function() {
					$($targetElement).attr('disabled', false).trigger('liszt:updated');
					var selectedValue = $($sourceElement).val();
					if(selectedValue == '') {
						$($targetElement).val('');
						$($targetElement).attr('disabled', true).trigger('liszt:updated');
					}
					//alert('selectedValue'+selectedValue);
					//alert('post:'+'ajax_extension/$target_field/$relation_field_on_source_table/'+encodeURI(selectedValue.replace(/\//g,'$this->slash_replacement')));
					$.post('ajax_extension/$target_field/$relation_field_on_source_table/'+encodeURI(selectedValue.replace(/\//g,'$this->slash_replacement')), {}, function(data) {
					var \$el = $($targetElement);
						  var newOptions = data;
						  \$el.empty(); // remove old options
						  console.log(\$el);
						  console.log('Emptied up the elements');
						  \$el.append(\$('<option></option>').attr('value', '').text(''));
						  \$.each(newOptions, function(key, value) {
						    \$el.append(\$('<option></option>')
						       .attr('value', key).text(value));
						    });
						  //\$el.attr('selectedIndex', '-1');
						  \$el.chosen().trigger('liszt:updated');

    	  			},'json');
    	  			$($targetElement).change();
				});
			});
			";

//		$this->inline_js($js_text);

	}

View:

<body>
...
...




<script>
$(document).ready(function() {
				//$('#field-iddisciplinas').attr('disabled', true).trigger('liszt:updated');
				$('#field-idcursos').change(function() {
					$('#field-iddisciplinas').attr('disabled', false).trigger('liszt:updated');
					var selectedValue = $('#field-idcursos').val();
					if(selectedValue == '') {
						$('#field-iddisciplinas').val('');
						$('#field-iddisciplinas').attr('disabled', true).trigger('liszt:updated');
					}
					//alert('selectedValue'+selectedValue);
					//alert('post:'+'ajax_extension/iddisciplinas/idcursos/'+encodeURI(selectedValue.replace(/\//g,'_agsl_')));
					$.post('ajax_extension/iddisciplinas/idcursos/'+encodeURI(selectedValue.replace(/\//g,'_agsl_')), {}, function(data) {
					var $el = $('#field-iddisciplinas');
						  var newOptions = data;
						  $el.empty(); // remove old options
						  console.log($el);
						  console.log('Emptied up the elements');
						  $el.append($('<option></option>').attr('value', '').text(''));
						  $.each(newOptions, function(key, value) {
						    $el.append($('<option></option>')
						       .attr('value', key).text(value));
						    });
						  //$el.attr('selectedIndex', '-1');
						  $el.chosen().trigger('liszt:updated');

    	  			},'json');
    	  			$('#field-iddisciplinas').change();
				});
			});    
</script>
</body>
</html>   

I know that this solution is fixed and not flexible , but it was the exit to make the system work to find a solution to the underlying code.

If you can give a solution to the problem because the chouse.js this conflicts with the js.1.11.1.min.js and the script needs to be at the end of the page code. Maybe call along with the main js GC .

Tanks!