Javascript syntax error that can't solve - javascript

There seems to be a syntax error that I can't seem to solve in JavaScript.
var newRow = jQuery('<tr><td><div align="center"><input type="checkbox"class="case" onclick="showhide('display','')"/></div></td><td>' + daterecorded + '</td><td>' + arrivaltime + '</td><td>' + departuretime + '</td><td>9h 30min</td><td>' + specialreason + '</td></tr>');
jQuery('table.manual').append(newRow);
});
This part: onclick="showhide('display','')" has been giving me syntax errors.
I have tried this onclick="showhide(' + display + ' ' + ,''+ ')"
and get myself confused. couldn't seem to get the syntax right. any help please?

var newRow = jQuery('<tr><td><div align="center"><input type="checkbox" class="case" onclick="showhide(\'display\',\'\')"/></div></td><td>' + daterecorded + '</td><td>' + arrivaltime + '</td><td>' + departuretime + '</td><td>9h 30min</td><td>' + specialreason + '</td></tr>');
jQuery('table.manual').append(newRow);
});
You just need to escape the two ' around display.

or you can bind event after creating row
var newRow = jQuery('<tr><td><div align="center"><input type="checkbox" class="case" /></div></td><td>' + daterecorded + '</td><td>' + arrivaltime + '</td><td>' + departuretime + '</td><td>9h 30min</td><td>' + specialreason + '</td></tr>');
jQuery('table.manual').append(newRow);
newRow.find(".case").click(function () { showHide('display', ''); });
});
dont have to mind escaping and much better to read.

Related

File value is still displaying in the table even if implemented input.value=' ' in javascript

I managed to check the file extension type and detect fake files but the problem that I'm facing now is after the alert message(alert that the image is fake) the details of the file are still being displayed in the table. How to remove the details from being display in the table after the alert message.
https://i.stack.imgur.com/9a2x4.png
Here's the code of my work:
https://jsfiddle.net/auwhk7v1/1/
Here's one of the code that displaying details of the files:
vpb_added_files_displayer += '<tr id="add_fileID' + vpb_file_id + '" class="' + new_classc + '"><td>' + vpb_file_icon + ' ' + this.vpb_files[i].name.substring(0, 40) + '</td><td><span id="uploading_' + vpb_file_id + '"><span style=color:blue;>Ready</span></span></td><td>' + vpb_actual_fileSize + '</td><td><select class="form-control required type_doc_'+vpb_file_id+'" id="type_doc" name="type_doc" value="" title="File Type for document/photo" onchange="get_doc_type(this.value, \'' + vpb_file_id + '\')" required/><option value="0">Please Select</option>'+load_checklist('type_doc', vpb_file_id)+'</select></td><td><span id="remove' + vpb_file_id + '"><span class="vpb_files_remove_left_inner" onclick="vpb_remove_this_file(\'' + vpb_file_id + '\',\'' + this.vpb_files[i].name + '\');">Remove</span></span></td></tr></div>';
vpb_added_files_displayer2 += '<tr id="add_fileID' + vpb_file_id + '" class="' + new_classc + '"><td>' + vpb_file_icon + ' ' + this.vpb_files[i].name.substring(0, 40) + '</td><td><span id="uploading_' + vpb_file_id + '"><span style=color:blue;>Ready</span></span></td><td>' + vpb_actual_fileSize + '</td><td><select class="form-control required type_doc2_'+vpb_file_id+'" id="type_doc2" name="type_doc2" value="" title="File Type for photos" onchange="get_doc_type(this.value, \'' + vpb_file_id + '\')" required/><option value="0">Please Select</option>'+load_checklist('type_doc2', vpb_file_id)+'</select></td><td><span id="remove' + vpb_file_id + '"><span class="vpb_files_remove_left_inner" onclick="vpb_remove_this_file(\'' + vpb_file_id + '\',\'' + this.vpb_files[i].name + '\');">Remove</span></span></td></tr></div>';
}
}
//Display browsed files on the screen to the user who wants to upload them
if (this.vpb_settings.vpb_form_id == "myForm") {
$("#add_files").append(vpb_added_files_displayer);
$("#added_class").val(new_classc);
// load_checklist('type_doc');
} else if (this.vpb_settings.vpb_form_id == "myForm2") {
$("#add_files2").append(vpb_added_files_displayer2);
$("#added_class").val(new_classc);
// load_checklist('type_doc2');
I used one of the codes that I search in stack overflow:
How to check file MIME type with javascript before upload?
I've tried files.value='' but still the details are displayed in my table. Can anyone solve this for me? Thanks in advance.

Changing the background color of 'td' inside of an ajax call

Below you see a ajax call that gets triggered when I press a button. Inside of the ajax call I append some'td' with value's to a table. On this line below: '</td><td>' + result[i].preRiskCategory + I'm trying to set the background color to a certain color when the value of preRiskCategory is above a certain number. Does anyone know if this is even possible and if so, how?
document.getElementById("searchButton").addEventListener("click", function (e) {
// vorige resultaten leegmaken.
clearTable();
if (id != "") {
$.post("/mainRiskanalysis/SearchMainRiskanalysisRisks?mainRiskanalysisId=" + id, function (result) {
for (let i = 0; i < result.length; i++) {
// Get risk-actionplan ids
getRiskActionplanIds(result[i].id);
// Looping through all ids and placing it in a string
for (j = 0; j < ids.length; j++)
idsString+=ids[j] + ", ";
//Get the names by id's
getZoneNameById(result[i].zoneId);
getEquipmentNameById(result[i].equipmentId);
getEquipmentTaskNameById(result[i].taskId);
getDangerNameById(result[i].dangerId);
getDangererousEnergieNameById(result[i].dangerousEnergiesId)
getConsequenceNameById(result[i].consequenceId);
// Getting the right table
var tbodyId = getTableId(result[i].categoryId);
$(tbodyId).append(
'<tr scope="row"><td><a class="text-primary" href="/riskanalysis/edit/' + result[i].id + '">Edit</a> | <a class="text-danger" href="/riskanalysis/delete/' + result[i].id + '">Delete</a>' +
'</td><td><a class="text-success" href="/riskActionPlan/create/' + result[i].id + '">Link actionplan</a>' +
'</td><td>' + idsString +
'</td><td style = "background-color: #C0C0C0">' + result[i].id +
'</td><td>' + zoneName +
'</td><td>' + equipmentName +
'</td><td>' + taskName +
'</td><td>' + result[i].activity +
'</td><td>' + result[i].action +
'</td><td>' + result[i].descriptionPotentialRisk +
'</td><td style="background-color: #99CC00">' + dangerName +
'</td><td>' + consequenceName +
'</td><td>' + dangerousEnergieName +
'</td><td style="background-color: #C0C0C0">' + result[i].preSeriousness +
'</td><td style="background-color: #C0C0C0">' + result[i].preProbability +
'</td><td style="background-color: #C0C0C0">' + result[i].preExposure +
'</td><td style="background-color: #C0C0C0">' + result[i].preRiskDegree +
'</td><td>' + result[i].preRiskCategory +
'</td><td>' + result[i].preventionMeasures +
'</td><td>' + result[i].safetyProcedures +
'</td><td>' + checkIfNull(result[i].postSeriousness) +
'</td><td>' + checkIfNull(result[i].postProbability) +
'</td><td>' + checkIfNull(result[i].postExposure) +
'</td><td>' + checkIfNull(result[i].postRiskDegree) +
'</td><td>' + checkIfNull(result[i].postRiskCategory) +
'</td><td>' + checkIfNull(result[i].improvementFactor) +
'</td><td>' + result[i].isOk +
'</td></tr>');
}
});
}
e.preventDefault()
});
Please let me know if you need further explaination of some sort.
Thanks!
Consider something like this:
'</td><td style="background-color: #C0C0C0">' + result[i].preRiskDegree +
'</td><td style="'+(
result[i].preRiskCategory > 100 ? 'background-color: orange;' : ''
)+'">' + result[i].preRiskCategory +
'</td><td>' + result[i].preventionMeasures +
You can concatenate a string that is either a background-color or an empty style using a ternary condition. Whitespace added for clarity.

Passing id from element via ng-click

I'm constructing quite a big <span> - element that is being generated dynamically in code.
var span = '<span id="' + dayNumber + '/' + Number(currentMonth + 1) + "/" + Number(date.getFullYear()) + '" class="day ' + respons[0] + '" ng-click="gotoDetail($event)" style="height:' + screenHeigt + 'px; display:table;"><p style="display:table-cell; vertical-align:middle;">' + dayNumber + ' </p></span>';
As you can see, the id consist of a date-string. Via the ng-click-element I would like to pass the id to the gotoDetail($event)-function. When I'm inspecting the parameter of that function, I see however that $event.target.id is empty...
Following code is an older version and does work:
var span = '<span id="' + dayNumber + '/' + currentMonth + '" class="day ' + respons[0] + ' ' + lastMonth + ' " ng-click="gotoDetail($event)">' + dayNumber + '</span>' + string;
I really don't know what I'm doing wrong in the first example...
If I check my html in the chrome-console, there's nothing wrong with the id, the ng-click, or other attributes...
Someone who has an anwser?
EDIT: Code can be found here: https://gist.github.com/anonymous/c29798e0d46f40dcfe69

AppendChild only html

I would like to append Html as a child to a Element, i tried:
$.each(data, function(i, field){
var tbody = document.getElementsByTagName('tbody')[0];
tbody.appendChild('<tr><td>'+ field.name +'</td><td>' + field.vorname + '</td><td>' + field.geburtsdatum + '</td><td>' + field.strasse + '</td><td>' + field.plz + '</td></tr>');
});
But somehow i get this error:
Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.
How can i fix this problem? Thanks
appendChild() takes a node as the argument, try jQuery's append() instead
var $tbody = $('tbody').eq(0);
$.each(data, function (i, field) {
$tbody.append('<tr><td>' + field.name + '</td><td>' + field.vorname + '</td><td>' + field.geburtsdatum + '</td><td>' + field.strasse + '</td><td>' + field.plz + '</td></tr>');
});
As Json said, it is best to create the html first then append it, so try
var array = $.map(data, function (field, i) {
return '<tr><td>' + field.name + '</td><td>' + field.vorname + '</td><td>' + field.geburtsdatum + '</td><td>' + field.strasse + '</td><td>' + field.plz + '</td></tr>';
});
$('tbody').eq(0).append(array.join(''));

Javascript doing what is expected

I am dynamically adding <script> tags with javascript & jQuery into my html file whenever a button is pushed. Everything gets added in correctly but only one of the two .click jQuery action functions is working. I can't seem to figure out why. No errors in console. I made sure i used \' and \" in the correct places.
$('#classBox').append('<tr id=\"' + tempCHAR + tempNUM + '\">'
+ '<td>'
+ '<i id=\"' + tempCHAR + tempNUM + '\" class=\"icon-remove-sign\">'
+ '</i> '
+ '<a id=\"' + tempCHAR + tempNUM + '\"" href=\"https://cms.psu.edu/section/default.asp?id=' + urlHOLDER + '\" target="framehidden">'
+ tempYEAR + ': ' + tempCHAR + tempNUM + ', Section ' + tempSEC
+ '</a>'
+ '</td>'
+ '</tr>'
+ '<script>'
+ '$(\'#' + tempCHAR + tempNUM + '\').click(function() {'
+ '$(\'tr\').remove(\'tr#' + tempCHAR + tempNUM + '\');'
+ '});'
+ '$(\'a#\'' + tempCHAR + tempNUM + ').click(function() {'
+ '$(\'#framehidden\').attr(\'src\', $(\'a\', this).attr(\'href\')));'
+ '});'
+ '</script>');
The indents are just for me to more easily read what I'm doing. That wouldn't be the problem would it?
If thats too impossible to read then here it is in normal view.
$('a#'IST130).click(function() {
$('#framehidden').attr('src', $('a', this).attr('href')));
});
$('#IST130').click(function() {
$('tr').remove('tr#IST130');
});
I have like 30 other .click functions that all work perfectly but I just cannot figure out what is going wrong here. Any hints?
Since .append() is instant (ie. synchronous), there is absolutely no need to put that stuff in a <script> tag. Instead, try this:
$('#classBox').append('<tr id=\"' + tempCHAR + tempNUM + '\">'
+ '<td>'
+ '<i id=\"' + tempCHAR + tempNUM + '\" class=\"icon-remove-sign\">'
+ '</i> '
+ '<a id=\"' + tempCHAR + tempNUM + '\"" href=\"https://cms.psu.edu/section/default.asp?id=' + urlHOLDER + '\" target="framehidden">'
+ tempYEAR + ': ' + tempCHAR + tempNUM + ', Section ' + tempSEC
+ '</a>'
+ '</td>'
+ '</tr>');
$('#' + tempCHAR + tempNUM).click(function() {
$('tr').remove('tr#' + tempCHAR + tempNUM);
});
$('a#' + tempCHAR + tempNUM).click(function() {
$('#framehidden').attr('src', $('a', this).attr('href')));
});
That being said, your code is HORRIBLY invalid. IDs MUST be unique. I'll leave you to fix that in whatever way works best for you, but yeah.
Your error (or at least one of them) is on this line:
+ '$(\'a#\'' + tempCHAR + tempNUM + ').click(function() {'
Just have an extra single quote there that needs to be moved to the end of the $() block:
+ '$(\'a#' + tempCHAR + tempNUM + '\').click(function() {'
In your example at the end you have $('a#'IST130). Pretty sure that should read $('a#IST130)`
To correct it, change the generation for that ID to:
'$(\'a#' + tempCHAR + tempNUM + '\')...
Additionally, since you are dynamically adding the elements, their click events may not bind properly, depending on exactly when your code is executing.
You can use jquery on to set a bind for the events on a permanent element. In this case #classBox looks like a good bet. It might look something like this (where this would be inside a normal script block and outside of your dynamic stuff:
$('#classBox').on('click','a',function () {
$('#framehidden').attr('src', $('a', this).attr('href')));
});
$('#classBox').on('click',function () {
$(this).closest('tr').remove();
});
Note: Completely untested - intended as a guide!
After you fix the syntax errors, also be sure the click events aren't being attached before the append() code has run.
I can't tell which order the code runs in the actual page - if you're appending the elements before the click events are being attached, the elements may not exist yet. You can use jQuery's delegate method to ensure the events are called for all elements, no matter when they're appended to the DOM.
For example:
$('body').delegate('.anchorClassName', 'click', function(e){});

Categories

Resources