var createSongRow = function(songNumber, songName, songLength) {
var template =
'<tr class="album-view-song-item">'
+ ' <td class="song-item-number" data-song-number="' + songNumber + '">' + songNumber + '</td>'
+ ' <td class="song-item-title">' + songName + '</td>'
+ ' <td class="song-item-duration">' + songLength + '</td>'
+ '</tr>'
;
return template;
};
in the line <td class="song-item-number" data-song-number="' + songNumber + '">' + songNumber + '</td>' is data-song-number another class id?
No. In
<td class="song-item-number" data-song-number="' + songNumber + '">' + songNumber + '</td>'`
we say
td is an element
the td element has two attributes
attribute class has value "song-item-number"
attribute data-song-number has value whatever the value of the songNumber variable is
the content of the td element is also the value of the songNumber variable.
The term "className" you asked about sometimes shows up in client-side JavaScript programming. It refers to the class attribute, and is only called className because calling it class might conflict with a reserved word in a host programming language. If you had said
<td class="a b">...</td>
then you could speak of the td element as having two classes (for CSS targeting perhaps), but we wouldn't say it has two "class names." At any rate, that certainly is not what is going on in your example; your td element has only one class.
data-song-number is not a class.
data is an attribute which allow to store extra information>It basically forms a type of information related to the element.
Any text can be attached to data- which gives a meaningful name about the type of the information associated with the element.
For this example
<div data-name = 'John' id = "someDiv></div>
var _name= document.getElementById("someDiv");
_name.getAttribute("data-name"); // will get the current value of data-name
_name.setAttribute("data-name",'Player'); // will set he new value
Related
var cssClass ;
cssClass = "fa-leaf green-icon";
var textValue = '<span class=' + cssClass + '>' + nodeName + '</span>';
later I've used this text value to in column header in grid panel in Extjs 6.
When page is played green-icon class is removed from class, it becomes like this
<span class="fa-leaf" green-icon>name</span>, but it should have been like this:
<span class="fa-leaf green-icon">name</span>
Your code suggest that you start off with '<span class=fa-leaf green-icon>name</span>, since you do not include the " quotes when creating the html string.
Try that first. When constructing HTML with string concatenation, you have to write the quotes around attributes yourself.
The browser can interpret attributes not wrapped between ", but as you see that leads to issues when the value contains spaces, since <span class="fa-leaf" green-icon> basically means the span has a class attribute with the value fa-leaf and a green-icon attribute without a value that the browser will ignore.
So try: var textValue = '<span class="' + cssClass + '">' + nodeName + '</span>'; first and see how extjs reacts to it.
I am using JavaScript to fill a <div> tag with other <div>s. It has been working until I changed an identifier used inside a onclick event. The old identifier (index) was just a small number from 0-1000, but the new identifier (id) is a uuid.v4() generated string that looks like this:
f5ec8170-e75c-4a93-9997-1a683b7d2e00
I have the exact same code for index and the id. But whenever I click on the button which is suppose to activate the function call with the id as an argument it gives me:
Missing ) after argument
Which does not happen when I click on the button which does the same thing with index as an argument instead of id.
My code:
var id = messages[i].id;
var index = 0;
var newElement =
'<div class="fullMessage" id="fullRightMessage' + i + '">'+
'<h6 class="textMessage">' + messages[i].comment + '</h6>' +
'<button class="likeButtonMessage" onclick="likeClicked(right, ' + index + ', 1);">LIKE</button>' +
'<button class="dislikeButtonMessage" onclick="likeClicked(right, ' + id + ', -1);">DIS</button>' +
'<h4 id="scoreright' + i + '" class="messageScore">' + messages[i].score + '</h4>' +
'</div>'
You do not enclose the uuid with quotation marks. Before it worked because your id was a clean integer which doesn't need them.
Exchange the line with id to
'<button class="dislikeButtonMessage" onclick="likeClicked(right, \'' + id + '\', -1);">DIS</button>' +
Your previous ID was interpreted as an int, which is the reason why it worked.
Your new ID is a string, requiring you to enclose it in quotation marks:
onclick="likeClicked(right, \'' + id + '\', -1);"
This is because this is not valid code:
likeClicked(right, f5ec8170-e75c-4a93-9997-1a683b7d2e00, -1)
I have some jQuery script in which I'm adding some rows to a table (when the user press a button). My problem is that I want to change the id of the elements inside the rows dynamically. I have set a global variable i which I set as an id to some elements inside my table. The problem is that after some debugging I found out that the id doesn't change at all and stays as the letter i (and not the variable i set to 0 and increase every time the user press the button). Any ideas?
var i=0;
var a1=i.toString().concat("1");
var a2=i.toString().concat("2");
var a3=i.toString().concat("3");
$("#table1").append("<tr><td><center><input id=\"a1\"></input></center></td><td>
center><button id=\"a2\">Load</button></center></td><td ><img id=\"a3\"></td>
</tr>");
$("#a2").click(function(){
$z=$("#a1").val();
$("#a3").attr("src",$z);
i++;
});
That's because you're writing those directly as strings. You need to concatenate them into the actual string. You can concatenate strings together using +.
$("#table1").append(
"<tr>" +
"<td>" +
"<center><input id=\"" + a1 + "\" /></center>" +
"</td>" +
"<td>" +
"<center><input id=\"" + a2 + "\" /></center>" +
"</td>" +
"<td>" +
"<center><input id=\"" + a3 + "\" /></center>" +
"</td>" +
"</tr>"
);
For what it's worth, the <center> tag is deprecated and should not be used. You may also consider creating some kind of template rather than generating your HTML as strings directly inside of JavaScript.
I'm trying to create a dynamic table which will have rows added and removed throughout its use. I do not want to have to put id's on every container that I later want to reference.
For instance, I want to add a hidden input to the last cell of a dynamically added row. The row has an id, how can I use dojo.place() when I do not have an id on the last cell?
var pmrCount = dojo.query("#pmhTable >tbody >tr").length;
var rowID = 'pmr_' + pmrCount;
var newPmrRow =
'<tr id="' + rowID + '">' +
'<td>' + pmh + '</td>' +
'<td>' + String(pmr.severity).charAt(0) + '</td>' +
'<td>' + pmr.customerName + '</td>' +
'<td>' + pmr.deviceType + '</td>' +
'<td>' + pmr.deviceModel + '</td>' +
'<td>' + pmr.deviceSerial + '</td>' +
'<td align="center"><a class="cancel-link"></a></td>' +
'</tr>';
//dojo.place(newPmrRow, dojo.query("#pmhTable >tbody"));
var newPmrHiddenInput =
'<input type="hidden" name="pmrs" value="'+ JSON.stringify(pmr)+ '">';
//dojo.query("#" + rowID + " td:last").place(newPmrHiddenInput);
The two commented lines of code are the ones that I am trying to replace with functional code. These do not work, they don't surface any warnings in the error console like other syntax errors. Not sure where to go from here.
I know that dojo.query() returns a NodeList and place() is expecting an DOM node or an id. What's the correct way to do this?
You want to look at the dojo/NodeList-dom extension to Nodelist. It allows you to place each element in a NodeList into an element based on query selector . In AMD Style it looks like:
require(['dojo/dom-construct', 'dojo/NodeList', 'dojo/NodeList-dom', 'dojo/domReady!'], function (domConstruct, NodeList) {
var nodes = new NodeList([domConstruct.toDom('<div>someContent</div>')]);
nodes.place('#x');
});
Looking at the docs I was kind of surprised there wasn't an easier way to do this, so maybe there is a better way than this.
Well, I found two lines of code that seem to work, but I don't know if referencing NodeLists in an Array style is technically correct for this. This is what I did.
dojo.place(newPmrRow, dojo.query("#pmhTable >tbody")[0]);
dojo.place(newPmrHiddenInput, dojo.query("#" + rowID + "> td:last-child")[0]);
Im working on a JavaScript based comment system:
This is the Javascript that generates the comment html:
$.each(comments.user,function(key,value)
{
comment_string += '<div class = "r_comment_header">';
comment_string+= '<a class = "r_comment_user" href = "profile.php?id=' + comments.user_id[key] + '" title = "Profile of ' + value + '">' + value + ' </a>';
if(comments.pm_button[key])
comment_string+= '<input type = "button" class = "comment_send_pm" value = "Message" name = "' + comments.user_id[key] + '" title = "Send this user a private message"/>';
comment_string+= '<span class = "r_comment_time">' + comments.time[key] + '</span>';
comment_string+= '</div>';
comment_string+= comments.content[key];
comment_string+= '<div class = "comment_abuse_wrapper">';
comment_string+= '<input type = "button" class = "comment_report_abuse" name = "' + comments.id[key] + '" value = "Report abuse" title = "Report this comment as inappropriate content"/>';
comment_string+= '</div>';
});
$('#request_comments').html(comment_string);
Now what happens when I add a new comment via a text input field is that the content of the comment ignores the div containers boundaries and does not linebreak:
http://i.imgur.com/V85Vc.png
This is the div containers css:
#request_comments
{
width:658px;
padding: 10px;
margin: 10px 0 0 10px;
}
any suggestions?
This is the normal HTML behaviour. It happens if you have an unwrappable string (i.e. no symboly/whitespace) and is completely unrelated to JavaScript or jQuery.
The easiest solution is using the overflow: hidden CSS option.
PS: You should consider using templates instead of just creating your markup through strings. There are some nice template engines for JavaScript nowadays. Have a look at http://api.jquery.com/jquery.tmpl/ for example.