referencing the id of a div [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to reference the id of a div-table row in the variable thisId. When I console.log(thisId), it says that thisId is undefined. What am I doing wrong?
$('.deleteButton').click(function(){
var thisId = $(this).parent().parent().id;
for (var i = 0; i < tableData.length; i++) {
if (tableData[i].rowValue === thisId) {
tableData.splice(thisId, 1);
}
}
$(this).parent().parent().remove();
});
}
}
HTML
"<div id='" + tableData[i].rowValue + "' class=\"Row\">" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].textInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].perIntervalInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<p>" + tableData[i].radioInput + "</p>" +
"</div>" +
"<div class=\"Cell\">" +
"<button class=\"deleteButton\">Delete</button>" +
"</div>" +
"</div>"

ID is an attribute and so can be reference via the attr(..) function.
var thisId = $(this).parent().parent().attr("id");

Since you're using jQuery, you can use:
var thisId = $(this).parent().parent().attr('id');
But your HTML isn't here to show us what you're actually referencing, and whether you're referencing it properly, so there might be something else in play.

Related

Displaying Arrays in innerHTML [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I am trying to display two bits of data from an array. The first is the title which is comes under [0][0] and the second is a description which is [0][2].
This is what i have written.
element.innerHTML = "<div>" + "<h3>" + all_films[0][0]; + "</h3>" + "<p>" + all_films[0][2]; + "</p>" + "</div>"
it's strange because it works if i just write
"<div>" + "<p>" + all_films[0][2]; + "</p>" + "</div>"
or if i just write
"<div>" + "<h3>" + all_films[0][0]; + "</h3>" + "</div>"
But they never seem to work together. Why is this? Am i not allowed two arrays in the same thingy or what?
You have semicolons where they shouldn’t be, turning your code into this:
element.innerHTML = "<div>" + "<h3>" + all_films[0][0];
+"</h3>" + "<p>" + all_films[0][2];
+"</p>" + "</div>";
where the last two statements have no effect. (JavaScript has a unary + operator, as in +5 === 5.) Remove the semicolons:
element.innerHTML = "<div>" + "<h3>" + all_films[0][0] + "</h3>" + "<p>" + all_films[0][2] + "</p>" + "</div>";
Remove the semicolons:
element.innerHTML = "<div>" + "<h3>" + all_films[0][0] + "</h3>" + "<p>" + all_films[0][2] + "</p>" + "</div>";
Semis belong at the end of a line of javascript, not in the middle.
Get rid of random semicolons during string concatenation...

How do I write into the html using JavaScript?

<script>
for(var numCols = 1; numCols <= 12; numCols++){
document.write(
"<div class='row'>" +
"<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
"</div>";
);
}
</script>
I know there's document.write/document.writeln but I have this script and I don't know what's wrong. I'm trying to visualize Bootstrap's col-md-* thing
Remove the semicolon after last </div>
<script>
for(var numCols = 1; numCols <= 12; numCols++){
document.write(
"<div class='row'>" +
"<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
"</div>"
);
}
</script>
The problem is with the [numCols] part of string concatenation and unnecessary semicolon at the end of function call argument.
Basically, what this "part" does is it returns an Array with one element, resolving to numCols variable value. You want to return the variable itself, so just remove [] wrapper. Technically, JS allows you to use this syntax, because it casts the array to string, concatenating all the elements within the array with an empty string (equivalent to [ numCols ].join("")), but it's just unnecessary in this case.
Another thing - you are terminating HTML string with "</div>"; - the semicolon is invalid in this place, you should remove it.
Remove the semiColon inside your document.write method.
for(var numCols = 1; numCols <= 12; numCols++){
document.write(
"<div class='row'>" +
"<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
"</div>"
);
}
Be aware. Working with the DOM means, the client has to do the work. Doing several changes to the DOM could lead us to several performance issues.
The ideal is, do not modify the DOM. If you really need to do this. Find the way to do the less changes to the DOM.
The piece of code you provide us have the possibility to be improved.
In your code, you are using a loop. 12 times the DOM would change. These is far away of be a good practice.
A better approach is to write the DOM only 1 time. In this scenario you can easily achieve adding two lines of code.
From this (12 DOM changes):
for(var numCols = 1; numCols <= 12; numCols++){
document.write(
"<div class='row'>" +
"<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
"</div>"
);
}
To this (1 change to the DOM):
var newHtml = '';
for(var numCols = 1; numCols <= 12; numCols++){
newHtml+= "<div class='row'>" +
"<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
"</div>";
}
document.write(newHtml);
You can use innerHTML to change the content of DOM element when the page is loaded.
window.onload = function() {
var content = "";
for(var numCols = 1; numCols <= 12; numCols++) {
content += "<div class='row'>" +
"<div class='well text-center col-lg-" + numCols + "'>" + ".col-lg-" + numCols + "</div>" +
"</div>";
}
document.getElementsByTagName('body')[0].innerHTML = content;
}

jQuery post() code - how to make cleaner and faster? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm in the midst of learning how to code.
The code below shows what happens after I click a button - a jQuery post() call is made which submits the data to a PHP form and then displays the result from the database query into a div.
The code is fine, but I'm simply wondering if there's any way to make it better.
By better, I mean if there is any way to make the code more readable, faster, and less buggy.
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
var test_for_null = product_details_array[0];
if ( test_for_null.length > 0)
{
$('#product_tags_container').append(
"<div class='product_tags'>" + "<img id='remove_tag' src='../function icons/cross.png'>" + "<div id='product_texture_picture'>" + "<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" + "</div>" + "<div id='product_title'>" + product_details_array[0] + "</div>" + "<br><br>" + "<div id='product_brand'>" + product_details_array[6] + "</div>" + "<div id='product_price'>"+ product_details_array[3] + "</div>" + "</div>");
}
});
I cleaned up all the unnecessary concatenation within your append function. The append function is too long to maintain in my opinion. I'm guessing your server side responses
No response: ''
JSON array is null: null
JSON array is empty: []
$.post("load_product.php", {
id: IDname
}).done(function(data) {
if (data.length>0 && data!=null && data!='[]') {
var product_details_array = $.parseJSON(data);
$('#product_tags_container').append("<div class='product_tags'><img id='remove_tag' src='../function icons/cross.png'><div id='product_texture_picture'><img src='product_pictures/" + product_details_array[4] + product_details_array[5] + "'></div><div id='product_title'>" + product_details_array[0] + "</div><br><br><div id='product_brand'>" + product_details_array[6] + "</div><div id='product_price'>" + product_details_array[3] + "</div></div>");
}
}
});
You don't have to use this, but if I had to 'remake' this code, I'd do it like this:
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
if (product_details_array[0].length > 0) {
$('#product_tags_container').append(
"<div class='product_tags'>" +
"<img id='remove_tag' src='../function icons/cross.png'>" +
"<div id='product_texture_picture'>" +
"<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" +
"</div>" +
"<div id='product_title'>" + product_details_array[0] + "</div>" +
"<br><br>" +
"<div id='product_brand'>" + product_details_array[6] + "</div>" +
"<div id='product_price'>" + product_details_array[3] + "</div>" +
"</div>");
}
});
In my opinion this is more readable. If I had to read your 1-line html code I'd re-format it to look like the example I gave first. If you or anyone else has to make an edit it would be easier to do like this.
EDIT:
function assembleProductHTML(product_details_array) {
return "<div class='product_tags'>" +
"<img id='remove_tag' src='../function icons/cross.png'>" +
"<div id='product_texture_picture'>" +
"<img src='" + "product_pictures/" + product_details_array[4] + product_details_array[5] + "'>" +
"</div>" +
"<div id='product_title'>" + product_details_array[0] + "</div>" +
"<br><br>" +
"<div id='product_brand'>" + product_details_array[6] + "</div>" +
"<div id='product_price'>" + product_details_array[3] + "</div>" +
"</div>";
}
$.post("load_product.php", {'ID': IDname}, function(json) {
var product_details_array = $.parseJSON(json);
if (product_details_array[0].length > 0) {
$('#product_tags_container').append(assembleProductHTML(product_details_array));
}
});

SyntaxError: missing ; before statement .each [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
function readMessages(data, textStatus)
{
clearChat = data.clear;
if (clearChat == 'true') {
$('#chatmessageinner')[0].innerHTML = "";
lastMessageID = -1;
}
if (data.messages.length > 0)
{
if(lastMessageID > data.messages[0].id) return;
lastMessageID = data.messages[data.messages.length - 1].id;
}
$.each(data.messages, function(i, message) {
var htmlMessage = "";
htmlMessage += "<div class="item" style="color:" + message.color + "">";
htmlMessage += "[" + message.time + "] " + message.name + " said: <br/>";
htmlMessage += message.message;
htmlMessage += "</div>";
$('#chatmessageinner')[0].innerHTML += htmlMessage;
});
}
This is function, error is:
SyntaxError: missing ; before statement
In line $.each(data.messages, function(i, message) {
What is wrong? Help me, please.
You have to escape your string:
htmlMessage += "<div class="item" style="color:" + message.color + "">";
This is wrong and should be:
htmlMessage += "<div class=\"item\" style=\"color:" + message.color + "\">";
Or, better, use the single quotes:
htmlMessage += '<div class="item" style="color:' + message.color + '">';
I think your problem is this line
htmlMessage += "<div class="item" style="color:" + message.color + "">";
You're using double quotes inside double quotes, should be like
htmlMessage += "<div class=\"item\" style=\"color:" + message.color + "\">";
The code building a string is a bit off.
$.each(data.messages, function(i, message) {
var htmlMessage = "";
htmlMessage += "<div class='item' style='color:" + message.color + "'>";
htmlMessage += "[" + message.time + "] " + message.name + " said: <br/>";
htmlMessage += message.message;
htmlMessage += "</div>";
$('#chatmessageinner')[0].innerHTML += htmlMessage;
});

javascript link to url for metro buttons [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Im using this, http://jqmetro.codeplex.com/ but cant get it to work. Instead of alert message i would like go to page.
Thank you,
$("#metroaqui").AddMetroDoubleButton('bt4', 'metro-azul', 'Style/Imagem/carta.png', '4', 'alert("this is a alert message");');
in the javascript:
(function ($) {
$.fn.AddMetroSimpleButton = function (id, theme, imagem, texto, link) {
var el = $(this);
var html_code = "<div";
if (id != '') {
html_code += " id='" + id + "'";
}
if (link != '') {
html_code += " onclick='" + link + "'";
}
html_code += " class='metro-btn metro metrosingle " + theme + "'>\r\n";
html_code += "\t<div class='imgsimple'><img src='" + imagem + "' alt='" + texto + "' /></div>\r\n";
html_code += "\t<span>" + texto + "</span>\r\n";
html_code += "</div>\r\n";
el.append(html_code);
};
Made this correction it goes to page url
if (link != '') {
html_code += " onclick=window.location='" + link + "'";
}

Categories

Resources