function createShiftsForm(day){
document.getElementById("shifts").innerHTML += day + ' morn: <select name="' + day + 'm"><option value="0" selected>0</option>';
for (i=1; i <= 20; i++){
document.getElementById("shifts").innerHTML += '<option value="' + i + '">' + i + '</option>';
}
document.getElementById("shifts").innerHTML += '</select>';
}
When it prints out it prints all 21 numbers but only the number 0 is printed as an option for the selector.
The string that you pass to the innerHTML is not valid(you do it step-by-step, so select element doesn't have a closing tag).
function createShiftsForm(day){
var container = day + ' morn: <select name="' + day + 'm"><option value="0" selected>0</option>';
for (i=1; i <= 20; i++){
container += '<option value="' + i + '">' + i + '</option>';
}
container += '</select>';
document.getElementById("shifts").innerHTML = container;
}
Related
I am setting a field in my HTML label from Viewbag which has a "'" in the text. when the HTML pulls up it shows ' in place of "'". How do I stop it from getting encoded?
Please find the code below.
setting text fileds in the HTML view.
$('#thStudentName').text('#ViewBag.Name');
if (sessionData.data.EventDate2Def != '' || sessionData.data.EventDate2Def != null)
$('#tdWhen').text(sessionData.data.EventDate1Def + ' and ' + sessionData.data.EventDate2Def);
else
$('#tdWhen').text(sessionData.data.EventDate1Def);
$('#tdWhere').text(sessionData.data.FacilityName);
$('#tdLocated').text(sessionData.data.Address1 + ', ' + sessionData.data.City + ', ' + sessionData.data.State + ' ' + sessionData.data.Zip);
$('#tdPhone').text(sessionData.data.Phone);
$('#tdDirections').text(sessionData.data.Directions);
$('#tdRoom').text(sessionData.data.RoomNumber);
Populating a different section with Dynamic data.
function populateSessionTable() {
var count = 1;
$('#SessionTable').html('');
var tableContent = '';
var record = '';
var Sessions = sessionData.data.Sessions;
tableContent = generateTableContent(count, Sessions[0].StartDateTimeDef);
tableContent += '</tbody></table></div>';
$('#SessionTable').html(tableContent);
var radioStatus = '';
for (var i = 0; i < Sessions.length; i++) {
var content = Sessions[i];
radioStatus = '';
if (content.Capacity == content.Registered || content.Closed)
radioStatus = '<input disabled class="selected-session radio" name="SessionId" type="radio" value="' + content.SessionId + '">';
else if (content.StartDateTimeDef == '#ViewBag.WorkshopDateDef' && t24to12Convert(content.StartTimeString) == t24to12Convert('#ViewBag.WorkshopTime'))
radioStatus = '<input class="selected-session radio" checked name="SessionId" type="radio" value="' + content.SessionId + '">';
else
radioStatus = '<input class="selected-session radio" name="SessionId" type="radio" value="' + content.SessionId + '">';
record += '<tr>';
record += '<td class="session-schedule-table-btn">';
record += radioStatus;
record += '</td>';
record += '<td class="session-schedule-table-session-number"> ' + content.Number + ' </td>';
record += '<td class="session-schedule-table-session-start-time">' + t24to12Convert(content.StartTimeString) + '</td>';
record += '</tr>';
$('#SessionTBody' + count).append(record);
record = '';
if(Sessions.length != i + 1)
{
if(Sessions[i].StartDateTimeDef != Sessions[i + 1].StartDateTimeDef)
{
tableContent = '';
count++;
tableContent = generateTableContent(count, Sessions[i+1].StartDateTimeDef);
tableContent += '</tbody></table></div>';
$('#SessionTable').append(tableContent);
}
}
}
}
populateSessionTable();
The preview shows the name in the correct format, but when it gets rendered instead of having the quote, it shows '
This is how the output is coming up
So finally it was a stupid problem and I swear I had tried this before, but this is the code that worked.
var stuName = '#ViewBag.Name';
stuName = stuName.replace("'", "'");
$('#thStudentName').text(stuName);
I dont understand why but I'm getting the wrong body structure. You can see on the image that I get a <tr></tr> and I dont have that on javascript.
I just want a table with 3 columns and up to 10 rows.
What's happening?
My generated html
JavaScript
$('#selectMRPC').change(function () {
//fetch data
var mrpc = $(this).find('option:selected').data('mrpc');
$('#paramBody').empty();
for (var i = 1; i <= 10; i++) {
var field = mrpc["field" + i];
if (field !== undefined) {
var parsedField = field.split('_');
var value = parsedField[0];
var type = parsedField[1];
switch (type) {
case "S":
type = "text";
if (value === '""')
value = null;
break;
case "B":
type = "checkbox";
break;
case "N":
type = "number";
value = parseInt(value);
break;
case "D":
type = "number";
value = parseInt(value);
if (value === '""')
value = null;
break;
}
$('#paramBody').append('<tr>');
$('#paramBody').append('<td>' + i + '</td>');
$('#paramBody').append('<td>' + type + '</td>');
$('#paramBody').append('<td><input name="Fields" type="' + type + '">').val(value);
$('#paramBody').append('</tr>');
}
}
});
store everything in a var then add it to dom :
var html = "";
html += '<tr>';
html += '<td>' + i + '</td>';
html += '<td>' + type + '</td>';
html += '<td><input name="Fields" type="' + type + '" value="' + value +'">';
html += '</tr>';
$('#paramBody').append(html);
You are appending everything to #paramBody, which is incorrect. Consecutively, you need to append/insert data into <tr>. So I would recommend, you concatenate everything together instead of appending.
You need to change
$('#paramBody').append('<tr>');
$('#paramBody').append('<td>' + i + '</td>');
$('#paramBody').append('<td>' + type + '</td>');
$('#paramBody').append('<td><input name="Fields" type="' + type + '">').val(value);
$('#paramBody').append('</tr>');
to
var rowHtml = '<tr>' + '<td>' + i + '</td>' + '<td>' + type + '</td>' + '<td><input name="Fields" type="' + type + '">' + value + '</tr>';
$('#paramBody').append(rowHtml);
append will create an element from the parameter if the given input is not already a valid html string
Make it
$('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><input name="Fields" type="' + type + '" value="' +value + '"></tr>');
Or append them one by one (example below)
$( "<tr></tr>" ).append('<td>' + i + '</td>').appendTo( '#paramBody' );
Or create a string first
var html = '<tr>';
html += '<td>' + i + '</td>';
html += '<td>' + type + '</td>';
html += '<td><input name="Fields" type="' + type + '" value="' + value + '">';
html += '</tr>';
$('#paramBody').append(html );
if (itemPrice != null) {
var option = null;
for (var i = 0; i < itemPrice.d.length; i++) {
option += '<option value=' + itemPrice.d[i].ListNum + '>' + itemPrice.d[i].ListName + '</option>';
}
} else {
SessioExp(response.statusText);
}
tblRow += '<td style="width:20%"><div id="' + d.ItemCode + '"><select class="customSelect" name="dropdown" >' + option + '</select></div></td>';
$.each(itemLinked, function (k, v) {
if (d.ItemCode == v.ITEMCODE) {
//Here set v.PRICELIST TO OPTION VALUE
if (v.ISLINKED) {
tblRow += '<td style="width:10%" align="center"><span id="existingData" class="fa fa-times" aria-hidden="false" style="display: none;"></span></td>';
tblRow += '<td style="width:10%" align="center"><input type="checkbox" class="chkLinked" checked /></td>';
flage = false;
}
}
});
I want set select box value when condition true if (d.ItemCode == v.ITEMCODE)
tblRow += '<td style="width:20%"><div id="' + d.ItemCode + '"><select class="customSelect" name="dropdown" >' + option + '</select></div></td>';
Here we want to show first saved value.
Assuming that your generated options have been appended to the html, you can simply call the JS function optionID.selected = true
So for that you will need to define ids to all your options
// assuming that all your values are unique
for (var i = 0; i < itemPrice.d.length; i++) {
option += '<option id=' + itemPrice.d[i].ListNum + ' value=' + itemPrice.d[i].ListNum + '>' + itemPrice.d[i].ListName + '</option>';
}
//pass the option id here
//P.S you can only call this funtion only if the options have been appended to the html
function defineOption(optionID) {
document.getElementById(optionID).selected = true;
}
i have this code:
for (var i = 0; i < data.times.length; ++i) {
var time = formatTime(data.times[i].time);
tableContent += '<tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr>'
// laat vertragingen zien (BETA)
if (data.times[i].delay / 60 >= 1) {
$('#appendLate' + i + '').append("+" + data.times[i].delay / 60).addClass("late");
}
}
table.html(tableContent);
}
The if statement appends stuff and adds a class. i know it wont work like this.. but i cant seem to get how it WIL work.. Can some one help?
See it live: http://codepen.io/shiva112/pen/JGXoVJ?editors=001
Well, you're basically almost there. The right way to do it is to build the entire string before doing any DOM manipulation, since DOM operations are very slow (relatively).
Let's say your index.html looks like:
<html>
<head>
<title>Cool site!</title>
</head>
<body>
<table id="myCoolTable"></table>
</body>
</html>
Then your JavaScript simply becomes:
var tableContent = '';
for (var i = 0; i < data.times.length; ++i) {
var time = formatTime(data.times[i].time);
tableContent += '<tr>'
+ '<td>' + data.times[i].destination.name + '</td>';
if (data.times[i].delay / 60 >= 1) {
tableContent += '<td id=\'appendLate\'' + i + ' class=\'late\'>' + time + '</td>' + '+' + (data.times[i].delay / 60);
} else {
tableContent += '<td id=\'appendLate\'' + i + '>' + time + '</td>';
}
tableContent += '<td id=\'appendLate\'' + i + '>' + time + '</td>'
+ '<td>' + data.times[i].track + '</td>'
+ '<td>' + data.times[i].train_type + '</td>'
+ '<td>' + data.times[i].company + '</td>'
+ '</tr>';
}
$('#myCoolTable').html(tableContent);
What this does is build the HTML for the entire table. Then update the table only once. Hope it helps!
Funny thing is that if i delete the comment for alert(data[i].id) the code works. As it is in the example, the string is not concatenated thus i have no options in the select box. Hints? Help?
Re-edited so that you guys can see the whole method
function socialbookmarksTableData(data)
{
var toAppend = '';
var bookmarkingSites = '';
$.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(data){
for(var i = 0; i < data.length; i++){
//alert( data[i].id);
bookmarkingSites += '<option value = "' + data[i].id + '">' + data[i].title + '</option>';
}
});
$.each(data.results, function(i, id){
if(i%2 == 1)
toAppend += '<tr class="first">';
else
toAppend += '<tr class="second">';
if(data.results[i].status == "PENDING" || data.results[i].status == "POSTED")
toAppend += '<td><span class="approved">' + data.results[i].status + '</span></td>';
else
toAppend += '<td>' + data.results[i].status + '</td>';
toAppend += '<td><select name="sb2" id="sb2">'+
'<option value="'+ data.results[i].bookmark +'">' + data.results[i].bookmark +'</option>' +
bookmarkingSites + '</select></td>';
toAppend += '<td>' + data.results[i].user + '</td>';
toAppend += '<td>' + data.results[i].link + '</td>';
toAppend += '<td>Some Article</td>';
toAppend += '<td>' + data.results[i].title + '</td>';
toAppend += '<td>' + data.results[i].description + '</td>';
toAppend += '<td>' + data.results[i].tags + '</td>';
toAppend += '<td>' + data.results[i].date + '</td>';
toAppend += '<td><div class="actions">';
toAppend += '<ul><li><input class="radio" name="input" type="checkbox" value="' + data.results[i].id + '" /></li>';
toAppend += '<li><a class="action1" href="#">1</a></li>';
toAppend += '<li><a class="action4" href="#">4</a></li></ul></div></td></tr>';
});
$("#searchTable tbody").append(toAppend);
}
One is reason: When you enclose strings in single quotes, you don't have to escape the double quotes (the backslash does not work as escape operate here anyway I think). So this:
bookmarkingSites += '<option value = \"' + data[i].id + '\">' + data[i].title + '</option>';
Should be:
bookmarkingSites += '<option value="' + data[i].id + '">' + data[i].title + '</option>';
The other reason: your code between <some more code> is not in the callback function, but you try o access data from the function (data and bookmarkingSites). Put all the HTML generation code inside the callback function.
Ah so it is an other data ;) Anyway you cannot access bookmarkingSites in your code because it does not yet exists when the code is executed. Try this:
function socialbookmarksTableData(data)
{
$.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(bookmarks){
var toAppend = '';
var bookmarkingSites = '';
for(var i = 0; i < bookmarks.length; i++){
//alert( bookmarks[i].id);
bookmarkingSites += '<option value = "' + bookmarks[i].id + '">' + bookmarks[i].title + '</option>';
}
$.each(data.results, function(i, id){
if(i%2 == 1)
toAppend += '<tr class="first">';
else
toAppend += '<tr class="second">';
if(data.results[i].status == "PENDING" || data.results[i].status == "POSTED")
toAppend += '<td><span class="approved">' + data.results[i].status + '</span></td>';
else
toAppend += '<td>' + data.results[i].status + '</td>';
toAppend += '<td><select name="sb2" id="sb2">'+
'<option value="'+ data.results[i].bookmark +'">' + data.results[i].bookmark +'</option>' +
bookmarkingSites + '</select></td>';
toAppend += '<td>' + data.results[i].user + '</td>';
toAppend += '<td>' + data.results[i].link + '</td>';
toAppend += '<td>Some Article</td>';
toAppend += '<td>' + data.results[i].title + '</td>';
toAppend += '<td>' + data.results[i].description + '</td>';
toAppend += '<td>' + data.results[i].tags + '</td>';
toAppend += '<td>' + data.results[i].date + '</td>';
toAppend += '<td><div class="actions">';
toAppend += '<ul><li><input class="radio" name="input" type="checkbox" value="' + data.results[i].id + '" /></li>';
toAppend += '<li><a class="action1" href="#">1</a></li>';
toAppend += '<li><a class="action4" href="#">4</a></li></ul></div></td></tr>';
});
$("#searchTable tbody").append(toAppend);
});
}
What you've got is a classic race condition. The getJSON code is making an asynchronous call. When you have the alert in there the code below the getJSON call is executed before the call returns from the callback. Without the alert, it's being executed after the callback. This is actually a lucky occurence as you can't be guaranteed that it will happen that way. You should put all the code that relies on the data returned from the getJSON call into the callback so you can guarantee that the data is returned before using it.
var bookmarkingSites = '';
$.getJSON("php/socialbookmark-get-bookmarking-sites.php",function(data){
for(var i = 0; i < data.length; i++){
//alert( data[i].id);
bookmarkingSites += '<option value = "'
+ data[i].id + '">'
+ data[i].title + '</option>';
}
<some more code>
toAppend += '<td><select name="sb2" id="sb2">'
+ '<option value="'+ data.results[i].bookmark +'">'
+ data.results[i].bookmark +'</option>'
+ bookmarkingSites + '</select></td>';
<some more code>
}); // end of JSON call/callback
From the code provided it looks like you do the JSON call and the callback function appends to the bookmarkingSites variable. so far so good.
The code that the arrow points to is outside the callback function and will run before the JSON callback is called, therefore bookmarkingSite will be empty string and there will be no options in the select box.
Wouldn't the code to build the option tag also go in the callback or be in a function called by the callback?