On selecting an element in an optgroup, I wish to deselect elements in other optgroup. Here is the fiddle
https://jsfiddle.net/zfmr0std/
$("#block_house_suggest").select2().on("select2-selecting", function(e) {
var selected = $("#block_house_suggest [value='"+e.val+"']");
var opts = selected.parent().children();
var selected_array = [];
selected.prop('selected',true);
for (i = 0; i < opts.length; i++) {
if($(opts[i]).prop('selected')){
selected_array.push($(opts[i]).val());
}
}
$("#block_house_suggest").select2('data', selected_array);
});
var selected = '';
$("#block_house_suggest").select2()
.on("select2-selecting", function(e) {
selected = e.val;
})
.on("change", function(e) {
var selected_list = e.val;
var opts = $("#block_house_suggest [value='"+selected+"']").parent().children();
var opts_array = [];
for (i = 0; i < opts.length; i++) {
opts_array.push($(opts[i]).val());
}
selected_list = selected_list.filter(function(n) {
return opts_array.indexOf(n) != -1;
});
$("#block_house_suggest").select2('val', selected_list);
e.preventDefault();
});
Related
Creating a script to cycle thru items in an array, ideally both next and previous items. Currently the script works however, it always begins at the zero index, no matter which item is currently displaying in the 'mock modal' being created. Full script here:
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
for (i = 0; i < dogArr.length; i++) {
dogArr[i].addEventListener("click", function(e){
e.preventDefault();
modal.style.display = "block";
modalTitle.textContent = this.dataset.dogName;
modalImg.setAttribute("src", this.dataset.dogImage );
})
}
function nextDog() {
i = i + 1;
i = i % dogArr.length;
return dogArr[i];
}
rightArrow.addEventListener("click", function(e) {
e.preventDefault();
console.log(nextDog());
})
Any guidance appreciated.
Try this:
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
function makeIterable(arr) {
var cur = 0;
arr.next = function () {
return ++cur >= this.length ? false : this[cur];
};
arr.prev = function () {
return --cur < 0 ? false : this[cur];
};
arr.cur = function () {
return cur;
};
arr.setCur = function (pos) {
cur = pos;
};
return arr;
};
makeIterable(dogArr);
function clickedClassHandler(name,callback) {
var allElements = document.body.getElementsByTagName("*");
for(var x = 0, len = allElements.length; x < len; x++) {
if(allElements[x].className == name) {
allElements[x].onclick = handleClick;
}
}
function handleClick() {
var elmParent = this.parentNode;
var parentChilds = elmParent.childNodes;
var index = 0;
for(var x = 0; x < parentChilds.length; x++) {
if(parentChilds[x] == this) {
break;
}
if(parentChilds[x].className == name) {
index++;
}
}
callback.call(this,index);
}
}
clickedClassHandler("dog-div",function(index){
dogArr.setCur(index); //here's where you set the current position of the array based on whichever item is selected.
modal.style.display = "block";
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
});
rightArrow.addEventListener("click", function(e) {
e.preventDefault();
if (dogArr.cur() < dogArr.length-1) {
console.log(dogArr.next());
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
}
})
leftArrow.addEventListener("click", function(e) {
e.preventDefault();
if (dogArr.cur() != 0) {
console.log(dogArr.prev());
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
}
})
You need to remember the position of the clicked item whenever you click on the button.
Inside nextDog function you are using variable i, which was used in previous for loop. After for loop variable i has the value of dogArr.length. Hence in first call of nextDog i value determined by:
i = (dogArr.length +1) % dogArr.length;
You get 2nd position(index=1) of dogArr
So I suggest, you to use another global variable to track current index of showing item.
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
//global tracker
var currIndex=dogArr.length;
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
for (i = 0; i < dogArr.length; i++) {
dogArr[i].addEventListener("click", function(e){
e.preventDefault();
modal.style.display = "block";
modalTitle.textContent = this.dataset.dogName;
modalImg.setAttribute("src", this.dataset.dogImage );
//get item index from dataset
currIndex=this.dataset.indexNumber;
});
//set item index here
dogArr[i].dataset.indexNumber=i;
}
function nextDog() {
currIndex = currIndex + 1;
currIndex = currIndex % dogArr.length;
return dogArr[currIndex];
}
rightArrow.addEventListener("click", function(e) {
e.preventDefault();
console.log(nextDog());
})
Wanted to post my answer after some time. More or less, got a working example with the below codepen:
https://codepen.io/leroyrosales/pen/GRpMwdg
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
var current = dogArr.length;
for (i = 0; i < dogArr.length; i++) {
dogArr[i].addEventListener("click", function(){
modal.style.display = "block";
current = dogArr.indexOf(this);
modalContent(this);
this.classList.add("active");
})
}
function modalContent(modal){
console.log(modal);
var dogName = modal.dataset.dogName;
console.log(dogName);
var dogImg = modal.dataset.dogImage;
console.log(dogImg);
modalTitle.textContent = dogName;
modalImg.setAttribute("src", dogImg );
}
function nextDog() {
current = current + 1;
current = current % dogArr.length;
return modalContent(dogArr[current]);
}
function prevDog() {
current = current - 1;
current = current % dogArr.length;
return modalContent(dogArr[current]);
}
rightArrow.addEventListener("click", function() {
nextDog();
})
leftArrow.addEventListener("click", function() {
prevDog();
})
Using either Javascript or HTML, I have a dynamic form that refreshes/updates each time the user adds data to the table. It even has a 'modify' button and an 'erase' button to delete that particular line. However, one last thing I want to add is a button that would allow the user to upload a picture that would fit in the very last slot of the column. How do I achieve it in such a way that every time the user 'adds' the data (and another row is formed) with that particular image, the next time he wants to add another row he is able to select another image?
window.onload = load;
var id = 1;
var colEmpleados = [];
var colSectores = [{id:1, nombre:"Sector 1"},
{id:2, nombre:"Sector 2"},
{id:3, nombre:"Sector 3"}];
function load()
{
var btnAgregar = document.getElementById("btnAgregar");
btnAgregar.onclick = agregar;
var btnConfirmar = document.getElementById("btnConfirmar");
btnConfirmar.onclick = confirmarModificacion;
var btnCancelar = document.getElementById("btnCancelar");
btnCancelar.onclick = cancelar;
cargarSelectSectores();
habilitarIngreso();
}
function habilitarIngreso()
{
var rowA = document.getElementById("rowAgregar");
rowA.style.display = 'block';
var rowM = document.getElementById("rowModificar");
rowM.style.display = 'none';
}
function habilitarModificar()
{
var rowM = document.getElementById("rowModificar");
rowM.style.display = 'block';
var rowA = document.getElementById("rowAgregar");
rowA.style.display = 'none';
}
function confirmarModificacion()
{
var idEmpleado = document.getElementById("idEmpleado").value;
for(var i = 0; i<colEmpleados.length;i++)
{
if(colEmpleados[i].idEmpleado == idEmpleado)
{
colEmpleados[i].nombre = document.getElementById("txtNombre").value;
colEmpleados[i].apellido = document.getElementById("txtApellido").value;
colEmpleados[i].sector = document.getElementById("sltSector").value;
colEmpleados[i].edad = document.getElementById("txtEdad").value;
colEmpleados[i].ingreso = document.getElementById("dtpIngreso").value;
}
}
mostrar();
habilitarIngreso();
limpiarForm();
}
function cancelar()
{
habilitarIngreso();
limpiarForm();
}
function borrar()
{
var idEmpleado = this.getAttribute("idEmpleado");
for(var i=0; i<colEmpleados.length; i++)
{
if(colEmpleados[i].idEmpleado == idEmpleado)
{
colEmpleados.splice(i,1);
}
}
mostrar();
}
function modificar()
{
habilitarModificar();
var idEmpleado = this.getAttribute("idEmpleado");
for(var i=0; i<colEmpleados.length; i++)
{
if(colEmpleados[i].idEmpleado == idEmpleado)
{
document.getElementById("idEmpleado").value = colEmpleados[i].idEmpleado;
document.getElementById("txtNombre").value = colEmpleados[i].nombre;
document.getElementById("txtApellido").value = colEmpleados[i].apellido;
document.getElementById("sltSector").value = colEmpleados[i].sector;
document.getElementById("txtEdad").value= colEmpleados[i].edad;
document.getElementById("dtpIngreso").value= colEmpleados[i].ingreso;
}
}
mostrar();
}
function cargarSelectSectores()
{
var selectSectores = document.getElementById("sltSector");
selectSectores.innerHTML = "<option id='0'>--- Sectores ---</option>";
for(var i = 0; i<colSectores.length; i++)
{
selectSectores.innerHTML +="<option id="+colSectores[i].id+">"+colSectores[i].nombre+"</option>";
}
mostrar();
}
function agregar()
{
var nombre = document.getElementById("txtNombre").value;
var apellido = document.getElementById("txtApellido").value;
var sector = document.getElementById("sltSector").value;
var edad = document.getElementById("txtEdad").value;
var fechaIngreso = document.getElementById("dtpIngreso").value;
var empleado = {};
empleado.idEmpleado = id;
empleado.nombre = nombre;
empleado.apellido = apellido;
empleado.sector = sector;
empleado.edad = edad;
empleado.ingreso = fechaIngreso;
colEmpleados.push(empleado);
id++;
limpiarForm();
mostrar();
}
function limpiarForm()
{
var colInputs = document.getElementsByTagName("input");
for(var i = 0; i<colInputs.length; i++)
{
if(colInputs[i].type != "button")
{
colInputs[i].value = "";
}
}
document.getElementById("sltSector").value = "0";
}
function mostrar()
{
var bodyTabla = document.getElementById("datosEmpleados");
bodyTabla.innerHTML = "";
for(var i = 0; i<colEmpleados.length; i++)
{
var emp = colEmpleados[i];
bodyTabla.innerHTML +="<tr><td>"+emp.idEmpleado+"</td><td>"+emp.nombre+"</td><td>"+emp.apellido+"</td><td>"+emp.edad+"</td><td>"+emp.sector+"</td><td>"+emp.ingreso+"</td><td><input class='btnBorrar' type='button' value='Borrar' idEmpleado="+emp.idEmpleado+" /></td><td><input class='btnModificar' type='button' value='Modificar' idEmpleado="+emp.idEmpleado+" /></td></tr>";
}
var colBotones = document.getElementsByClassName("btnBorrar");
for(var i = 0; i<colBotones.length; i++)
{
colBotones[i].onclick = borrar;
}
var colBotonesModificar = document.getElementsByClassName("btnModificar");
for(var i = 0; i<colBotonesModificar.length; i++)
{
colBotonesModificar[i].onclick = modificar;
}
}
Thanks in advance!
$('#checkData').on('click', function()
{
debugger;
var dropdownlist = $("#droptext").data("kendoDropDownList");
dropdownlist.dataItem().title = 'Apple';
dropdownlist.refresh();
});
How can I replace kendoDropDownList text using jquery?
You can surely achieve that in databound.
dataBound: function(e) {
var customData = [];
var data = e.sender.dataSource._data;
for (var i = 0; i < data.length; i++) {
if (data[i].ListItemSystemName == "AdmissionFee") {
data[i].ListItemName = "One";
data[i].ListItemSystemName = "One"
}
customData.push(data[i]);
}
$("#mydropdownList").data("kendoDropDownList").setDataSource(customData);
}
I am using the following code to look for a specific value id in javascript object. I am getting duplicate objects.
This is the javascript code I am using:
$('.seat').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
//SeatId is 1
var categoryArray = jsonData;
var id = $(this).attr('id');
var ticketData, seatLocation;
for (var i = 0; i < categoryArray.length; i++) {
var category = categoryArray[i];
for (var j = 0; j < category.assignments.length; j++) {
if (category.assignments[j].seatId == id) {
ticketData = category;
seatLocation = category.assignments[j];
}
}
}
console.log(ticketData);
console.log(seatLocation);
});
This is how the objecs look like after being parsed:
And this is how the data is being printed:
What am I doing wrong?
Try this way:
$('.seat').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var ticketData = [];
var seatLocation = [];
//SeatId is 1
var categoryArray = jsonData;
var id = $(this).attr('id');
$.each(categoryArray, function (i, cat) {
$.each(cat.assignments, function (j, ass) {
if (ass.seatId == id) {
ticketData = cat;
seatLocation = ass;
}
});
});
console.log(ticketData);
console.log(seatLocation);
});
window.onload = function() {
var r = 0,
c = 0;
for (x in localStorage) {
var row = table.insertRow(r),
obj = JSON.parse(localStorage.getItem(x));
for (i in obj) {
var cell = row.insertCell(c);
cell.innerHTML = obj[i];
c += 1
}
r += 1;
c = 0;
}
for (var a = 0; a < table.length; a += 1) {
}
table.rows[a].cells[0].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[1].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[2].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[3].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
};
This code on load loops through the saved local storage JSON objects and then prints them into a table each object takes a row and the values are in the cells what i want is to be able to click and edit each of these rows this code only works for the first row and not the others so what should i do?
Put your code inside the for loop
for (var a = 0; a < table.length; a++) {
table.rows[a].cells[0].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
table.rows[a].cells[1].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
//more table.rows.....
}
Using jQuery is very simple:
$(function(){
$('table td').click(function(){
var ask = prompt("Input");
$(this).html(ask);
});
});
You add event outside of the loop
for (var a = 0; a < table.length; a += 1) {
for(var j=0;j<3;j++){
table.rows[a].cells[j].addEventListener('click', function() {
var ask = prompt("Input");
this.innerHTML = ask;
});
}
}