Making multiple elements with jquery each() and jquery function - javascript

Well, I have a table with multiple text nodes I'm getting through the .text() function and linking to another table with one row that I'm using as a timeline.
I tried to input in a single td of the text values that corresponds to the correct data, but I only managed to grab the last value I in my loop, instead of getting them all. Here is my code:
var tHold, divLine, id, dataTitle, dataDescription;
$(".class1").each(function(){
tHold = $(this);
$(".class2").each(function(){
if ($(this).text() == tHold.attr("value")){
if($('#1').children("div#" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="' + tHold.attr("name") + '" class="b" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#1").append(divLine);
}
if($('#2').children("div#id" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="des' + tHold.attr("name") + '" class="c" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#2").append(divLine);
}
}
});
});
It's been simplified and cut out of a whole context , but all that matters is there. How can I set dataDescription to be multiple divs with diferent values instead of just the last I loop through?

Related

How to pass argument from parsed json value to onclick function?

We have a table with data. My goal is to pass an argument from parsed JSON value to another javascript function - named newStory(value['stories']) from onclick method.
Tried a lot of different methods with no success..
json[key]['date'] = '<span class="' + styleBlock + '">' + value['date'] + '</span>';
json[key]['category'] = '<span class="' + styleCatDefault + '">' + value['category'] + '</span>';
json[key]['subcategory'] = '<span class="' + styleSubcatDefault + '">' + value['subcategory'] + '</span>';
json[key]['stories'] = '<span>' + value['stories'] + '</span>';
Any help appreciated!
Edit:
Line with many quotes finally worked:
json[key]['stories'] = '<span>' + value['stories'] + '</span>';
Just add value in string like this:
var str = `${jsvar}`
json[key]['stories'] = `<span>` + value['stories'] + '</span>';
Or
json[key]['stories'] = `<span>${value['stories']}</span>`;

When looping through an array how do I add/remove classes from elements that fit a specific criteria?

Below I have code that loops through a list of items and I want to remove a class "hazardous" from div class item-left if element.hazardous == no. The way I have it set up right now is not working and I'm wondering if it might be because I need to find a way to target the specific non hazardous array element.
What "hazardous" does in my CSS is it adds a solid red border if the hazardous class is active. Otherwise hide the red border.
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="item-left hazardous" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url + '"></div></li>')
if (element.hazardous == 'no') {
$('.item-left').removeClass('hazardous')
}
});
$('.results').html(itemsHTML)
}
Instead of hardcoding the hazardous class in the first place, apply it conditionally before the markup is rendered to DOM:
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var classes = ['item-left', element.hazardous === 'no' ? '' : 'hazardous'].join(' ').trim()
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="' + classes + '" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url +
'"></div></li>')
});
$('.results').html(itemsHTML)
One of the problems you were facing was that you were trying to remove a class from a DOM element that didn't yet exist - at that point it was still a string.

how to use image tag

Can someone help me out in inserting an image in the below function. I've used a json object that returns values for campaignid and campaignname.
<script>function searchedCampaigns(data) {
if (data[0].length > 0) {
var searchcmp = "";
for (var j = 0; j < data[0].length; j++) {
var input = document.createElement("input");
console.log(input.name);
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '/>' +
**// image to be inserted here**
+ data[0][j].campaignName + '<br/>'; // value
}
$("#newcamp").html(searchcmp);
}}</script>
output should be this
I'm getting the checkbox as well as the campaign name. I want the image in between these two.
As simple as this..
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '/>' +
'<img src="'+yourimageurlfromdata+'"/>'+
'data[0][j].campaignName + '<br/>';
I suggest you a code like this one:
<input type="checkbox"><img src="Image.PNG">Test</img></input>
Also, based on your code, it can be updated like this:
searchcmp += '<input type="checkbox" id=' + data[0][j].campaignId + ' name=' + data[0][j].campaignName + '><img src=' + YOUR_URL_LOCATION + ' />' + data[0][j].campaignName + '</input><br/>';
Where YOUR_URL_LOCATION, can be in the JSON or somewhere else.
It's going to display something like this:

Editable rows is not working in table with JSON data?

I parsed JSON objects and made a table structure to display the elements. I wanted to make rows of table editable. This is is the code i used to form the table.
(jsonDatag.data).forEach(function(item) {
var _tr = '<tr class="' + item.symbol + '"><td>' + item.symbol + '</td><td class="' + hclass + '">' + item.highPrice + '</td><td class="' + lclass + '">' + item.lowPrice + '</td><td class="' + oclass + '">' + item.openPrice + '</td><td class="' + ltclass + '">' + item.ltp + '</td><td>' + item.previousPrice + '</td><td>' + item.lastCorpAnnouncementDate + '</td></tr>'
_tbody += _tr
});
_thead = _thead + _tbody;
$('.mytable').html(_thead)
}
Now I added these lines to make my rows editable but it is not reflecting in my output.
$('tr.'+item.symbol+'').each(function() {
$(this).html('<input type="text" value="' + $(this).html() + '" />');
});
What is going wrong here and how can i correct it ?
Editable rows is not working in table
This seems to be confusing since it is the td which is editable.
Also this snippet
$('tr.' + item.symbol + '').each(function() {
$(this).html('<input type="text" value="' + $(this).html() + '" />');
});
probably will place an input.
If you are looking to make a editable td then
<td contenteditable="true">
will work

how to get the value of id if its id is an integer value in jquery

I need to get the id of <p>.T have coded like this:
var p = $(this).closest('li').find('p[id^=name]').text();
It returns only the text value,not the number.
My code is like this:
$.each(response.mname, function (i, mname) {
$('#feat').append(
'<li>' + '<a>' +
'<h4>' + '<p id=name' + i +'>' + mname.Name + '</p>' + '</h4>' +
'<input type="button" value="infobutton" background-color="green" id="button' + i +'" >' + '</input>' +
'</a>' + '</li>');
});
$("input[id^=button]").click(function () {
var p = $(this).closest('li').find('p[id^=name]').text();
alert(p);
});
Try this
'<p id="name' + i +'">'
Also change if you want id
var p = $(this).closest('li').find('p[id^=name]').attr('id').replace(/name/, '');
It will return only integer 1,2 from names like name1,name2 etc..

Categories