filter sub select drop down menu by main one

hanyelbana

Hi,
I have made 2 select list
here:

[code]
$( 'select', editor.node( 'country_id' ) ).on( 'change', function () {
editor.field( 'town_id' ).update( json.towns );
} );
[/code]

I want to make (json.towns) filtered by country_id. How can I do that?

Thanks

allan

It looks like you are most of the way there already :-). You just need to loop over json.towns and filter it down to what you want:

[code]
var towns = $.map( json.towns, function ( town, i ) {
if ( town.name === 'Edinburgh' ) {
return town;
}
return null;
} );

editor.field( 'town_id' ).update( towns );
[/code]

Something like that I think. You could use a simple `for` loop if you prefer.

Regards,
Allan

hanyelbana

Thanks it works now.

[code]
$( '#ToolTables_faculties_1' ).on( 'click', function () {

var towns = $.map( json.towns, function ( town, i ) {
if ( town.country_id == editor.get('country_id') ) {
return town;
}
return null;
} );

editor.field( 'town_id' ).update( towns );
} );
[/code]

but first with Edit :

editor.field( 'town_id' ).update( json.towns );

makes the list select the selected town, but now the list select the first town on the list.

Thanks

hanyelbana

I think that because the array index changed.
Is there another way to make drop down list select the stored town from datatable like first?

Thanks

allan

Ah okay - you probably want to do something like this in that case:

[code]
var current = editor.get( 'town_id' );
editor.field( 'town_id' ).update( towns );
editor.set( 'town_id', current );
[/code]

The update function should actually do that - but it might be worth trying it explicitly as per the above code, just to check. If not, then `console.log( current )` might show what is going on.

Allan

hanyelbana

With my code, when select a row and edit it, the town dropdown select the first one not the current.
When I close the edit window and select the same row again, the town dropdown select the current town good and continue good with another towns for the same country, but if I select another country towns it return to select the first one in the list.

When I trace that with console.log(editor.get('town_id') ). I get that the reason in wrong value returned make the list return to the first option. The wrong value add the number of the options in last selection sometime and subtract this number sometime.

When I using
editor.field('town_id').update( json.towns );
without filtering for towns, it working good

Is there any thing to correct in my code. Because I will duplicate this code a lot in the project.

[code]

var editor;

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": {
"create": "faculties",
"edit": "PUT faculties/_id_",
"remove": "DELETE faculties/_id_"
},
"domTable": "#faculties",
"dbTable": "faculties",
"idSrc": "id",
"fields": [
{
"label": "country_id:",
"name": "country_id",
"type": "select"
},
{
"label": "town_id:",
"name": "town_id",
"type": "select"
},
{
"label": "name:",
"name": "name"
}
],
@include('layout.editortranserror')
"events": {

"onPreSubmit": function ( o ) {
if ( o.data.name === "" ) {
this.error('name', 'fill name');
return false;
}
}
}

} );


$('#faculties').dataTable( {
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sAjaxSource": "faculties/create",
"sAjaxDataProp": "faculties",
"aoColumns": [
{ "mData": "id" },
{ "mData": "country" },
{ "mData": "town" },
{ "mData": "name" }
],
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
},

"fnInitComplete": function ( settings, json ) {

editor.field('country_id').update( json.countries );

$( '.btn' ).on( 'click', function () {

var towns = [];
towns = $.map( json.towns, function ( town, i ) {

if ( town.country_id == editor.get('country_id') ) {

return town;
}
return null;
} );

editor.field( 'town_id' ).update( towns );

} );

$( 'select', editor.node( 'country_id' ) ).on( 'change', function () {

var towns = [];
towns = $.map( json.towns, function ( town, i ) {

if ( town.country_id == editor.get('country_id') ) {

return town;
}
return null;
} );

editor.field( 'town_id' ).update( towns );

} );

},

@include('layout.editortrans')
} );

} );

[/code]

hanyelbana

editor.get and editor.set get the same wrong result because the list get options with on click.

hanyelbana

Hi,

I get it:

editor.field( 'town_id' ).update( towns );

update function put the new country towns over the last selected country towns which fill the select options, when I try to add :

editor.field( 'town_id' ).update( null );

to empty the select option it not work correct.

Is there any idea to solve that?

allan

I'm a little confused I'm afraid. I would be really helpful if you could link me to the page you are working on so I can see it in action.

Is the problem that when you filter the `town_id` field, that the previously selected value is no longer available in the list? Or is it in the list and not being automatically selected when you update the field?

Allan

hanyelbana

When I loop with $.map for get towns related to one country, the towns list come with correct value for first time, but if I choose another country the towns comes with wrong value like adding the number of last towns number to the current towns value and that makes the list return to the first item not the current one.

[code]
$( '.btn' ).on( 'click', function () {

var towns = [];
towns = $.map( json.towns, function ( town, i ) {

if ( town.country_id == editor.get('country_id') ) {

return town;
}
return null;
} );

editor.field( 'town_id' ).update( towns );

} );
}
[/code]

allan

Is the currently selected value in the list when you change country? For example - let's assume you have data such as:

[quote]
UK - Bristol
UK - Edinburgh
UK - London
UK - Manchester
France - Lyon
France - Paris
France - Tours
[/quote]

If you have 'UK' selected, then the town's list will be Bristol, Edinburgh, London and Manchester. Let's assume that 'Edinburgh' is selected for the town.

Then you change the country to 'France'. The town list will update to Lyon, Paris and Tours.

"Edinburgh" is not in the town list so it can't be reselected after the update.

Is that what is happening, or am I missing something?

Thanks,
Allan

hanyelbana

Ok,
"Edinburgh" is selected correct but when I close the modal editor window and return to datatables and select France - Paris to edit it , Lyon appears on towns list not Paris.

allan

Ah - okay I think I might understand the issue. What I think is happening is that when the editing window is opened for "France", the towns list is still pre-selected for the UK option - so "Paris" isn't in the list at that time and thus the value can't be pre-selected. Then you call the update function and the UK options aren't present, so the first value in the list is selected - Lyon in this case.

So what I think the solution is, is to set the town id after the initial values have been set:

[code]
editor.on( 'onInitEdit', function () {
var data = $(this.s.domTable).dataTable()._( this.s.editRow )[0];
this.set( 'town_id', data.town_id );
} );
[/code]

That will get the data for the row being edited and then set the value of the town id to the data for that row.

Its a non-obvious solution to the issue. Based on this, I'm going to add a few little features to v1.3 which will make this kind of thing much easier.

If you could let me know if this works for you (or not) that would be great.

Thanks,
Allan