I have a requirement where I have to fire click event on table header on click of other table header (2 different tables), but trigger is not fired on the table when in a loop. Although if I hardcode and bind the trigger to individual element, it works.
Currently, the JS looks like something like this:
var outsideHeaders = $("#header th");
var tableHeaders = $(".dataTable th");
for(var cnt = 0; cnt< outsideHeaders.length; cnt++)
{
$(outsideHeaders[cnt]).bind('click',function(){
$(tableHeaders[cnt]).trigger('click');
});
}
Please provide solution for this!
Updated:
This is how my code looks now:
var outsideHeaders = $("#header th");
var tableHeaders = $(".dataTable th");
for(var cnt = 0; cnt< outsideHeaders.length; cnt++)
{
(function(headerCnt){
$(outsideHeaders[headerCnt]).bind('click',function(){
$(tableHeaders[headerCnt]).trigger('click');
});
})(cnt);
}
The value of cnt inside the click event handler function is going to be equal to its last value in the for loop (in this case, whatever header.length was when the code executed) due to the way scoping in JavaScript works. You need to use a closure so that it maintains its value for that specific iteration:
$(document).ready(function() {
var outsideHeaders = $("#header th");
var tableHeaders = $(".dataTable th");
for(var cnt = 0; cnt < outsideHeaders.length; cnt++)
{
(function(headerCount) {
$(outsideHeaders[headerCount]).bind('click',function(){
$(tableHeaders[headerCount]).trigger('click');
});
})(cnt);
}
});
Note that I've wrapped the code in a $(document).ready() call. This will ensure that the elements exist when you try to select them.
var $outsideHeaders = $("#header th"),
$tableHeaders = $(".dataTable th");
$outsideHeaders.on('click', function(){
var i = $outsideHeaders.index(this);
$tableHeaders.eq(i).trigger('click');
});
No need in making iteration. I guess this could be the right way here:
outsideHeaders.on("click", function() {
var cnt = outsideHeaders.index(this);
tableHeaders.eq(cnt).trigger("click");
});
You simply bind click event to all outsideHeaders and trigger click event of the corresponding element of tableHeaders based on the index.
Related
I am using the below code in the google tag manager custom JavaScript variable, but it returns same index value for every line item, what can be the issue?
Web page link: https://www.amity.edu/programe-list.aspx?fd=all
function() {
var elements = document.querySelectorAll('.staff-container');
for (var i = 0; i < elements.length; i++){
(function(index){
elements[i].children[0].children[0].addEventListener("click", myScript);
function myScript(){
return("Clicked : ",index);
}
})(i);
}
}
There is an error in the 5th line.
It should be elements[index].children... in that case.
The updated code:
function() {
var elements = document.querySelectorAll('.staff-container');
for (var i = 0; i < elements.length; i++){
(function(index){
elements[index].children[0].children[0].addEventListener("click", myScript);
function myScript(){
return("Clicked : ",index);
}
})(i);
}
}
Here is an alternative way from Simo's blog
Blog link
Although the post is say about visibility element. I test it with click on my website.
This might work
function() {
var list = document.querySelectorAll('.staff-container a'),
el = {{Click Element}};
return [].indexOf.call(list, el) + 1;
}
If it is not working, you might need to provide the screenshot about the click element from your GTM preview.
I have created a button using javascript and now I want to give it a onclick. however I want the function to have a parameter i. the problem is that when I inspect the console the onclick function is just onclick=playAudio(i). I want it to be different for each value of i in the for loop, but because it is in brackets it just stays as i instead of the current number in the for loop. I hope I have explained this properly. some of the code is below to help you understand.
var i;
var audioMp3 = ["audio/Un", "audio/Deux", "audio/Trois", "audio/Quatre", "audio/Cinq", "audio/Six", "audio/Sept", "audio/Huit", "audio/Neuf", "audio/Dix"];
for(i = 0; i < audioMp3.length; i++{
var audioBtn = document.createElement("BUTTON");
audioBtn.setAttribute("onclick", "playAudio(i);";
}
var audioMp3 = ["audio/Un", "audio/Deux", "audio/Trois", "audio/Quatre", "audio/Cinq", "audio/Six", "audio/Sept", "audio/Huit", "audio/Neuf", "audio/Dix"];
for(var i = 0; i < audioMp3.length; i++){
var node = document.createElement("BUTTON");
var textnode = document.createTextNode(audioMp3[i]);
node.appendChild(textnode);
node.setAttribute("onclick", "playAudio("+i+");");
document.getElementById("element").appendChild(node);
}
function playAudio(i){
alert(i);
}
<div id="element"></div>
I'm pretty sure that this should work :
audioBtn.setAttribute("onclick", "playAudio("+i+");");
audioBtn.onclick = function(){
playAudio(i)
}
Create an array with all the possible values, loop through the values to create the buttons, each button should have their click event listener to play their own button's song.
I don't know your precise code but that is the pseudo-code to do it.
I am trying to dynamically create a set of check-boxes that each call a function differently when clicked
function initAllButtons(variable, length)
{
for(c = 0; c < length; c++)
{
clicks.push(true);
}
for(i = 0; i < length; ++i)
{
var label = document.createElement("label");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = true;
checkbox.value = btns[i];
checkbox.class = "colorCoder";
label.appendChild(checkbox);
document.getElementById('Buttons').appendChild(checkbox);
$('#Buttons').on('click', function(){updateData(i,clicks);});
}
}
Btns is just an array of strings. I really want to call the UpdateData function (which I have tested and works like it should) with the value or index of the button pressed, but nothing seems to be working.
This version just calls updateData ten times with index = 10. It obviously is not looking at the buttons as individual things. What am I doing wrong?
When dynamically adding elements to the dom, attaching event listeners gets tricky. This is a perfect use case for delegate on a parent container:
var clickcontainer = document.getElementById('clickcontainer');
clickcontainer.addEventListener('click', function(e) {
var target = e.target || e.srcElement;
e.stopPropagation();
}, false);
Use closures to get this behavior, the closure function will create a new isolated scope and store the state of the variables.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
function clickClosure(i, clicks){
return function(){
updateData(i,clicks);
}
}
function initAllButtons(variable, length)
{
for(c = 0; c < length; c++)
{
clicks.push(true);
}
for(i = 0; i < length; ++i)
{
var label = document.createElement("label");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = true;
checkbox.value = btns[i];
checkbox.class = "colorCoder";
label.appendChild(checkbox);
document.getElementById('Buttons').appendChild(checkbox);
var clickFnct = clickClosure(i, clicks);
$('#Buttons').on('click', clickFnct);
}
}
The problem is that you are doing nothing in your click handler to reference the clicked element. To do that you need to specify selector as parameter to on(). That might look like this:
$('#Buttons').on('click', ':checkbox', function() {
// determine index of clicked item
var index = $('#Buttons :checkbox').index(this);
// call your function
updateData(index,clicks);
}
You should also place this code after your loop as you only need to execute this line of code once.
Guessing by the code you are actually attaching a click event on a button rather than on the checkbox itself. Once you've created the element with document.createElement you can create your jQuery object and use the event handlers jQuery got.
var checkbox = document.createElement("input");
$(checkbox).on('click' function(){
//Code here
}
If you want to keep the value of i you must use a closure. Look at my fiddle:
http://jsfiddle.net/u13Le70g/
http://jsfiddle.net/7CV88/8/
On this snippet, I try to bind change to #r(Nth)e <input> element to change the contents of #r(N+1th)s <input> element. But when I change any Nth <input> element, the message shown is always "#r(last N)e change handler"
for(var i = 1; i < numRanges; i++){
$('#r'+i+'e').change(function(){
$('#messages').html('#r'+i+'e change handler');
$('#r'+(i+1)+'s').val($('#r'+i+'e').val());
});
}
You should use the so-called event data to pass the value of i into the onchange event handler:
for(var i = 1; i < numRanges; i++){
$('#r'+i+'e').change(i, function(e){
$('#messages').html('#r'+e.data+'e change handler');
$('#r'+(e.data+1)+'s').val($('#r'+e.data+'e').val());
});
}
Updated Demo.
Note: This just answers directly to your asked problem, I know your code is messy, fixing it is not the main thing to do.
This is a typical "closure" issue.
I was trying the simplest way to get out of the closure issue so I suggested this incorrect way:
for(var i = 1; i < numRanges; i++){
$('#r'+i+'e').change(function(){
var tempVariable = i;
$('#messages').html('#r'+tempVariable +'e change handler');
$('#r'+(tempVariable +1)+'s').val($('#r'+tempVariable +'e').val());
});
}
Thanks to metadings, I realized my mistake so I created a demo to test according to their advice:
var list = $("div");
for(var i = 0; i < list.length; i++){
$(list[i]).click((function(x){
return function(){alert(x);};
})(i));
}
http://jsfiddle.net/9qBXn/
HTH
I'm trying to get data from app engine datastore using javascript and json. it's also allowed jsonp service, here the javascript code:
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
$('#date').text(date);
$('#nohp').text(user);
$('#content').text(content);
}
});
you can also check it here: http://jsfiddle.net/YYTkK/7/
unfortunately, it just retrieve 1 latest data from the datastore. am I doing something wrong with this code?
thanks in advance.
You're not appending elements, but simply changing the value of the same 3 elements in question three times. So you simply overwrite the value you put into it the time before. The easiest way to solve this is to designate the existing tr as a .template and clone it in your loop, make the necessary changes (filling in the values) and then appending it.
Fixing some other unclear things this gives the following
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(records) {
for (var i = 0; i < records.length; i++) {
//Clone the row/unit which we will be using for each record (the class should refer to the type of item it /actually/ is)
row = $(".row.template").clone();
//The template class is hidden, so remove the class from the row/unit
row.removeClass("template");
var map = records[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
//Make the required changes (find looks for the element inside var row)
row.find('.date').text(date);
row.find('.nohp').text(user);
row.find('.content').text(content);
//Append it to the parent element which contains the rows/units
$("tbody").append(row);
}
});
See functional demo: http://jsfiddle.net/YYTkK/13/
You must append a new row in the table in every loop. Here's the working fiddle.
fiddle
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
var row = '<tr><td>'+date+'</td><td>'+user+'</td><td>'+content+'</td></tr>';
$('#valuetable').append(row);
}
});
what you have to do is create dynamic "tr" s and append to tbody and use thead for header and separate the body using tbody and create tr s on each iteration and after the loop append that tr to tbody. that will do the job, as you do now it will override the values at each iteration.
#chamweer answer is correct you have to create a new tr with td's dynamically
like this:
http://jsfiddle.net/YYTkK/14/
Because you're overriding the same td's over and over again.
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
// create a temporary tr
var tr = $("<tr />");
// append to the tr the td's with their values
tr.append($("<td />").text(date), $("<td />").text(user),
$('<td />').text(content));
// finally append the new tr to the table's tbody
$("#js-tbody").append(tr);
}
});