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>

How can Hide Selected Value from Cascading Drop-Down List with AJAX Dependency

1 answer