add Remove Section on Timeline view

Scheduler Javascript
#1

Hi,
I’m trying to add/remove section on the timeline view through checkbox.
I was able to add and remove sections but can not get the variables and I don’t know what worng…

This is my JS code

var filter_inputs = document.getElementById("filter-sections").getElementsByTagName("input");
			 
            for (var i=0; i<filter_inputs.length; i++) {
            var filter_input = filter_inputs[i];
			filter_input.onchange = function() {
 
                
               var display = $('input:checkbox:checked.group1').map(function (item) {
                return  {
                        key: item.key,
                        label: item.label
                        };
                }).get();
				
				var serialized = display;

                //update timeline reloads options and redraws the view
                scheduler.updateCollection("sections", serialized);
				alert(serialized);
            }
		}

This is the Html

<div class="filter-sections" id="filter-sections">
<span><strong>Section:</strong></span><br>
<input type="checkbox" class="group1" data-key="1" data-label="Test Name" checked="checked"/>
<input type="checkbox" class="group1" data-key="2" data-label="Test Name" />
<input type="checkbox" class="group1" data-key="3" data-label="Test Name" />
<input type="checkbox" class="group1" data-key="4" data-label="Test Name" />
<input type="checkbox" class="group1" data-key="5" data-label="Test Name" checked="checked" />
<input type="checkbox" class="group1" data-key="6" data-label="Test Name" checked="checked" />
<input type="checkbox" class="group1" data-key="7" data-label="Test Name" checked="checked" />
<input type="checkbox" class="group1" data-key="8" data-label="Test Name" />
<input type="checkbox" class="group1" data-key="9" data-label="Test Name" />
<input type="checkbox" class="group1" data-key="10" data-label="Test Name" />
<br>
</div>

For some reason i get all the time undefined

#2

I just fix it :slight_smile:

here is the code for someone else.

JS code

var filter_inputs = document.getElementById("filter-sections").getElementsByTagName("input");
	   var display = [];//empty object
            for (var i=0; i<filter_inputs.length; i++) {
            var filter_input = filter_inputs[i];
			filter_input.onchange = function() {
            		
                //displaytest = $('input:checkbox:checked.group1').data('value');
                display = $('input:checkbox:checked.group1').map( function () {				
                return { key: this.id, label: this.name  };
                }).get(); // [{key: "1", label: "Test Name"}]
				
				var serialized = display;
				//alert(serialized);
				//console.log(serialized)
				
                //update timeline reloads options and redraws the view
                scheduler.updateCollection("sections", serialized);
            }
		}

The Html code

<div class="filter-sections" id="filter-sections">
<span><strong>Section:</strong></span><br>
<input type="checkbox" class="group1" id="1" name="Test Name" checked="checked"/>
<input type="checkbox" class="group1" id="2" name="Test Name" />
<input type="checkbox" class="group1" id="3" name="Test Name" />
<input type="checkbox" class="group1" id="4" name="Test Name" />
<input type="checkbox" class="group1" id="5" name="Test Name" checked="checked" />
<input type="checkbox" class="group1" id="6" name="Test Name" checked="checked" />
<input type="checkbox" class="group1" id="7" name="Test Name" checked="checked" />
<input type="checkbox" class="group1" did="8" name="Test Name" />
<input type="checkbox" class="group1" id="9" name="Test Name" />
<input type="checkbox" class="group1" id="10" name="Test Name" />
<br>
</div>