Develop Reference

How to trigger the same drop-down/popover with multiple buttons?

How to trigger the same drop-down with multiple buttons?
For instance, I have a button at the top of the page special menu, and one in the middle special menu... and another at the bottom special menu. When any of them is clicked, it should open a drop-down (or popover) nearby. Not just nearby the first special menu. But near by the clicked one.
The dropdown should be the same html element. Not html copies. Not on-the-fly copies. Not a copy at all. Just one element.
Just one copy that could be opened and displayed near by the buttons from which it has been opened.
I have found nothing using bootstrap, and have not been successful at all with Popper.js (even if I guess it might be a solution).

Assuming you've created the dropdown element:
var dropdown = document.createElement('div');
// TODO: Populate the element.
or grabbed in from the DOM:
var dropdown = document.getElementById('dropdown');
You could take an approach like this:
function attachListener(target) {
target.addEventListener('click', function() {
if (dropdown.parentNode) {
// Remove dropdown from the DOM.
dropdown.parentNode.removeChild(dropdown);
}
// Add the dropdown inside the target.
target.appendChild(dropdown);
});
}
var targets = document.getElementsByClassName('special-menu');
for (var i = 0; i < targets.length; i++) {
attachListener(targets[i]);
}
Of course, the exact implementation depends on how you want the DOM set up.

Create box that allows draggable elements to be dropped in it using js

I am trying to create a website that allows the user to drag text into boxes. I would like the user to have the option to create more boxes using a button which they can drag more text into.
The issue I am having is that I cannot get the button to create a box that allows elements to be dropped in it.
I have pasted the basics of what I am trying to do here http://jsbin.com/vedapu/3/edit?html,css,js,output .
The code below shows the code I have written to create a div when the button is clicked.
document.getElementById("text").onclick = function() {
var div = document.createElement('div');
div.ondrop = "drop(event)";
div.ondragover = "allowDrop(event)";
div.className = "box";
document.getElementsByClassName('section1')[0].appendChild(div);
}
How can I pass the drop and allow drop to the new div?

You're almost there! Change these two lines, which set string values to ondrop and ondragover:
div.ondrop = "drop(event)";
div.ondragover = "allowDrop(event)";
...to this, which sets the functions instead:
div.ondrop = drop;
div.ondragover = allowDrop;
The event object will be automatically included as the first function parameter.

JQUERY DOM: Select Elements Created After Dom Load

I am working on a project where I need to change the value of all select inputs of a certain class when a function is called. The problem is some of the select inputs do not exist when the dom is first loaded, they are created dynamically via Javascript.
The function works fine for selecting all the select inputs that exist when the page was loaded, but does not work for any select inputs that were added to the dom dynamically.
I understand event binding with .on but in this particular case I am not trying to key off of an event like click. I want to get all elements of this class when this function is called.
Here is the code I am using to create the new select elements.
var this_cell = document.getElementById('produce_batch_line_td['+x+']');
var new_select = document.createElement("select");
new_select.name = "produce_batch_line["+x+"]";
new_select.id = "produce_batch_line["+x+"]";
new_select.className = "produce_batch_line["+invoice_number+"]";
this_cell.appendChild(new_select);
var new_option = document.createElement("option");
new_option.text = "test";
new_option.value = "test";
new_select.add(new_option);
Here is the code I am using to select all select elements of this class.
function SetDetailValue(invoice_number, obj) {
$(".produce_batch_line\\["+invoice_number+"\\]").each(function() {
this.value = obj.value;
});
}
How can I get items of this class added to the dom dynamically?

Check this link. I have put one that already exist. And when you click add button it creates dynamicly as well. When you Click the set button it finds them with a java query and puts them into a for loop that changes each ones value one by one.
http://cr8code.co/editor.php?workid=1a446530189d751d0b15ce104a286eee
Here is the DEMO

Create a function to hide divs

I want to display tables when a selection is made in a form and a 'Generate Factsheet' button is clicked. I've got a working code where I individually hide other divs when displaying the one I am interested in. Since I have several options in the form (and hence several corresponding divs in which the respective tables are enclosed), the final code appears bulky. I want to write a function to hide other divs whiles displaying the one I am interested in. This is the code I currently have:
var tableDivs = ['tableOPVDiv','tablePneumoDiv','tableRotaDiv'];
var selectedVaccine;
var selectedTableDiv;
function generateFactsheetFunction(){
// Selecting the vaccine chosen from the dropdown
var e = document.getElementById("selectVaccine");
selectedVaccine = e.options[e.selectedIndex].text;
console.log("selectedVaccine: ", selectedVaccine);
if (selectedVaccine=="Rotavirus Vaccine"){
selectedTableDiv='tableRotaDiv';
console.log("rotavirus selected");
hideOtherTables();
} else if (selectedVaccine=="Polio Vaccine"){
console.log("polio selected");
selectedTableDiv='tableOPVDiv';
hideOtherTables();
} else if (selectedVaccine=="Pneumococcal Vaccine"){
console.log("pneumo selected");
selectedTableDiv='tablePneumoDiv';
hideOtherTables();
}
}
function hideOtherTables(){
var testa = tableDivs.indexOf(selectedTableDiv);
console.log("tableDivs[testa]: ", tableDivs[testa]);
console.log("testa: ", testa);
testb = tableDivs[testa];
console.log("testb: ", testb);
document.getElementById(tableDivs[testa]).style.display="block";
/*var newTableDivs=tableDivs.splice(testa);*/
/*for (y=0;y<newTableDivs.length;y++){
document.getElementById(newTableDivs[y]).style.display="none";
}*/
}
The uncommented part works fine. In the commented part, I want to say that for all array elements other than selectedVaccine, I want the display to be:
document.getElementById(tableDivs[testa]).style.display="none";
I cannot splice the data because the selections are repititive (the selections are from a form). What is the way to set the visibility of tableDivs associated with other selections to be none.

Why should you change the display property of each and every division seperately? give a common class name to all the divisions and hide them all at once and then display only the required table.
$(".yourClass").hide();
document.getElementById(tableDivs[testa]).style.display="block";
You will have to use the jQuery Library too.
If you are not familiar with jQuery then use the for loop to hide all the tables first and then display only the required table.
for (y=0;y<TableDivs.length;y++){//you need not create newTableDivs
document.getElementById(TableDivs[y]).style.display="none";
}
document.getElementById(tableDivs[testa]).style.display="block";
i.e you just have to interchange the order of execution. ;)

Cannot read property 'style' of null this means that document.getElementById(tableDivs[y]) return null and can not find this element
try to write
document.getElementById("ElementId")

switching selections between two select menus

I'm trying to build some kind of currency converter and I have two select menus with the list of currencies.
I want to create a button that when clicked, it will switch the selection between the "from" select menu and the "to" select menu.
how do I implement it using the select menus I already have?

I believe you'r looking for a swap behavior.
http://jsfiddle.net/brentmn/D55Dm/
$(function(){
var $sel1 = $('#currency1');
var $sel2 = $('#currency2');
$('input[type=button]').click(function(){
var val1 = $sel1.val();
var val2 = $sel2.val();
$sel2.val(val1);
$sel1.val(val2);
//jqueryui
//$sel2.val(val1).trigger('change');
//$sel1.val(val2).trigger('change');
});
});

Something like this?
$("#button").on("click", function() {
var from = $("#from").val();
var to = $("#to").val();
$("#from").val(to);
$("#to").val(from);
});
I'd really do it with less code than that, but have done it like that for readability.

Assuming I've understood you correctly, you want a button that will swap the values of two select elements. If that's right, try something along these lines:
$("#someButton").click(function() {
var elemTo = $("#to"),
elemFrom = $("#from"),
toVal = elemTo.val();
elemTo.val(elemFrom.val());
elemFrom.val(toVal);
});
It simply gets references to the two select elements (assumed here to be #to and #from), gets the value of one of them, replaces the value of that one with the value of the other, and then replaces the value of the second with the stored value from the first.
Note that this assumes both select elements have the same option values. If an option is present in one select but not the other, it would not work.
Here's a working example.

If you dbl click on one item in 'From' section , it will get selected be appended to the 'To' section.
$("#selectFrom").dblclick(function(){
$selectTo.append($selectFrom.children(":selected"));
});
Which all functionalities you want??