We Keep Coding

How to concatenate and pass parameters values in html using jQuery

I'm using jQuery to get values from ajax rest call, I'm trying to concatenate these values into an 'a' tag in order to create a pagination section for my results (picture attached).
I'm sending the HTML (divHTMLPages) but the result is not well-formed and not working, I've tried with double quotes and single but still not well-formed. So, I wonder if this is a good approach to accomplish what I need to create the pagination. The 'a' tag is going to trigger the onclick event with four parameters (query for rest call, department, row limit and the start row for display)
if (_startRow == 0) {
console.log("First page");
var currentPage = 1;
// Set Next Page
var nextPage = 2;
var startRowNextPage = _startRow + _rowLimit + 1;
var query = $('#queryU').val();
// page Link
divHTMLPages = "<strong>1</strong> ";
divHTMLPages += "<a href='#' onclick='getRESTResults(" + query + "', '" + _reg + "', " + _rowLimit + ", " + _startRow + ")>" + nextPage + "</a> ";
console.log("Next page: " + nextPage);
}
Thanks in advance for any help on this.
Pagination

Rather than trying to type out how the function should be called in an HTML string, it would be much more elegant to attach an event listener to the element in question. For example, assuming the parent element you're inserting elements into is called parent, you could do something like this:
const a = document.createElement('a');
a.href = '#';
a.textContent = nextPage;
a.onclick = () => getRESTResults(query, _reg, _rowLimit, _startRow);
parent.appendChild(a);
Once an event listener is attached, like with the onclick above, make sure not to change the innerHTML of the container (like with innerHTML += <something>), because that will corrupt any existing listeners inside the container - instead, append elements explicitly with methods like createElement and appendChild, as shown above, or use insertAdjacentHTML (which does not re-parse the whole container's contents).

$(function()
{
var query=10;
var _reg="12";
var _rowLimit="test";
var _startRow="aa";
var nextPage="testhref";
//before divHTMLPages+=,must be define divHTMLPages value
var divHTMLPages = "<a href='#' onclick=getRESTResults('"+query + "','" + _reg + "','" + _rowLimit + "','" + _startRow + "')>" + nextPage + "</a>";
///or use es6 `` Template literals
var divHTMLPages1 = `` + nextPage + ``;
$("#test").append("<div>"+divHTMLPages+"</div>");
$("#test").append("<div>"+divHTMLPages1+"</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

How do I look for the TD inside a TR that is below the TR that I click?

The purpose of this code is to make an ajax call if the <td> contained within the <tr> that is below the <tr> that was clicked, but only if the hidden <tr> is empty. Eventually I plan to take that data and do something with it, but for right now, I just need to get this thing which emulates an accordion as a table working. Due to this table being made on the same html file that I have other .hidden elements on, I had to create custom classes to hide these particular ones. The class detail-view makes it visible, and the class hidden-detail contains display:none. I know that postDetails works as far as finding the right data. What i'm more worried about is finding out why FireFox's dev tools say statusRow and detPane are marked as (unavailable) throughout this code, whereas statusRow.closest('tr').next('tr') actually appears to contain the row detPane, as intended. Is there something wrong with the jQuery or selectors? What's going on here?
function makeOrderTable(response, username, sesstoken) {
$(jQuery.parseJSON(JSON.stringify(response))).each(function() {
var foNum = this['Factory Order#'];
var pO = this['PO#'];
var status = this['Status'];
var shipDate = this['Ship Date'];
$('.orders tbody').append(
'<tr class="status-row">'+
'<td>' + foNum + '</td><td>' + pO + '</td><td>' + status + '</td><td>' + shipDate + '</td>'+
'</tr>'+
'<tr class="detail-row hidden-detail">'+
'<td colspan="4"></td>'+
'</tr>'
);
});
$(document).ready(function() {
$('table').on('click', 'tr.status-row', function() {
var statusRow = $(this);
var detPane = $(statusRow[0]).closest('tr').next('tr');
$('.detail-view').addClass('hidden-detail');
$('.detail-view').removeClass('detail-view');
detPane.addClass('detail-view');
detPane.removeClass('hidden-detail');
if (detPane.find('td').text == '')
{
var value = statusRow.find('td:first-child').text();
postDetails(value, username, sesstoken, detPane.find('td'));
}
});
});
}

The problem was that as epascarello pointed out, text isn't a valid property. Ergo, couldn't find anything. But, I also needed to grab the details td separately--i.e. couldn't access things from other things and just daisy-chain selectors all over the place. So, here's the end result.
function makeOrderTable(response, username, sesstoken) {
$(jQuery.parseJSON(JSON.stringify(response))).each(function() {
var foNum = this['Factory Order#'];
var pO = this['PO#'];
var status = this['Status'];
var shipDate = this['Ship Date'];
$('.orders tbody').append(
'<tr class="status-row">'+
'<td>' + foNum + '</td><td>' + pO + '</td><td>' + status + '</td><td>' + shipDate + '</td>'+
'</tr>'+
'<tr class="detail-row hidden-detail">'+
'<td colspan="4"></td>'+
'</tr>'
);
});
$(document).ready(function() {
$('table').on('click', 'tr.status-row', function() {
var statusRow = $(this);
var detRow = statusRow.closest('tr').next('tr');
var details = this.nextElementSibling.querySelector('td');
$('.detail-view').addClass('hidden-detail');
$('.detail-view').removeClass('detail-view');
detRow.addClass('detail-view');
detRow.removeClass('hidden-detail');
if (details.innerText == '')
{
var value = statusRow.find('td:first-child').text();
postDetails(value, username, sesstoken, details);
}
});
});
}

If I understand the question correctly, I think your selector for the "hidden" tr is incorrect.
You have the click event attached to the tr, so you shouldn't have to do .closest('tr'). Just var detPane = $(statusRow[0]).next('tr'); should get you the next tr after the one that was clicked.

Passing argument to on click event of dynamically generated element

I am trying to pass arguments to onclick event of dynamically generated element. I have already seen the existing stackoveflow questions but it didn't answer my specific need.In this existing question , they are trying to access data using $(this).text(); but I can't use this in my example.
Click event doesn't work on dynamically generated elements
In below code snippet, I am trying to pass program and macroVal to onclick event but it doesn't work.
onClickTest = function(text, type) {
if(text != ""){
// The HTML that will be returned
var program = this.buffer.program;
var out = "<span class=\"";
out += type + " consolas-text";
if (type === "macro" && program) {
var macroVal = text.substring(1, text.length-1);
out += " macro1 program='" + program + "' macroVal='" + macroVal + "'";
}
out += "\">";
out += text;
out += "</span>";
console.log("out " + out);
$("p").on("click" , "span.macro1" , function(e)
{
BqlUtil.myFunction(program, macroVal);
});
}else{
var out = text;
}
return out;
};
console.log of out give me this
<span class="macro consolas-text macro1 program='test1' macroVal='test2'">{TEST}</span>
I have tried both this.program and program but it doesn't work.

Obtain values of span element attributes, since you include them in html:
$("p").on("click" , "span.macro" , function(e)
{
BqlUtil.myFunction(this.getAttribute("program"),
this.getAttribute("macroVal"));
});
There are, however, several things wrong in your code.
you specify class attribute twice in html assigned to out,
single quotes you use are not correct (use ', not ’),
quotes of attribute values are messed up: consistently use either single or double quotes for attribute values
var out = "<span class='";
...
out += "' class='macro' program='" + program + "' macroVal='" + macroVal + ;
...
out += "'>";
depending on how many times you plan to call onClickTest, you may end up with multiple click event handlers for p span.macro.

Javascript add event listener in a foreach loop only last entry works

I have a function which goes through an Array and adds <h3> elements to a div. Then it adds an event listener (an onclick) to the current <h3> element, but only the last element which goes through the function is set by the onclick.
var runstr = [];
//txt comes from the content of a tab separated textfile spilt by '\n'
txt.forEach(function (lcb) { //lcb goes through each line of txt
lcb = lcb.split(" ", 30); //split the line by tab
//MainContent_Infralist is a div where the <h3> elements are listed and lcb[2] is the title
document.getElementById("MainContent_Infralist").innerHTML =
document.getElementById("MainContent_Infralist").innerHTML +
'<h3 class="Infraa" id="' + "Infralist_" + lcb[2] + '">' + lcb[2] + '</h3>';
//I put the id into an array to get the index of the marker later
runstr.push("Infralist_" + lcb[2]);
//I'm working with openlayers here i try to set the entry of
//the list.onlick to trigger a mousedown on a marker.
//And there is the problem: It works, but only for the last entry of my <h3> list...
document.getElementById("Infralist_" + lcb[2]).onclick = function () {
var theM = runstr.indexOf("Infralist_" + lcb[2]);
markers.markers[theM].events.triggerEvent('mousedown');
};
};

The problem is here:
document.getElementById("MainContent_Infralist").innerHTML =
document.getElementById("MainContent_Infralist").innerHTML +
'<h3 class="Infraa" id="' + "Infralist_" + lcb[2] + '">' + lcb[2] + '</h3>';
Every time you assign to innerHTML, you're basically deleting all stuff and adding it all over again. This causes all event listeners to break.
That's the reason why only last one works - it's the only one after assigning which there is no more innerHTML manipulation.
To fix this, create your elements using document.createElement() and append them using element.appendChild().
It could look like:
var header = document.createElement('h3');
header.id = 'Infralist_' + lcb[2];
header.className = 'Infraa';
header.textContent = lcb[2];
document.getElementById('MainContent_Infralist').appendChild(header);
header.onclick = function () {
// you function here
}

How do I execute an event using jQuery through an html object(button) created through Javascript?

I'm just new here. So here's where I'm stuck:
I created an html table using javascript. I have a button,which when clicked, will create set of tables with exactly the same structure but the objects(eg. button, text) inside those tables have different ID's. Now when I try to execute a click function using jQuery with a button on one of the produced tables, it won't work. How do I go around here? Thanks in advance!
Here's a sample function which creates the html table(with unique ID's) in javascript:
function CreateTables() {
var html = ' ';
var valPrompt = prompt("How many tables would you like to add?");
parseInt(valPrompt);
for (i = 1; i <= valPrompt; i++) {
html += "<table>" + "<tr>" + "<td>" + "Text goes here" + "</td>" + "<td>" + "<input type='text' id='txtTEXT" + i + "'/>" + "</td>" + "<td>" + < input type = 'button'
id = 'btnALERT" + i + "' / > +"</td>" + "</tr>" + "</table>"
}
document.getElementById('HtmlPlaceHolder').innerHTML = html;
}​
So, if we review the code, Sets of table with buttons(btnALERT) with unique ID's will be created if the function CreateTables is executed. In order to select the objects, I suppose I'll be using jQuery. So for example, if I bind a handler in btnALERT1(produced by CreateTables) say a click function in order to alert a simple "Hello", how will I do this? My code for this doesn't seem to work:
$(document).ready(function() {
$('#btnALERT1').click(function() {
alert("Hello");
});
});​

Use .live() (for older jquery versions - < v1.7):
$('#btnALERT1').live('click', function()
{
alert("Hello");
});
Or:
$(document).delegate('#btnALERT1', 'click', function()
{
alert("Hello");
});
Use .on() (for new jquery versions - >= 1.7):
$(document).on('click', '#btnALERT1', function()
{
alert("Hello");
});

I think you may want to use the method .on():
$(document).ready(function() {
$('#btnALERT1').on('click', function() {
alert("Hello");
});
});
For more information, check the online doc: http://api.jquery.com/on/

I would use a delegate on HtmlPlaceHolder to check for click events like so:
$("#HtmlPlaceHolder").on("click", "input[type=button]", function() {
alert($(this).attr("id"));
});
Also, I would change the button id scheme to btnALERT_1, so you can extract the ID number with a .split("_") method.

You have to attach the event handlers after you create the tables, not when the document is ready (the document should be ready anyways since the user is interacting with it).
You can do this with jQuery, sure, but have a look at the native methods - jQuery might be too bloated depending on what you will do and you will learn something about the DOM.
I've added some code below which lets you add a callback and shows some things you can get back easily. It is not exactly what you asked for, but a great start to finding your way in the DOM.
function CreateTables() {
var html = ' ';
var valPrompt = prompt("How many tables would you like to add?");
parseInt(valPrompt);
for (i = 1; i <= valPrompt; i++) {
html += "<table>" + "<tr>" + "<td>" + "Text goes here" + "</td>" + "<td>" + "<input type='text' id='txtTEXT" + i + "'/>" + "</td>" + "<td>" + < input type = 'button'
id = 'btnALERT" + i + "' / > +"</td>" + "</tr>" + "</table>"
}
var placeholder = document.getElementById('HtmlPlaceHolder').innerHTML = html;
placeholder.innerHTML = html;
placeholder.addEventListener('click', function (e) {
console.log(this, e);
}
}​