jQuery click event with parameter not working - javascript

I need some help. I am trying to iterate through some Json items, create some li's with some information from the items, but also attach click handlers for the li's, but with a value transmited as parameter.
The problem is that the last value of that parameter is set for or the li's in the list. From what i searched i understood that it has something to do with javascript closure, but can't seem to understand how to fix it.
I am using jQuery and here is the code:
for (var i = 0; i < items.length; i++)
{
// information that will be displayed for each video
var entry = items[i];
var title = entry.title;
var image = entry.thumbnail.hqDefault;
var id = entry.id;
var li = $("<li class='video-single'>");
li.append("<img src='" + image + "' alt='" + title + "'>");
li.append("<h4>" + title + "</h4>");
$(li).click(function() {
displayPopUp(id);
});
ul.append(li);
}
Could anyone please help me fix this code?
Best regards, Marius.

The issue is that JS is function scoped so the id within your closure is the last id from your for loop. To fix this use forEach so you run each iteration of your loop in a separate scope e.g.
items.forEach(function (el, i) {
// information that will be displayed for each video
var entry = items[i];
var title = entry.title;
var image = entry.thumbnail.hqDefault;
var id = entry.id;
var li = $("<li class='video-single'>");
li.append("<img src='" + image + "' alt='" + title + "'>");
li.append("<h4>" + title + "</h4>");
$(li).click(function() {
displayPopUp(id);
});
ul.append(li);
});

you need delegated event as elements are created dynamically, you can use class that is being added on li which is video-single:
$(document).on('click','.video-single',function() {
displayPopUp(id);
});
you can read about Delegated Events HERE

in order to bind an event to a dynamically added element you need to delegate it as below:
for (var i = 0; i < items.length; i++)
{
// information that will be displayed for each video
var entry = items[i];
var title = entry.title;
var image = entry.thumbnail.hqDefault;
var id = entry.id;
var li = $("<li class='video-single'>");
li.append("<img src='" + image + "' alt='" + title + "'>");
li.append("<h4>" + title + "</h4>");
$(document).bind('click',li,function() {
displayPopUp(id);
});
ul.append(li);
}

Related

element.appendChild() giving unexpected result: removes existing children

I am creating a 'photos' page on a website. It uses PHP to retrieve the filenames in a directory, and then attempts to create divs (with images in them) programmatically with javascript. However, when I try to create 'w3-third' divs, edit the innerHTML so that it embeds an image, and (the problematic step) add them to the 'w3-row' div, it removes the existing children. Hence, there is only one image per row.
I have been looking for alternate code / solutions, but the element.appendChild() function seems to be the only method; I have tried element.children.push(), but element.children is an [HTMLCollection] which (I guess) is read-only.
$.getJSON("content/photospage/get_filenames.php", function(data){
var photoFileNames = data;
console.log(photoFileNames.length + " images to display.");
var photosDiv = document.getElementById("divPhotos");
for(var i = 0; i < photoFileNames.length; i += 3){
console.log("Loop! i=" + i);
var newRow = document.createElement("div");
newRow.classList.add("w3-row");
newRow.classList.add("w3-padding-8")
var newImg1 = newImg2 = newImg3 = document.createElement("div");
newImg1.classList.add("w3-third")
newImg2.classList.add("w3-third")
newImg3.classList.add("w3-third")
newImg1.innerHTML = "<img src='" + dir + photoFileNames[i] + "' class='w3-round w3-margin-bottom constrained'>";
newRow.appendChild(newImg1);
console.log("displayed img " + (i))
if(i+1 < photoFileNames.length){
newImg2.innerHTML = "<img src='" + dir + photoFileNames[i+1] + "' class='w3-round w3-margin-bottom constrained'>";
newRow.appendChild(newImg2);
console.log("displayed img " + (i+1))
}
if(i+2 < photoFileNames.length){
newImg3.innerHTML = "<img src='" + dir + photoFileNames[i+2] + "' class='w3-round w3-margin-bottom constrained'>";
newRow.appendChild(newImg3);
console.log("displayed img " + (i+2))
}
console.log(newRow.children);
photosDiv.appendChild(newRow);
}
The html element that exists by default:
<div class="w3-container w3-content w3-center w3-padding-32 " id="divPhotos">
</div>
Sorry for the large amount of code above. Thanks for any assistance, and I'm happy to clarify anything that I failed to mention. :)
Also, I am aware that the code is clunky and inefficient, so let me know if you pick up on anything I could do better. Thanks again! :)
With
var newImg1 = newImg2 = newImg3 = document.createElement("div");
you've created one object (an HTMLDivElement) in memory, which 3 variable names (newImg1, newImg2, newImg3) refer to. You do not have 3 separate elements. When you call appendChild with one of the elements, you remove it from wherever it previously existed in the DOM.
Since you want separate elements, you should do so explicitly:
var newImg1 = document.createElement("div");
var newImg2 = document.createElement("div");
var newImg3 = document.createElement("div");
You could make the code less repetitive by using another for loop instead of creating separate standalone elements:
for (let j = 0; j < 3; j++) {
const thisIndex = i + j;
if (thisIndex >= photoFileNames.length) {
break;
}
const img = document.createElement("div");
img.innerHTML = "<img src='" + dir + photoFileNames[thisIndex] + "' class='w3-round w3-margin-bottom constrained'>";
newRow.appendChild(img);
}

Injecting elements and attaching Click event handlers in a loop with Javascript

I'm trying to make a dropdown which is populated from an array with Javascript. Each Item needs to have an event trigger attached, but it currently only attaches the event to the last element. I have tried the examples based on fixing closures but is still only attaches to the last element.
https://jsfiddle.net/z3h1uux4/
var ArrayUName = ["A","B","C"]
var ArraySlug = ["Q","W","E"]
for (i = 0; i < ArrayUName.length; i++) {
var GoalID = ArrayUName[i] + '-' + ArraySlug[i];
document.getElementById("TheContent").innerHTML +=
'<a class="GoalIDBtn" id="' + GoalID + '">' + ArrayUName[i] + ' / ' + ArraySlug[i] + '</a></br>';
(function(_i, _GoalID)
{document.getElementById(_GoalID).addEventListener(
"click",
function() {alert("Click Made : " + _i)}
);
})(i, GoalID);
console.log("Loop #" + i);
}
That's because innerHTML is a destructive property. It recreates the set content and creates new elements, the newly generated elements do no have any click handlers bound to them. You should create a node (element) instead of using innerHTML.
You can use the document.createElement and HTMLElement.appendChild methods instead:
var a = document.createElement('a');
a.className = 'GoalIDBtn';
a.id = GoalID;
a.textContent = ArrayUName[i] + ' / ' + ArraySlug[i];
document.getElementById("TheContent").appendChild(a);
(function(_i /*, _GoalID*/) {
a.addEventListener("click", function() {
alert("Click Made : " + _i);
});
})(i);
Here is a demo on jsfiddle. Note that it doesn't add the br elements and you can use the similar DOM APIs for creating them.

why is only the last item is showing and not all of them

I am using the code below to call a php page that displays all the products and then parse them and display them on the string. This was working fine last week displaying all the results however now it has seem to have broken and only displays the last results from the database and after several days and painful hour staring at my screen i am starting to go mad and could do with some help.
function display(results) {
article = document.getElementById("homeArticle");
item = '';
for (var i = 0; i < results.length; i++){
var item = results[i];
var name = item.P_NAME;
var description = item.P_DESCRIPTION;
var price = item.P_PRICE;
// next I add to the string that we want to place on the page
item = '<section id="homePageSection"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';
};
article.innerHTML = item;
}
function getItems() {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var results = JSON.parse(this.responseText);
display(results.rows);
};
xhr.open("GET", "displayData.php");
xhr.send();
}
window.addEventListener("load", getItems);
if anyone could have any pointers that would help massively thank you!
You needed two variables. One that you use to build up the html string and one to hold each item from the results array.
Change your code to this:
function display(results) {
article = document.getElementById("homeArticle");
var html = '';
for (var i = 0; i < results.length; i++){
var item = results[i];
var name = item.P_NAME;
var description = item.P_DESCRIPTION;
var price = item.P_PRICE;
// next I add to the string that we want to place on the page
html += '<section id="homePageSection"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';
};
article.innerHTML = html;
}
That way you will append the html strings rather than overwrite the prior one.
Also consider making sure that each html element has a unique id, you could do this by appending i to the id e.g.
html += '<section id="homePageSection-'+i+'"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';
Concat the item string, and don't use duplicate IDs, but classes instead:
item += '<section class="homePageSection"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';
What you were doing is overwriting item on each iteration, which I why you only get the last one.
UPDATE
Forgot to provide the code for that last sentence I wrote. To avoid overwriting it, either use a different variable (as in the other answer), or simply assign the values directly without creating unnecessary variables, like this:
for (var i = 0; i < results.length; i++){
item += '<section class="homePageSection"> <p>Name:' +
results[i].P_NAME +
'</p><p>Description:' +
results[i].P_DESCRIPTION +
'</p><p>Price:' +
results[i].P_PRICE +
'</p></section>';
}

how to get Id of row when pop up option click (got Id using global variable)?

can you please tell me how to get Id of row when pop up option click ?I generated the row dynamically when "add" button is press.on Row there is an icon ":" ,on click of icon it show pop up screen When I click "edit" or other option I want to show Id of row on which it it open .I am able to get event of edit .But not able to get id.
http://jsfiddle.net/4ajeB/5/
function createTestCase(testCaseName, iscreatedFromScript, jsonObject) {
var id;
if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
id = "tc_1";
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
var conunter = count;
} else {
id = $("#testCaseContainer li:last").attr('id');
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
var conunter = count;
id = id.substring(0, index) + "_" + parseInt(count + 1);
}
var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow">' + id + '<i class="icon1 test_h"></i></li>' + '</ul></div>';
$('#testCaseContainer').append(html).enhanceWithin();
}
$('.edit_h').click(function(){
alert("edit"+$(this).id)
})
I got the ID using global variable.Can it is possible to get ID without using variable ?
Just add the ID to the .edit_h as data, and access it in the click event.
...
$('.edit_h').data('originalId', id);
$('#testCaseContainer').append(html).enhanceWithin();
}
$('.edit_h').click(function(){
alert("edit ID:"+$(this).data('originalId'));
})
Updated fiddle: http://jsfiddle.net/4ajeB/6/

How add a link in only one existing li

This is my problem: I have a ul list that has undertemined number of li, because it depends the number of the files in a folder. It lists those files in a div, and when the mouse hovers one of them, I want it till get the new link only in its div.
My code is this:
function showImages(data) {
var ul = "<ul id='productImages'>";
for (i = 0; i < data.length; i++) {
var tempButton = i;
var link = '#Html.ActionLink("Pedir Detalhes","ContactUs", new { tempVerifyButton = 3}, new { #class = "visualize"})';
var directories = data[i];
ul += "<li id = 'element" + i.toString() + "'><img src='../Content/images/Products/" + directories.ImageName + "' /><div class = 'description'><div id = 'productsText'>" + directories.DescriptionName + "</div></div></li>";
}
ul += "</ul>";
$("#directoryImages").append(ul);
for (i = 0; i < data.length; i++) {
var element = "ul#productImages li#element" + i.toString();
$(element).hover(
function () {
var link = '#Html.ActionLink("Pedir Detalhes","ContactUs", new { tempVerifyButton = 3 }, new { #class = "visualize"})';
$(".description").append("<div class = 'visualize'>" + link + "</div>");
});
}
}
The problem with this code is when the mouse hovers one of the li element, all .description gets the link, and I want only the current hovered li till get the link, and then when it loses focus the link disappears.
EDITED:
I already use $(this).append($(".description").append("< div class = 'visualize'>" + link + "< /div>"));
Any ideas?
Try with this(current element)
$(this).append("<div class = 'visualize'>" + link + "</div>");
http://learn.jquery.com/javascript-101/this-keyword/
this is a special keyword that is used in methods to refer to the object on which a method is being invoked.

Categories

Resources