wenzhixin/multiple-select

Possible bug in events listeners

Set4now opened this issue · 0 comments

i have situation where am trying to use both onclick and onCheckall events.
Issue:- i am using this plugin for dropdowns with multi-select ( and select all option as all) .

without using onCheckall
Now the issue is if there is only one item in the dropdown with select all, so when i select that one device, it automatically checks the select all, and when it does the onclick event doesn't fire.

with using onCheckall
so when i select that one device, it automatically checks the select all, and thus firing both the onclick and oncheckall.

I am trying to dynamically populate a 2nd dropdown menu based on the first, but "with using onCheckall" .it's generating duplicate select options since its firing both the events.

$(function () {

$('#model').multipleSelect({
    filter : true,
    placeholder: 'Select Models',
    maxHeight: 140,
    showClear: true,
    filterPlaceholder: 'Search for Models',
    filterAcceptOnEnter: true ,
    // selectAll: false,
    // fires when user manually selects options
    onClick: function (){
        
        // var chassis_model_select = document.getElementById("chassis_model");
        // for (i=0; i < chassis_model_select.options.length; i++){
        //     chassis_model_select.options.remove(i);
        // }
        // console.log($('#model').multipleSelect('getSelects'));
        var models = $('#model').multipleSelect('getSelects');
        // console.log(models);
        for (i=0; i < models.length; i++){
            if (models[i] == "ios"){
                document.getElementById("chassis-model").style.display = "table-row";
                var chassis_models_menu = document.getElementById("chassis_model");
                var req = new XMLHttpRequest();
                req.open('POST', '/getchassismodels/', true);
                req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
                
                req.send(`devicetype=${models[i]}`)
                req.onreadystatechange = function () {
                    if(req.readyState === XMLHttpRequest.DONE && req.status === 200) {
                    
                    var response = JSON.parse(req.responseText);
                    // console.log(response)
                    // Adding a Select All option
                    // var model_select = document.getElementById("model");
                    // var opt = document.createElement('option');
                    // opt.appendChild(document.createTextNode("Select All"));
                    // opt.value = "all";
                    // model_select.appendChild(opt);
                    // Adding all the options dynamically relevent to the device type selected from the preivious options
                    for (i = 0; i < response.length; i++){
                        var opt = document.createElement('option');
                        opt.appendChild( document.createTextNode(response[i]));
                        opt.value = response[i];
                        chassis_models_menu.appendChild(opt);
                        
                        $('#chassis_model').multipleSelect('refresh');
                    }
    
            }
        }


            }
        }
    },
    



    // fires when user selects select all
    onCheckAll: function(){
        
        
        var models = $('#model').multipleSelect('getSelects')
        console.log(models)
        
        var chassis_models_menu = document.getElementById("chassis_model");
       
        // var  already_existing_options = $('#chassis_model').multipleSelect('getSelects')
        // console.log(already_existing_options)

      

        for (i=0; i < models.length; i++){
            if (models[i] == "ios"){
                document.getElementById("chassis-model").style.display = "table-row";
                
                
                var req = new XMLHttpRequest();
                req.open('POST', '/getchassismodels/', true);
                req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
                
                req.send(`devicetype=${models[i]}`)
                req.onreadystatechange = function () {
                    if(req.readyState === XMLHttpRequest.DONE && req.status === 200) {
                    
                    var response = JSON.parse(req.responseText);
                    // console.log(response)
                    // Adding a Select All option
                    // var model_select = document.getElementById("model");
                    // var opt = document.createElement('option');
                    // opt.appendChild(document.createTextNode("Select All"));
                    // opt.value = "all";
                    // model_select.appendChild(opt);
                    // Adding all the options dynamically relevent to the device type selected from the preivious options
                    for (i = 0; i < response.length; i++){
                        var opt = document.createElement('option');
                        opt.appendChild( document.createTextNode(response[i]));
                        opt.value = response[i];
                        // only add options if they are don't exists already 
                        // This will give error in javascript console..possible bug in the plugin
                        // chassis_models_menu.removeChild(opt);
                        chassis_models_menu.appendChild(opt);
                        $('#chassis_model').multipleSelect('refresh');
                        
                        
                    }
    
            }
        }


            }
        }

    },

    onUncheckAll: function(){
        document.getElementById("chassis-model").style.display = "none";
        var chassis_model_select = document.getElementById("chassis_model");
        for (i=0; i < chassis_model_select.options.length; i++){
            chassis_model_select.options.remove(i);
        }
        
    }



    
})

});

$(function () {
$('#chassis_model').multipleSelect({
filter : true,
placeholder: 'Select Models',
maxHeight: 140,
showClear: true,
filterPlaceholder: 'Search for Models',
filterAcceptOnEnter: true ,

})

});