jeditable drop down list data dependant on other columns

jagdipa

I have a javascript array that is bound to a datatable, and I use jEditable to edit this. Within this table, I have two columns, lets call them Continent and Country. These columns both contain drop down lists.

Obviously, I want the Country to filter according to the selected Continent. Now, I've managed to get this working for the first time the user selects the Continent and then the Country. My problem is that when the user then changes the Continent, the Country list is not changed. It remains the same list for the Continent that the user first selected.

Here is the code I have so far. I'm guessing I need to somehow destroy the original data first. How do I do this?


$('#htaTableBind tbody .editSelectCountry').click( function() {
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
var ID = aData['ID'];
var i = findJSONIndex(ID);
var data = getCountryDataAccordingToContinent(_htaItems[i]['continent']);
$(this).editable(function (value, settings) {
var columnName = tableData[aPos[2]]['mDataProp'];
updateJSON(ID, columnName, value);
return (value);
}, {
"callback": function (sValue, y) {
oTable.fnDraw();
},
/*data : _fm,*/
data : data,
type : 'select',
placeholder: "",
onblur: 'submit'
});
});

jagdipa

Okay, so the only solution I have found so far is to unbind the click event, and then rebind it.

I'm hoping there is another way.