Develop Reference

How to populate a dynamically created select with options

I have used Event binding on dynamically created elements? and Get changed value from <select> using jQuery to get to where I am now.
I am creating two Select dropdowns dynamically ('Activity Type' and 'Activity'). I use the selected item from the first dropdown ('Activity Type') to get a list of options for the second dropdown ('Activity'). How do I populate the second dropdown ('Activity') with the list of options please? Note that each line may have a different initial option selected and therefore a different set of options in the second dropdown.
My code is:
$(document).on('click', '#programDetailTablebody button[name="addPDRow"]', function(e) {
e.preventDefault();
var newRows = "";
newRows += "<tr><td class='button'><button type='button' name='addPDRow' class = 'buttonFront'><span class='glyphicon glyphicon-plus'></span></button></td>";
newRows += "<td class='keyvalue'><input class='timeWidth timeClass pdValue' name='timeInput' value='07:00'></input></td>"; //Time
newRows += "<td class='keyvalue'><select class='form-control activityTypeWidth activityTypeClass pdValue' name='activityTypeInput'>" //Activity Type
newRows += "<option value='' disabled selected>Select Activity Type</option>" + activityTypeOptions + "</select>"
newRows += "<td class='keyvalue'><select class='form-control activityWidth activityClass pdValue' name='activityInput'>" //Activity
newRows += "<option value='' disabled selected>Select Activity</option>" + activityOptions + "</select>"
newRows += "<td class='keyvalue'><input class='equipmentClass pdValue' name='equipmentInput'></input></td>";//Equip. Needed
newRows += "<td class='keyvalue'><input class='awardClass pdValue' name='awardInput'></input></td>";//Award
newRows += "<td class='keyvalue'><input class='leadersClass pdValue' name='leadersInput'></input></td>";//Leaders
newRows += "<td class='button'><button type='button' name='removePDRow' class = 'buttonFront'><span class='glyphicon glyphicon-minus'></span></button></td></tr>";
$(newRows).insertAfter($(this).closest('tr'));
});
$('#programDetailTablebody').on( 'change', "select[name='activityTypeInput']", function (e) {
e.preventDefault();
var activityType = $(this).val();
$.ajax({
url : 'PPATActivityListView', ...
.done (unction(responseJson1a){
// JSON response to populate the activities options
dataType: "json";
var activityOptionsNew = "";
$.each(responseJson1a, function() {
activityOptionsNew += '<option value = ' + this.ppa_id + '>' + this.ppa_activity_name + '</option>';
});
alert("activityOptionsNew: " + activityOptionsNew);
this.activityOptions = activityOptionsNew;
})
});
This is the page:
I am getting the expected list of options for the second dropdown. So how do I then insert the options into the select for the second dropdown?
I have changed to use arrow function; however, I get an error "Syntax error on token ">", invalid FunctionExpressionHeader".
.done((responseJson1a) => {
// JSON response to populate the activities options
dataType: "json";
// alert(JSON.stringify(responseJson1a));
var activityOptionsNew = "";
$.each(responseJson1a, function() {
activityOptionsNew += '<option value = ' + this.ppa_id + '>' + this.ppa_activity_name + '</option>';
});
alert("activityOptionsNew: " + activityOptionsNew);
$(this).closest('tr').find('.activityClass').html(activityOptionsNew);
})

You need to declare this ( current select-box) outside your ajax call and then access your select-box like below :
var selector = $(this); //declare this
$.ajax({
//..
.done (function(responseJson1a){
//other codes
selector.closest('tr').find('.activityClass').html(activityOptionsNew);//add htmls
})

You can change your jQuery ajax.done() to use arrow function, and then just replace .activityClass with activityOptionsNew
.done ((responseJson1a) => {
...
$(this).closest('tr').find('.activityClass').html(activityOptionsNew);
})

how to make more efficient js for loop inside php while loop JSON

I'm selecting values from my db in mysql and comparing them with values from JSON. I'm receiving the right results but since I'm using append the results shows up one by one, which looks like animation I would like to get them all at once and show some kind of loading icon while the loop is running, I've tried few different ways but nothing worked.
<?php $sql= "select a_id,b_id,res_a,res_b from betts_gr where u_id='".$u_id[0]."'";
$user_bets = mysqli_query($conn,$sql);
while($user_bets1 = mysqli_fetch_array($user_bets)){
?>
<script>
$(document).ready(function() {
var a_id = "<?php echo $user_bets1[0]?>";
.....
var car = [];
$.getJSON('http://api.football-api.com/2.0/matches?
comp_id = 1204 & from_date = '+today+' & to_date = '+plusmonth+' & Authorization ',
function(data) {
var html = "";
console.log(data);
$.each(data, function(index, value) {
var teama = value.localteam_name;
var teamb = value.visitorteam_name;
.......
function add(name, point) {
car.push({
teamb: teamb,
teama: teama,
form: form,
data: data,
teama_id: teama_id,
teamb_id: teamb_id,
a_res: a_res,
b_res: b_res
});
}
add(teama, teamb, data, form, teama_id, teamb_id, a_res, b_res);
});
for (var n = 0; n < car.length; n++) {
if (car[n].teama_id == a_id && car[n].teamb_id == b_id) {
html += "<tr><td><input type='hidden' name='aid" + n + "'
value = '"+car[n].teama_id+"' > < input type = 'hidden'
name = 'bid"+n+"'
value = '"+car[n].teamb_id+"' > " +
car[n].data +
"</td><td> " + car[n].teama + "</td><td>" + car[n].a_res + "-" +
car[n].b_res + "</td><td> " +
car[n].teamb + '</td><td> you predicted ->' + pred_resa + ' - ' + pred_resb +
'</tr>';
}
}
$(".message").append(html);
});
});
</script>
<?php } ?>

the example for using the Array.map and the template literals instead of the for loop and the plain string concat:
const isTargetTeam = item => item.teama_id == a_id && item.teamb_id == b_id;
const html = car.slice(0) // copy the array car
.filter(isTargetTeam)
.map((item, index) =>
`<tr>
<td>
<input type='hidden' name='aid${index}' value='${item.teama_id}'>
<input type='hidden' name='bid${index}' value='${item.teamb_id}'>
${item.data}
</td>
<td>
${item.a_res}-${item.b_res}
</td>
<td>
${item.teamb}
</td>
<td> you predicted -> ${pred_resa} - ${pred_resb}
</tr>`
).join('')

You should not mix PHP and Javascript like that. Currently this will result in X document.ready functions with X getJSON requests.
If you want to do the API requests from the local client, you should do ONE javascript function where you pass in the selected user_bets as an array. There are different possibilities to determine if all loadings have been finished: either counting up and checking after every callback if the max number is reached, or using Promises and Promise.all().
<script>
var user_bets = <?php echo json_encode($user_bets);?>;
$(document).ready(function () {
Promise.all(user_bets.map(function (id) {
return fetchFromApi(id);
})).then(function(array){
var html = "";
for(var i = 0; i < array.length; i++){
html += processData(array[i]);
}
$(".message").append(html);
});
});
function fetchFromApi(user_id) {
return new Promise(function (resolve, reject) {
$.getJSON()
.done(function (data) {
resolve(data);
})
.fail(function (error) {
reject(error);
});
});
}
function processData(data){
var html = '';
// do your html processing of a single api call here
return html;
}
</script>
Alternatively you can use CURL to do the API requests server-side already.

Thanks for advise I just realize I should get data with one request. I've passed the whole array to js and since I'm not sure how promise.all is working I did two for loops nested and is working fine, the only thing I still can't figure out how to check if the loops are finished so I could add loading icon while loop is running.
function add(name, point) {
car.push({ teamb : teamb, teama : teama, form:form, data:data, teama_id:teama_id,
teamb_id:teamb_id, a_res:a_res, b_res:b_res});
}
add(teama,teamb,data,form,teama_id,teamb_id,a_res,b_res);
});
for(var n=0;n<car.length;n++){
var taba = [<?php echo json_encode($at1)?>];
var tchild = taba[0];
for(var u=0;u<tchild.length;u++){
if(car[n].teama_id == tchild[u].localteam_id
&& car[n].teamb_id == tchild[u].visitorteam_id){
html += "<tr><td><input type='hidden' name='aid"+n+"'
value='"+car[n].teama_id+"'>
<input type='hidden' name='bid"+n+"'
value='"+car[n].teamb_id+"'>"
+car[n].data
+"</td><td> "+car[n].teama + "</td><td>"+ car[n].a_res
+ "-"+ car[n].b_res + "</td><td> "
+ car[n].teamb + '</td><td> you predicted -
>'+tchild[u].localteam_score +' - '+tchild[u].visitorteam_score +
'</td></tr>';
}
}
}
$(".message").append(html);

How to get the value of dynamically created tablerow?

I tried to get the value of the input-field that was dynamically created in function rijToevoegen().
Somehow I keep getting undefined, what am I doing wrong?
These are my functions I use:
//adding the tablerow
function rijToevoegen(columnarray, fieldarray, tabelnaam){
var columns = columnarray;
var fields = fieldarray;
var row = '<tr>';
for(i=0;i<columns.length;i++){
row += "<td class=columns[i]><input type='text' id=fields[i]></td>";
console.log(fields[i]);
}
row += '</tr>';
$(tabelnaam).append(row);
}
//getting the value
$('#vs_opslaan').click(function() {
var columns = ['naamkolom','locatiekolom','hostkolom','cpukolom','memorykolom','oskolom','hddkolom','spkolom','usernamekolom','passwordkolom','ipkolom','domeinkolom','opmerkingenkolom'];
var velden = ['naamveld','locatieveld','hostveld','cpuveld','memoryveld','osveld','hddveld','spveld','usernameveld','passwordveld','ipveld','domeinveld','opmerkingenveld'];
var response_array = [];
for(i=0;i<velden.length;i++){
var rij = $('#velden[i]').val();
console.log(rij);
//response_array += $().value;
}
//console.log(response_array);
});
Help is always appreciated!
Ramon

When you are referencing the arrays they cannot be inside the string or they will be set as literal strings.
When you put "<td class=columns[i]><input type='text' id=fields[i]></td>"the class and id contain literal strings columns[i] and fields[i]
What you want is to concatenate your array values with the markup.
"<td class=" + columns[i] + "><input type='text' id=" + fields[i] + "></td>"
This also applies to when you are doing the jquery selector.
So instead of $('#velden[i]').val(); you want $('#' + velden[i]).val();

How to generate Dynamic button in a table row and open new page on button click

i actually having a requirement of generating dynamic table from services url and after that generating dynamic table.This is i worked it out but what i want is
How to generate a dynamic button on each table row with click event.
After generating the button how we can assign click events to the button i mean suppose in a table there are four columns like date,id number,name,location and on the clicking on the each column or related to that cell it has to redirect to a new page.
or
if a table row is clicked and there are 4 columns are there like date,id number,name,location the click event has will take date as a parameter and click event function and then it have to proceed to the next page/redirect
$('#btn_Day').click(function () {
var ex = document.getElementById("dpp_info");
var clOptions = ex.options[ex.selectedIndex].value;
var clOptions1 = ex.options[ex.selectedIndex].text;
var dt = todaydate;
var dt1 = todaydate;
$.ajax({
type: 'GET',
url: xxxxx.xxxxx.xxxxx,
data: frmDate_=" + dt + "&toDate_=" + dt1 + "",
success: function (resp) {
var Location = resp;
var tr;
for (var i = 0; i < Location.length; i++) {
tr = tr + "<tr>";
tr = tr + "<td style='height:20px' align='left'>" + Location[i].Name + "</td>";
tr = tr + "<td style='height:20px' align='left'>" + Location[i].Date + "</td>";
tr = tr + "<td style='height:20px' align='left'>" + Location[i].IdNum + "</td>";
tr = tr + "</tr>";
};
document.getElementById('Wise').innerHTML = "<table class='r'>" + "<tr><thead ><th style='height:20px'>Location</th>"
+ "<th style='height:20px'>Date</th>" + "<th style='height:20px'>Id Num</th>" + "</tr></thead>"
+ tr +
"<tr></tr>" +
"</table>";
document.getElementById('Wise').childNodes[0].nodeValue = null;
},
error: function (e) {
window.plugins.toast.showLongBottom("Please Enable your Internet connection");
}
});
});
now in the image if u see there are four columns suppose if i click on the idnumb and there records related to that particular number has to be displayed in separate page
Looking For Help!

After some more discussion on this the key was to just use the handler and pass any values using attributes. You can see the fiddle here
https://jsfiddle.net/p2fpbkuo/3/
$('.button-click').off();
$('.button-click').on('click', function () {
// navigate to new page
// console.log('button click')
// what you could do here is get the serialnumber which is an attribute on the button
var id = $(this).attr('data-id') // as long as this is unique this should always work
var filteredResults = results.filter(function (result) {
if (result.SerialNumber.toString() === id.toString()) {
return result;
}
});
var selectedRowValues = filteredResults[0];
// this will contain all the values for that row
console.log(selectedRowValues)
// var dataValue = $(this).attr('data-url'); // dont't need this any more
window.open(selectedRowValues.Url)
});

Creating html table using Javascript not working

Basically, I want the user the just change the 'height' variable to how ever many rows he wants, and then store the words which each td in the row should contain, and the code should then generate the table.
My html is just this:
<table id="newTable">
</table>
This is my Javascript:
<script type="text/javascript">
var height = 2; // user in this case would want 3 rows (height + 1)
var rowNumber = 0;
var height0 = ['HeadingOne', 'HeadingTwo']; // the words in each td in the first row
var height1 = ['firstTd of row', 'secondTd of row']; // the words in each td in the second row
var height2 = ['firstTd of other row', 'secondTd of other row']; // the words in each td in the third row
$(document).ready( function() {
createTr();
});
function createTr () {
for (var h=0; h<height + 1; h++) { // loop through 3 times, in this case (which h<3)
var theTr = "<tr id='rowNumber" + rowNumber + "'>"; // <tr id='rowNumber0'>
$('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
for (var i=0; i<window['height' + rowNumber].length; i++) {
if (i == window['height' + rowNumber].length-1) { // if i==2, then that means it is the last td in the tr, so have a </tr> at the end of it
var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td></tr>";
$('#rowNumber' + rowNumber).append(theTr); // append to the end of the Tr
} else {
var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td>";
$('#rowNumber' + rowNumber).append(theTr);
}
}
rowNumber += 1;
}
}
</script>
I did 'alert(theTr);' and 'alert(theTd);' and they looked correct. How come this code doesn't generate any table?

You should change the line
$('#rowNumber' + rowNumber).append(theTr);
into
$('#rowNumber' + rowNumber).append(theTd);
You are adding the Tr-Code again in the inner loop, but you actually wanted to add the Td-Code.

All that window["height"+rowNumber] stuff is a poor way to do it. Use an array, and pass it as a parameter to the function so you don't use global variables. And use jQuery DOM creation functions instead of appending strings.
<script type="text/javascript">
var heights = [['HeadingOne', 'HeadingTwo'], // the words in each td in the first row
['firstTd of row', 'secondTd of row'], // the words in each td in the second row
['firstTd of other row', 'secondTd of other row'] // the words in each td in the third row
];
$(document).ready( function() {
createTr(heights);
});
function createTr (heights) {
for (var h=0; h<heights.length; h++) { // loop through 3 times, in this case (which h<3)
var theTr = $("<tr>", { id: "rowNumber" + h});
for (var i=0; i<heights[h].length; i++) {
theTr.append($("<td>", { "class": "row"+h + " column"+i,
text: heights[h][i]
}));
}
$('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
}
}
</script>
JSFIDDLE