Cascading selects

jmguillen

Hi Allan,
I need a solution on Editor to be able to select the options that depend on other select fields.
The same as discussed here: http://datatables.net/forums/discussion/15375#Item_15

We managed to do that (the code is there) it works as expected and is fine for new rows as you always start by selecting the most general select item and that modifies the contents of less general ones. Everything's fine.

It also works for editing but the problem is that the fields from the table are not selected on the editor form.

Here the code we are using:

[code]


var editor_group_perms_grid;

$(document).ready(function () {
editor_group_perms_grid = new $.fn.dataTable.Editor({
"ajaxUrl": "Backend/DataTables/Edit.php",
"domTable": "#group_perms_grid",
"dbTable": "",
"fields": [],

"events": {
"onPreSubmit": function (data) {
data["process"] = "ggear_grid_security_groups";
data["module"] = "core";
data["panel"] = "security";
data["application"] = "GGEAR";
data["binds"] = ["#ID","_NAME","_APP_NAME","_DESCRIPTION"];

}
}
});

function editor_group_perms_grid_APP_NAME_data(operation_type) {
$.ajax({
url: "Backend/DataTables/Options.php",
type: "post",
data: {
module: "core",
panel: "security",
application: "GGEAR",
table: "gg_applications",
field1: "id",
field2: "app_name"
},
async: false
}).done(function (response, textStatus, jqXHR){
if(operation_type === "add") {
editor_group_perms_grid.add({
"type": "select",
"label": "Application:",
"name": "APP_NAME",
"ipOpts": response.data
});
}

if(operation_type === "update") {
editor_group_perms_grid.field("APP_NAME").update( response.data );
}
});
}

editor_group_perms_grid_APP_NAME_data("add");

function editor_group_perms_grid_GROUP_NAME_data(operation_type) {
$.ajax({
url: "Backend/DataTables/Options.php",
type: "post",
data: {
module: "core",
panel: "security",
application: "GGEAR",
table: "gg_groups",
field1: "id",
field2: "name", filter: "app_id = " + editor_group_perms_grid.get("APP_NAME")},
async: false
}).done(function (response, textStatus, jqXHR){
if(operation_type === "add") {
editor_group_perms_grid.add({
"type": "select",
"label": "Group:",
"name": "GROUP_NAME",
"ipOpts": response.data
});
}

if(operation_type === "update") {
editor_group_perms_grid.field("GROUP_NAME").update( response.data );
}
});
}

editor_group_perms_grid_GROUP_NAME_data("add");

function editor_group_perms_grid_MODULE_NAME_data(operation_type) {
$.ajax({
url: "Backend/DataTables/Options.php",
type: "post",
data: {
module: "core",
panel: "security",
application: "GGEAR",
table: "gg_auth_modules",
field1: "id",
field2: "module_name", filter: "app_id = " + editor_group_perms_grid.get("APP_NAME")},
async: false
}).done(function (response, textStatus, jqXHR){
if(operation_type === "add") {
editor_group_perms_grid.add({
"type": "select",
"label": "Module:",
"name": "MODULE_NAME",
"ipOpts": response.data
});
}

if(operation_type === "update") {
editor_group_perms_grid.field("MODULE_NAME").update( response.data );
}
});
}

editor_group_perms_grid_MODULE_NAME_data("add");

function editor_group_perms_grid_PANEL_NAME_data(operation_type) {
$.ajax({
url: "Backend/DataTables/Options.php",
type: "post",
data: {
module: "core",
panel: "security",
application: "GGEAR",
table: "gg_auth_panels",
field1: "id",
field2: "panel_name", filter: "module_id = " + editor_group_perms_grid.get("MODULE_NAME")
},
async: false
}).done(function (response, textStatus, jqXHR){
if(operation_type === "add") {
editor_group_perms_grid.add({
"type": "select",
"label": "Panel:",
"name": "PANEL_NAME",
"ipOpts": response.data
});
}

if(operation_type === "update") {
editor_group_perms_grid.field("PANEL_NAME").update( response.data );
}
});
}

editor_group_perms_grid_PANEL_NAME_data("add");

editor_group_perms_grid.add({"label":"Description:","name":"DESCRIPTION"});


$("select", editor_group_perms_grid.node("APP_NAME")).on("change focus", function () {
editor_group_perms_grid_GROUP_NAME_data("update");
});

$("select", editor_group_perms_grid.node("APP_NAME")).on("change focus", function () {
editor_group_perms_grid_MODULE_NAME_data("update");
});

$("select", editor_group_perms_grid.node("MODULE_NAME")).on("change focus", function () {
editor_group_perms_grid_PANEL_NAME_data("update");
});
});


[/code]

This code is generated dynamically from PHP as we have a helper PHP class to make the Javascript for DataTables.

We think the approach to make it work would be to recreate the entire edit form on every edition or something like that
as the values are not present on the selects data when the form starts.

I hope I made my self clear with what the problem is.

Any clues?
Any help with where to start would be great.

Thank you,
Juan Martín