We Keep Coding

Rewrite the code in a loop

I'm just learning JS and jQuery, so I can not reduce the normal code is shown below:
var menuBtn = '#menu',
classMenuOpen = 'side_menu_open',
aboutBtn = '#about',
classAboutOpen = 'side_about_open',
dateBtn = '#date',
classDateOpen = 'side_date_open',
closeBtn = '.header__menu a, .close';
// Menu Side
$(menuBtn).on('click', function() {
$('html').toggleClass(classMenuOpen);
});
$(closeBtn).not(menuBtn).on('click', function() {
$('html').removeClass(classMenuOpen);
});
// About Side
$(aboutBtn).on('click', function() {
$('html').toggleClass(classAboutOpen);
});
$(closeBtn).not(aboutBtn).on('click', function() {
$('html').removeClass(classAboutOpen);
});
// Date Side
$(dateBtn).on('click', function() {
$('html').toggleClass(classDateOpen);
});
$(closeBtn).not(dateBtn).on('click', function() {
$('html').removeClass(classDateOpen);
});
I would like to write a loop (example below) , but knowledge is not enough. I hope someone can help, thanks in advance ;)
['menu', 'about', 'date'].forEach((selector) => {
$('.' + selector + ' .scrollbar-inner').scrollbar({
onScroll: function(y, x){
$('.' + selector + ' .scrollbar-inner').toggleClass('scroll-shadow', y.scroll >= 5);
}
});
});

maybe something like this:
// wrap in IIFE for scope containment
(function($) {
// Setup button keys
const buttons = ['menu', 'about', 'date'];
// click handler
const createClickHandler = value => {
// set loop variables
let selector = `#${value}`
, className = `side_${value}_open`;
// create event triggers
$(selector).on('click', e => $('html').toggleClass(className));
$('.header__menu a, .close').not(selector).on('click', e => $('html').removeClass(className))
};
// iterate keys and apply handler method
buttons.forEach(createClickHandler);
})(jQuery);

Here is the loop you are looking for!
In the forEach() loop you are looping through the array of strings, component holds the string element (so here 'menu', 'about', etc...). Then inside the loop's body set two variables:
selector is the selector string
classOpen is the class name of an element you have associated with the component
Then you basically write the same code using only those two variables instead of writing the code three times with set strings.
let closeBtn = '.header__menu a, .close'
['menu', 'about', 'date'].forEach(function(component) {
let selector = '#' + component;
let classOpen = '.side_' + component + '_open';
$(selector).on('click', function() {
$('html').toggleClass(classOpen);
});
$(closeBtn).not(selector).on('click', function() {
$('html').removeClass(selector);
});
});

jQuery .on change event binding but not firing

var myTimelineVis = {
loadData: function(visItems, visContainer, visOptions, visTimelines) {
$.getJSON('myURL/' + $(this).val(), function(data) {
visItems.clear();
$.each(data, function(i, imp_sched_events) {
$.each(imp_sched_events.items.timeline_dataset, function(i, item) {
visItems.add(item);
if ($(visContainer).is(':empty')) {
visTimeline = new vis.Timeline(visContainer, visItems, visOptions);
} else {
visItems.update(item);
}
visTimeline.fit();
$('.vis-item-content').foundation();
});
});
});
},
setData: function(selectClass) {
var visItems = new vis.DataSet(),
visContainer = document.getElementById('visualization'),
visOptions = {},
visTimeline = '';
$(selectClass).on('change', function(visItems, visContainer, visOptions, visTimelines) {
this.loadData(visItems, visContainer, visOptions, visTimelines);
});
}
}
$(document).ready(function() {
myTimelineVis.setData('select.implementation_schedule');
});
I am trying to trying to create a vis timeline on page load and then load data onto it when my select changes (I have two selects). On page load, I can see the change event binding to both selects within Chrome console, but nothing happens, not even an error, on the actual select change. It just acts like they don't exist.
Is this is a scope issue?

For jQuery, the listener would not be added in an Ajax call, but in the $(document).ready(). It works differently than vanilla JavaScript.
If the select is dynamically changed you would need to use the following syntax with a hard-coded selector. The selector can be broad like "#myForm select". There's no need to use a variable.
$(document).on('change', '.selectClass', function(visItems, visContainer, visOptions, visTimelines) {
this.loadData(visItems, visContainer, visOptions, visTimelines);
});
});

How to re-run JavaScript when DOM mutates?

I'm using Template.rendered to setup a dropdown replacement like so:
Template.productEdit.rendered = function() {
if( ! this.rendered) {
$('.ui.dropdown').dropdown();
this.rendered = true;
}
};
But how do I re-run this when the DOM mutates? Helpers return new values for the select options, but I don't know where to re-execute my .dropdown()

I think you don't want this to run before the whole DOM has rendered, or else the event handler will run on EVERY element being inserted:
var rendered = false;
Template.productEdit.rendered = function() {rendered: true};
To avoid rerunning this on elements which are already dropdowns, you could give new ones a class which you remove when you make them into dropdowns
<div class="ui dropdown not-dropdownified"></div>
You could add an event listener for DOMSubtreeModified, which will do something only after the page has rendered:
Template.productEdit.events({
"DOMSubtreeModified": function() {
if (rendered) {
var newDropdowns = $('.ui.dropdown.not-dropdownified');
newDropdowns.removeClass("not-dropdownified");
newDropdowns.dropdown();
}
}
});
This should reduce the number of operations done when the event is triggered, and could stop the callstack from being exhausted

Here's my tentative answer, it works but I'm still hoping Meteor has some sort of template mutation callback instead of this more cumbersome approach:
Template.productEdit.rendered = function() {
if( ! this.rendered) {
$('.ui.dropdown').dropdown();
var mutationOptions = {
childList: true,
subtree: true
}
var mutationObserver = new MutationObserver(function(mutations, observer){
observer.disconnect(); // otherwise subsequent DOM changes will recursively trigger this callback
var selectChanged = false;
mutations.map(function(mu) {
var mutationTargetName = Object.prototype.toString.call(mu.target).match(/^\[object\s(.*)\]$/)[1];
if(mutationTargetName === 'HTMLSelectElement') {
console.log('Select Changed');
selectChanged = true;
}
});
if(selectChanged) {
console.log('Re-init Select');
$('.ui.dropdown').dropdown('restore defaults');
$('.ui.dropdown').dropdown('refresh');
$('.ui.dropdown').dropdown('setup select');
}
mutationObserver.observe(document, mutationOptions); // Start observing again
});
mutationObserver.observe(document, mutationOptions);
this.rendered = true;
}
};
This approach uses MutationObserver with some syntax help I found here

Taking ad educated guess, and assuming you are using the Semantic UI Dropdown plugin, there are four callbacks you can define:
onChange(value, text, $choice): Is called after a dropdown item is selected. receives the name and value of selection and the active menu element
onNoResults(searchValue): Is called after a dropdown is searched with no matching values
onShow: Is called after a dropdown is shown.
onHide: Is called after a dropdown is hidden.
To use them, give the dropdown() function a parameter:
$(".ui.dropdown").dropdown({
onChange: function(value, text, $choice) {alert("You chose " + text + " with the value " + value);},
onNoResults: function(searchValue) {alert("Your search for " + searchValue + " returned no results");}
onShow: function() {alert("Dropdown shown");},
onHide: function() {alert("Dropdown hidden");}
});
I suggest you read the documentation of all plugins you use.

jQuery switching between more than two classes

I've already posted a question about jQuery toggle method here
But the problem is that even with the migrate plugin it does not work.
I want to write a script that will switch between five classes (0 -> 1 -> 2 -> 3 -> 4 -> 5).
Here is the part of the JS code I use:
$('div.priority#priority'+id).on('click', function() {
$(this).removeClass('priority').addClass('priority-low');
});
$('div.priority-low#priority'+id).on('click' ,function() {
$(this).removeClass('priority-low').addClass('priority-medium');
});
$('div.priority-medium#priority'+id).on('click', function() {
$(this).removeClass('priority-medium').addClass('priority-normal');
});
$('div.priority-normal#priority'+id).on('click', function() {
$(this).removeClass('priority-normal').addClass('priority-high');
});
$('div.priority-high'+id).on('click', function() {
$(this).removeClass('priority-high').addClass('priority-emergency');
});
$('div.priority-emergency'+id).on('click', function() {
$(this).removeClass('priority-emergency').addClass('priority-low');
});
This is not the first version of the code - I already tried some other things, like:
$('div.priority#priority'+id).toggle(function() {
$(this).attr('class', 'priority-low');
}, function() {
$(this).attr('class', 'priority-medium');
}, function() {
...)
But this time it only toggles between the first one and the last one elements.
This is where my project is: strasbourgmeetings.org/todo

The thing is that your code will hook your handlers to the elements with those classes when your code runs. The same handlers remain attached when you change the classes on the elements.
You can use a single handler and then check which class the element has when the click occurs:
$('div#priority'+id).on('click', function() {
var $this = $(this);
if ($this.hasClass('priority')) {
$this.removeClass('priority').addClass('priority-low');
}
else if (this.hasClass('priority-low')) {
$this.removeClass('priority-low').addClass('priority-medium');
}
else /* ...and so on... */
});
You can also do it with a map:
var nextPriorities = {
"priority": "priority-low",
"priority-low": "priority-medium",
//...and so on...
"priority-emergency": "priority"
};
$('div#priority'+id).on('click', function() {
var $this = $(this),
match = /\bpriority(?:-\w+)?\b/.exec(this.className),
current = match && match[0],
next = nextPriorities[current];
if (current) {
$this.removeClass(current).addClass(next || 'priority');
}
});

[edit: working demo]
Assuming you have 'priority' as the default class already on the element at the initialization phase, this will cycle through the others:
$('div#priority' + id)
.data('classes.cycle', [
'priority',
'priority-low',
'priority-medium',
'priority-normal',
'priority-high',
'priority-emergency'
])
.data('classes.current', 0)
.on('click', function () {
var $this = $(this),
cycle = $this.data('classes.cycle'),
current = $this.data('classes.current');
$this
.removeClass(cycle[current % cycle.length])
.data('classes.current', ++current)
.addClass(cycle[current % cycle.length]);
});

I have tried myself to do this with the sole help of toggleClass() and didn't succeeded.
Try my method that declares an array with your five classes and toggles dynamically through
them.Do adapt to your own names.
//variable for the classes array
var classes=["one","two","three","four","five"];
//add a counter data to your divs to have a counter for the array
$('div#priority').data("counter",0);
$(document).on('click','div#priority',function(){
var $this=$(this);
//the current counter that is stored
var count=$this.data("counter");
//remove the previous class if is there
if(($this).hasClass(classes[count-1])){
$(this).removeClass(classes[count-1]));
}
//check if we've reached the end of the array so to restart from the first class.
//Note:remove the comment on return statement if you want to see the default class applied.
if(count===classes.length){
$this.data("counter",0);
//return;//with return the next line is out of reach so class[0] wont be added
}
$(this).addClass(classes[count++]);
//udpate the counter data
$this.data("counter",count);
});
//If you use toggleClass() instead of addClass() you will toggle off your other classes.Hope is a good answer.

change loses bind reference

Have a link that uses the ID to grab specific content from an external file (works, no problems here). I then change the ID of the link so that a new ID so that new info can be gotten the from the external file but the same info is always shown. So, I'm looking for some help in figuring out why the new info isn't being loaded but the old instead.
Here is the code for setting the new ID value. It resides in a completely separate section of the code. It then calls the function fncSetupInfoWindow() and it creates the bindings. .windowInfo is a class set on specific elements.
$('#pickedCenterProgram a').text(newProgram[0]).parent().slideDown().attr('id', newVal).attr('title', newProgram);
fncSetupInfoWindow();
function fncSetupInfoWindow() {
$('.windowInfo').unbind('mouseover mouseout').each(function () {
var obj = $(this), position = [], contentID = globalObjects.emptyString, title = obj.attr('title'), contentID = obj.attr('id').toLowerCase();
obj.bind({
mouseover: function (e) {
position = fncGetPositionArray(e.pageX, e.pageY);
fncLoadStatusInfo(position[0], position[1], contentID, title);
},
mouseout: function () {
$('#modInfoWindow').closeModal();
}
});
});
}
Here is the code for loading the info
function fncLoadStatusInfo(x, y, programName, title) {
initLoader.className = 'txt-c'; //create loader
initLoader.iconClass = 'alignVert-b';
$('#modInfoWindow').createModalWindow({ isModal: false, left: x, top: y, ignorePosition: false, title: title, width: 250, hideCloseIcon: true, autoOpen: true }).html(initLoader.createLoader());
$('#modInfoWindow').load('../pages/infoFile.htm ' + '#' + programName);
return false;
}
Everything works, well almost, except that the newly assigned ID is not being used but the original for when the page is created. I've tried numerous things as well as even destroying the modal (aka dialog) window all with the same results.
thanks ^.^
Thanks.

The problem is that you're using the id at the time it was bound (inside the .each()), rather than at the time of the event (inside the event handler). You can do it at the time of the event and simplify things overall like this:
function fncSetupInfoWindow() {
$('.windowInfo').bind({
mouseover: function (e) {
var pos = fncGetPositionArray(e.pageX, e.pageY);
fncLoadStatusInfo(pos[0], pos[1], this.id.toLowerCase(), this.title);
},
mouseout: function () {
$('#modInfoWindow').closeModal();
}
});
}
Or even simpler (probably what you want) using .hover():
function fncSetupInfoWindow() {
$('.windowInfo').hover(function (e) {
var pos = fncGetPositionArray(e.pageX, e.pageY);
fncLoadStatusInfo(pos[0], pos[1], this.id.toLowerCase(), this.title);
}, function () {
$('#modInfoWindow').closeModal();
});
}