How to use dojo.query() and dojo.place() together? - 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]);

Related

How to get parent element's ID?

So I got into this tricky situation. I have a variable which present table data:
row += '<td>' + c + '<button class="btn btn-success" id="' + callId + ' " onclick="handleCall()">Call</button>' + '<button class="btn btn-danger" id="' + hangupId + ' " onclick="handleHangUp()">Hangup</button>' + '</td>' ;
Latter on I will append that into my table. Now, when I click Call button, I want to get the button's Id. I have tried this way:
function handleClick() {
console.log(this);
}
but it refer to window object. Can anybody show me the way to achieve my goal? Thanks
Simply pass the elements ID as a parameter to keep it simple,
Change,
onclick="handleCall()"
to,
onclick="handleCall(this.id)"
this referring to the button in question the user is pressing.
then,
function handleClick(id) {
console.log(id);
}
Finally don't use inline event handlers as they are a pain to work with in the long run, make use of the addEventListener method.
row += '<td>' + c + '<button class="btn btn-success" id="' + callId + ' " onclick="handleCall(this)">Call</button>' + '<button class="btn btn-danger" id="' + hangupId + ' " onclick="handleHangUp()">Hangup</button>' + '</td>' ;
function handleClick(element) {
console.log(element);
//here you will have all element properties
}
There are two ways you can do this, you can do it via jQuery by using attr or if you are wanting to stay vanilla Javascript then you can use .id.
For jQuery please see code below:
console.log(jQuery('element').attr('id'));
For Javascript please see code below:
console.log(element.id);

are there two class names in this line?

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

Jquery addEventListener in Chrome with parameters

A feature was developed in an application by clicking a hyperlink in a table, open a div below with a table, filtering contents, depending on the link.
The link was created dynamically in one jQuery function and had the following attributes:
$("#pending div#list").bind("data_loaded", function (event, records) {
var tableBody = $("tbody", $(this));
for (var index = 0; index < records.length; index++) {
var rowHtml = '<tr id="' + rowid + '"><input type="hidden" name="' + rowid + '" id="' + rowid + '" value="1"/>' +
'<td><a class="populate" id="' + rowid + '" onclick="javascript:clickHandler(' + rowid + ');">' + docid + '</a></td>' +
'</tr>';
tableBody.append($(rowHtml));
}
});
In Mozilla Firefox, it works perfectly fine. However in Chrome I cannot call the clickHandler function.
From the information I find on Google, say Inline JavaScript will not be executed.
You can check here: https://developer.chrome.com/extensions/contentSecurityPolicy
But now comes my difficulty.
I changed my hyperlink to:
'<td><a class="populate" id="' + rowid + '" onclick="clickHandler(' + rowid + ');">' + docid + '</a></td>' +
And I created this jQuery:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById([parameter]).addEventListener('click', function () { clickHandler([parameter]); },false);
});
Can anyone explain how I can pass the parameter rowid for jQuery?
Thanks.
Regards.
Your snippets imply you're using raw DOM manipulation in Javascript rather than JQuery (which is good! it's definitely faster) but since you mention JQuery, that's what I'll be suggesting.
Instead of your addEventListener call above, try
$('div#list').on('click', 'a.populate', function() {
clickHandler($(this).attr('id'));
});
And then remove the 'onclick' attribute in the declarations of the anchor tags too.
This will add an event listener to all anchor tages with a class of 'populate' which will call clickHandler passing a string parameter consisting of that anchor tag's 'id'.

Losing mCustomScrollbar effect when performing an ajax call

I'm using mCustomScrollbar to replace the default scrollbars in a div tag containing a table that I draw using javascript to help me reload it when performing ajax calls, here is my HTML code :
<!-- the div that will contain the table-->
<div id="countriesTable" class="customScroll" data-mcs-theme="dark">
</div>
Here is the code of the function that loads the data in the table and draws it inside the div
function reloadTable(data, id) {
var str = '<table class="table"><thead>' +
'<tr><th> Column1 </th>' +
'<th> Column2 </th>' +
'<th> Column3 </th>' +
'<th> Column4 </th></tr></thead><tbody>';
for (var property in data) {
if (data.hasOwnProperty(property)) {
str += '<tr>'
str += '<td>' + data[property][0] + '</td>' +
'<td>' + data[property][1] + '</td>' +
'<td>' + data[property][2] + '</td>' +
'<td>' + data[property][3] + '</td></tr>';
}
}
str += '</tbody></table>';
$(id).html(str);
}
And of course the call of the function to load data and also the function that applies the custom scroll bar effect :
reloadTable(myData, '#countriesTable');
$(".customScroll").mCustomScrollbar();
When the page is loaded the div gets the custom scrollbar successfully, but when I perfom an ajax call to reload data into my table, and I draw it another time using reloadTable function I lose the scrollbar effect.
I've tried to recall the mCustomScrollbar inside the ajax success function but in vain.
I think you need to remove current mCustomScrollbar like this:
$('.customScroll').mCustomScrollbar("destroy")
$('#countriesTable').html("")
reloadTable(myData, '#countriesTable');
$(".customScroll").mCustomScrollbar();

How can I apply a variable as an element ID with JavaScript?

I saw in the firebug the ID is like this whereas I want the value of existingProductArray[i] to be the ID. What am I doing wrong?
var html ='<li id="existingProductArray[i]">'
+ '<input type="image" id="existingProductArray[i]" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
Try this
var id = existingProductArray[i];
var html ='<li id="' + id + '">'
+ '<input type="image" id="' + id + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ id
+ '</li>';
But
ID hence the name should be unique you are giving 2 elements the same ID ( that's a bad idea )
Try changing:
+ '<input type="image" id="existingProductArray[i]" src="...>'
to
+ '<input type="image" id="'+existingProductArray[i]+'" src="...>'
So in your line of code it was just using it as text string. You need to break out of the string and do it.
You just need to close the quotes and concatenate it in with +:
var html ='<li id="existingProductArray[i]">'
+ '<input type="image" id="' + existingProductArray[i] + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
your reference is inside the quotations
var html ='<li id="'+existingProductArray[i]+'">'
+ '<input type="image" id="'+existingProductArray[i]+'" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
I stumbled upon the same problem, I know my problem is not 100% the same as yours but I bet I can help other people out who search for this kind of problem.
I was trying to add a variable as a ID name for a div. I tried several methods mentioned above but none of those seemed to work.
I did the following:
div.id = array[i];
which in your case would have simply been:
id=existingProductArray[i];
No " " or + needed, don't forget to declare the i variable. This might be very obvious for some people with more experience.

Categories