Weird JS Behavior With Bootstrap Sliders

Question

So I recieved help from an internet saint to vastly improve my code to create a bootstrap slider per list item within a JS for loop, but now it is behaving erratically.

Sometimes it works perfectly, others it creates new items but not sliders (just a text input field), and others it only creates one item per list.

Any great minds see where I'm going wrong?

var proArray = [];
	function addPro() {
	    var val = document.getElementById("proInput").value.trim();
	    document.getElementById("proForm").reset();
	    if (val.length == 0) {
	        return;
	    }
	    if (document.getElementById('proInput' + val) == null) {
	        proArray.push({id: val, slider: null});
	    } else {
	        return;
	    }
	    for (var i = 0; i < proArray.length; i++) {
	        var ele = document.getElementById('proInput' + proArray[i].id);
	        if (ele == null) {
	            var newItem = "" + proArray[i].id + "
";
	            document.getElementById("proList").innerHTML += newItem;
	            proArray[i].slider = new Slider('#proInput' + proArray[i].id, {
	                formatter: function(value) {
	                    return 'Current value: ' + value;
	                }
	            });
	        } else {
	            (function(i) {
	                setTimeout(function() {
	                    var val = proArray[i].slider.getValue();
	                    proArray[i].slider.destroy();
	                    document.getElementById('SIDproInput' + proArray[i].id).remove();
	                    proArray[i].slider = new Slider('#proInput' + proArray[i].id, {
	                        formatter: function (value) {
	                            return 'Current value: ' + value;
	                        }
	                    });
	                    proArray[i].slider.setValue(val);
	                }, 100);
	            })(i);
	        }
	    }
	}

	var conArray = [];
	function addCon() {
	    var valCon = document.getElementById("conInput").value.trim();
	    document.getElementById("conForm").reset();
	    if (valCon.length == 0) {
	        return;
	    }
	    if (document.getElementById('conInput' + valCon) == null) {
	        conArray.push({id: valCon, slider: null});
	    } else {
	        return;
	    }
	    for (var i = 0; i < conArray.length; i++) {
	        var ele = document.getElementById('conInput' + conArray[i].id);
	        if (ele == null) {
	            var newItem = "" + conArray[i].id + "
";
	            document.getElementById("conList").innerHTML += newItem;
	            conArray[i].slider = new Slider('#conInput' + conArray[i].id, {
	                formatter: function(value) {
	                    return 'Current value: ' + value;
	                }
	            });
	        } else {
	            (function(i) {
	                setTimeout(function() {
	                    var valCon = conArray[i].slider.getValue();
	                    conArray[i].slider.destroy();
	                    document.getElementById('SIDconInput' + conArray[i].id).remove();
	                    conArray[i].slider = new Slider('#conInput' + conArray[i].id, {
	                        formatter: function (value) {
	                            return 'Current value: ' + value;
	                        }
	                    });
	                    conArray[i].slider.setValue(valCon);
	                }, 100);
	            })(i);
	        }
	    }
	}








	    	Pros
	    	The Good Stuff
	    	
			    
			    Add
			
			Benefits
			
			
	    
 

	    
	    	Cons
	    	The Bad Stuff
	    	
			    
			    Add
			
			Costs

gaetanoM · Accepted Answer

Because you have two lists you can use two arrays:

var proArray = [];
var conArray = [];

The inline functions can be changed in order to pass the list prefix as parameter:

newAdd('pro')
newAdd('con')

And so you can adjust the addPro function to these changes.

From comment:

If I type in "@" or "?" as an item in your snippet above it shows the error. Not for you?

In order to solve such an issue you need to escape those chars when creating the slider:

arr[i].slider = new Slider('#' + listIdPrefix + 'Input' +
         arr[i].id.replace(/@/g, '\@').replace(/\?/g, '\?').....

The snippet:

var proArray = [];
var conArray = [];
function newAdd(listIdPrefix) {
    var val = document.getElementById(listIdPrefix + "Input").value.trim();
    document.getElementById(listIdPrefix + "Form").reset();
    if (val.length == 0) {
        return;
    }
    var arr;
    if (document.getElementById(listIdPrefix + 'Input' + val) == null) {
        if (listIdPrefix == 'pro') {
            proArray.push({id: val, slider: null});
            arr = proArray;
        } else {
            conArray.push({id: val, slider: null});
            arr = conArray;
        }
    } else {
        return;
    }
    for (var i = 0; i < arr.length; i++) {
        var ele = document.getElementById(listIdPrefix + 'Input' + arr[i].id);
        if (ele == null) {
            var newItem = "" + arr[i].id + "
";
            document.getElementById(listIdPrefix + "List").innerHTML += newItem;
            arr[i].slider = new Slider('#' + listIdPrefix + 'Input' + arr[i].id.replace(/@/g, '\@').replace(/\?/g, '\?').replace(/\./g, '\.'), {
                formatter: function (value) {
                    return 'Current value: ' + value;
                }
            });
        } else {
            (function (i, arr) {
                setTimeout(function () {
                    var val = arr[i].slider.getValue();
                    arr[i].slider.destroy();
                    document.getElementById('SID' + listIdPrefix + 'Input' + arr[i].id).remove();
                    arr[i].slider = new Slider('#' + listIdPrefix + 'Input' + arr[i].id.replace(/@/g, '\@').replace(/\?/g, '\?').replace(/\./g, '\.'), {
                        formatter: function (value) {
                            return 'Current value: ' + value;
                        }
                    });
                    arr[i].slider.setValue(val);
                }, 100);
            })(i, arr);
        }
    }
}









    Pros
    The Good Stuff
    
        
        Add
    
    Benefits
    
    
 


    Cons
    The Bad Stuff
    
        
        Add
    
    Costs

Weird JS Behavior With Bootstrap Sliders

Answers (1)

Related Questions