How can Hide Selected Value from Cascading Drop-Down List with AJAX Dependency
Hi Team I have a form with a spreasheet whith two fields that work with cascading Drop down dependency between thems Spreadsheet Cascading Drop-Down List , in other hand I'm trying to hide values to avoid duplicates in the second column as explain this note Spreadsheet Hide Selected Value from Cascading Drop-Down List , but I doesn't working , it work very well only if I use it in the first column .
I suspect that the problem is becuase the second field type DropDown has a AJAX and the behavior is different to the first field type DropDown without dependency.
Debugging the JS code I note this:
- I get the error message Uncaught TypeError: data.source.indexOf is not a function
at removeSource (
2. The source variable which store the values from the column number 1 have this values :
function(query,process){var selected=hot.getSelected()[0];var row=selected[0];var col=selected[1];var meta=hot.getCellMeta(row,col);var o=meta.ajaxSourceOptions;var cf=o.OPTIONS_AJAX_CONTROL_FIELD.split(";");var cv="";for(var i in cf){if(cv!==""){cv+=";";}
cv+=hot.getDataAtRowProp(row,cf[i]);}
if(meta.ajaxControlValue===cv){var labels=[];for(var i=0;i<meta.keyOptions.length;i++){labels.push(meta.keyOptions[i].label.trim());}
process(labels);}else{$.getJSON(args.contextPath+"/web/json/app/"+o.OPTIONS_AJAX_APP_ID+"/"+o.OPTIONS_AJAX_APP_VERSION+"/form/options",{_dv:cv,_n:o.OPTIONS_AJAX_NONCE,_bd:o.OPTIONS_AJAX_BINDER_DATA},function(data){var labels=[];var keyOptions=[];for(var i=0,len=data.length;i<len;i++){labels.push(data[i].label.trim());keyOptions.push({value:data[i].value,label:data[i].label.trim()});}
hot.setCellMeta(row,col,"ajaxControlValue",cv);hot.setCellMeta(row,col,"keyOptions",keyOptions);process(labels);});}}
This is the JS code:
<script type="text/javascript">
$(function(){
var orig_pool = []; // we will keep a copy of "removed" element for restoring later
var hot = FormUtil.getField("lista_deproductos").data("hot");
console.log(hot);
source = hot.getSettings()['columns'][1]['source']; // we get all the dropdown option from column #1 of the table ("Continent"), call it "source"
console.log("Fisrt Source: " + source);
hot.addHook('afterChange', function(change,type){ // set a hook / event listener to trigger after any change on the table
if(type == 'edit'){ // if the change type is of type "edit", we proceed
data = { // prepare the data object
source : source,
change : change,
orig_pool : orig_pool
}
if(change[0][3] != ''){ removeSource(data); } // if the changed value is not empty, we remove the data from the "source"
else{ addSource(data); } // otherwise, the change value is empty, meaning it is removed from the table
// we need to add it back to the "source"
//console.log("Source: " + source);
}
})
})
function removeSource(data){
slice_index = data.source.indexOf(data.change[0][3]); // find the index of the continent in the "source" array
data.orig_pool.push(data.source.slice(slice_index,slice_index + 1)); // copy this value to our "original pool" of country
// for use later in addSource()
data.source.splice(data.source.indexOf(data.change[0][3]),1); // splice the value out from "source" array
}
function addSource(data){
data.orig_pool.splice(data.source.indexOf(data.change[0][2]),1) // splice the value out from "original pool" array
if(data.change[0][2] != ''){ // if the initial value of the cell is not empty,
data.source.push(data.change[0][2]); // we add the value back to "source" array
data.source.sort(); // sort the source array so it looks nice.
}
}
</script>