Uncaught SyntaxError: Unexpected identifier at <head> - javascript

I'm loading a PHP that uses ajax. At first the page loads with no errors. When I trigger the onclick event on a button i get the error "Uncaught SyntaxError: Unexpected identifier" which is indicated on line two of the php file, which is the HTML head tag.
php file:
<html>
<head>
<title>Staff Portal</title>
<link rel="stylesheet" type="text/css" href="Instructor.css">
<script type="text/javascript" src="InstLessons.js"></script>
</head>
<body onload="loadCourse()">
<div id="InstHeader">
<div id="bar">
<table id="inst_bar_table">
<tbody><tr>
<td id="inst_bar_detail">Options</td>
<td id="inst_bar_detail">Logout</td><td>
</td></tr>
</tbody></table>
</div><br>
<h1 id="InstHeaderTitle">Pennco Tech Instructor Portal</h1><h1>
</h1>
</div>
<div id="MainBody">
<div id="course"><table id="InstClassTable"><tbody><tr><th id="classHeadTbl">Code</th><th id="classHeadTbl">Course</th><th id="classHeadTbl"># Students</th><th id="classHeadTbl">Start Date</th><th id="classHeadTbl">End Date</th></tr><tr><td id="classHeadDetailTbl">GEN 101</td><td id="classHeadDetailTbl">Computer Applications</td><td id="classHeadDetailTbl">7</td><td id="classHeadDetailTbl">05-06-15</td><td id="classHeadDetailTbl">07-07-15</td></tr></tbody></table></div>
<div id="detailsection">
<div id="InstMenu">
<ul id="InstMenuList">
<li>Select Class</li>
<li>Class Attendance</li>
<li>Class Assignments</li>
<li>Message Board</li>
<li>Student Data</li>
<li>Class Summary</li>
</ul>
</div>
<div id="instLessons">
<h3><u>Course Lessons</u></h3>
<br>
<table id="instLessonTable">
<tbody>
<tr>
<td id="classHeadDetailTbl">Career Services Assignments</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(Career Services Assignments)">Select</button>
</td>
</tr>
<tr><td id="classHeadDetailTbl">Mitchell Final</td>
<td id="InstLessonButtonDetail"><button id="InstLessonButton" onclick="getLessons(Mitchell Final)">Select</button></td>
</tr>
<tr>
<td id="classHeadDetailTbl">Mitchell Hand-In Assignments</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(Mitchell Hand-In Assignments)">Select</button></td>
</tr>
<tr>
<td id="classHeadDetailTbl">Mitchell Lab Test</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(Mitchell Lab Test)">Select</button>
</td>
</tr>
<tr>
<td id="classHeadDetailTbl">Mitchell Midterm</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(Mitchell Midterm)">Select</button>
</td>
</tr>
<tr>
<td id="classHeadDetailTbl">PC</td>
<td id="InstLessonButtonDetail">
<button id="InstLessonButton" onclick="getLessons(PC)">Select</button>
</td>
</tr>
</tbody>
</table>
</div>
<div id="instLessonMenu">
<br>
<button id="LessonMenuButton" onclick="SetPercentages()">Set Course Percentages</button><br><br>
<button id="LessonMenuButton" onclick="newLesson()">New Class Lesson</button><br><br>
<button id="LessonMenuButton" onclick="DelLesson()">Delete Class Lesson</button><br><br>
<button id="LessonMenuButton" onclick="IndivLesson()">New Individual Lesson</button><br><br>
<button id="LessonMenuButton" onclick="DelIndivLesson()">Delete Individual Lesson</button><br><br>
</div>
</div>
</div>
The javascript function on the button onclick event:
function getLessons(lesson){
if(xmlHttpGetLessons.readyState==4 || xmlHttpGetLessons.readyState == 0){
var lesson_title = encodeURIComponent(lesson);
xmlHttpGetLessons.open("GET", 'InstListLessons.php?lesson ="' + lesson_title + '"',true);
xmlHttpGetLessons.send(null);
xmlHttpGetLessons.onreadystatechange = LessonGetServerResponse;
}
}

Your JavaScript function calls will cause an Unexpected identifier syntax error.
<button … onclick="getLessons(Career Services Assignments)">
When clicking the button, the following JavaScript is executed and results in the error.
getLessons(Career Services Assignments)
You'll want to make the function argument be a string, in the same way that you normally would in JavaScript; by wrapping the contents in quote characters. (Single quotes chosen, as we'll be embedding the call into a HTML attribute value, which uses double quotes.)
getLessons('Career Services Assignments')
And popping this back in to your HTML:
<button … onclick="getLessons('Career Services Assignments')">

Related

Bootstrap modal no longer showing since adding new script tags

I am using bootstrap modal but I noticed that since I changed and added further bootstrap downloaded files, it has stopped working. It may not be the script tags causing it, but I noticed that up until then, it was working.
I also added the bootstrap courousal but I have removed it now, and it still isnt showing (the modal)
No errors are showing in the console.
I have included my code below;
HMTL:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="countryName"></h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="countryFlag" class="countryFlagModal"/>
<select id="selectCountryInfo">
<option value="getKeyInfoSection">Key Country Info</option>
<option value="getWeatherSection">Weather Forecast</option>
<option value="getCurrencySection">Currency / Exchange Rate</option>
<option value="getWikipediaSection">Wikipedia Links</option>
<option value="getCovidSection">Latest Covid Stats</option>
<option value="recentCountryNews">Recent News</option>
</select>
<!--KEY COUNTRY SECTION WITHIN MODAL-->
<div id="getKeyInfoSection" class="countryInfoSection">
<h5 class="detailHeading">Population</h5>
<p id="population"></p>
<h5 class="detailHeading">Capital City</h5>
<p id="capital"></p>
<h5 class="detailHeading">Latitude / Longitude</h5>
<p id="latlong"></p>
<h5 class="detailHeading">Timezone(s)</h5>
<ul id="timezoneList">
</ul>
</div>
<!--WEATHER SECTION WITHIN MODAL-->
<div id="getWeatherSection" class="countryInfoSection">
<select id="weatherSelect">
</select>
<p id="currentWeatherPara"></p>
<table>
<tr class="mainTableHeading">
<th>Main</th>
<th>Description</th>
<th>Temp</th>
<th>Feels Like</th>
<th>Temp Min</th>
<th>Temp Max</th>
<th>Pressure</th>
<th>Humidity</th>
<th>Visibility</th>
<th>Wind Speed</th>
<th>Wind Deg</th>
<th>Sunrise</th>
<th>Sunset</th>
</tr>
<tr>
<td><img src="images/weather_main.png" alt="Main"/></td>
<td><img src="images/weather_description.png" alt="Weather Description"/></td>
<td><img src="images/weather_temp.png" alt="Temp"/></td>
<td><img src="images/weather_feelsLike.png" alt="Feels Like"/></td>
<td><img src="images/weather_min.png" alt="Temp Min"/></td>
<td><img src="images/weather_max.png" alt="Temp Max"/></td>
<td><img src="images/weather_pressure.png" alt="Weather Pressure"/></td>
<td><img src="images/weather_humidity.png" alt="Weather Humidity"/></td>
<td><img src="images/weather_visibility.png" alt="Weather Visibility"/></td>
<td><img src="images/weather_windSpeed.png" alt="Wind Speed"/></td>
<td><img src="images/weather_windDegree.png" alt="Wind Degree"/></td>
<td><img src="images/weather_sunRise.png" alt="Sunrise"/></td>
<td><img src="images/weather_sunset.png" alt="Sunset"/></td>
</tr>
<tr>
<td id="weatherMain"></td>
<td id="weatherDescription"></td>
<td id="weatherTemp"></td>
<td id="weatherFeelsLike"></td>
<td id="weatherMin"></td>
<td id="weatherMax"></td>
<td id="weatherPressure"></td>
<td id="weatherHumidity"></td>
<td id="weatherVisibility"></td>
<td id="weatherWindSpeed"></td>
<td id="weatherWindDeg"></td>
<td id="weatherSunrise"></td>
<td id="weatherSunset"></td>
</tr>
</table>
</div>
<!--COUNTRY SECTION WITHIN MODAL -->
<div class="countryInfoSection" id="getCurrencySection">
<ul id="currencyOptions">
<li class="currencyLi activeExchange" id="showLatestExchange">Latest Exchange Rate</li>
<li class="currencyLi inactiveExchange" id="showHistoricalExchange">Historical Exchange Rate</li>
</ul>
<div id="latestExchangeContent">
<p id="currentExchangeBase"></p>
<p id="currentExchangeDate"></p>
<ul id="latestExchangeRates">
</ul>
</div>
<div id="historicalExchangeContent">
<p>Set a valid date (DD/MM/YYYY) commencing from 1999, then click submit to view the exchange rate on that particular day.</p>
<label class="exchangeRateLabel" for="exchangeRateDate">Date:</label>
<input id="exchangeRateDate" placeholder="01" type=number min="01" max="31"/>
<label class="exchangeRateLabel" for="exchangeRateMonth">Month:</label>
<input id="exchangeRateMonth" placeholder="06" type=number min="01" max="12">
<label class="exchangeRateLabel" for="exchangeRateYear">Year:</label>
<input for="exchangeRateYear" id="exchangeRateYear" placeholder="2021" type=number min="1999" max="2021"/>
<button id="showHistoricalRate">SHOW HISTORICAL RATE</button>
<p id="historicalBase"></p>
<p id="historicalDate"></p>
<ul id="historicalRateResults">
</ul>
</div>
</div>
<div class="countryInfoSection" id="getCovidSection">
<h5 class="detailHeading">Updated Date:<br/><span id="dateOfRecord"></span></h5>
<ul id="covidStatsList">
<li>Total Confirmed Cases: <span id="totalConfirmedCases"></span></li>
<li>Newly Confirmed Cases: <span id="newlyConfirmedCases"></span></li>
<li>Total Recovered Cases: <span id="totalRecoveredCases"></span></li>
<li>Newly Recovered Cases: <span id="newlyRecoveredCases"></span></li>
<li>Total Deaths: <span id="totalDeaths"></span></li>
<li>New Deaths: <span id="newDeaths"></span></li>
</ul>
</div>
<div class="countryInfoSection" id="getWikipediaSection">
</div>
<div class="countryInfoSection" id="recentCountryNews">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
SCRIPT TAGS:
<script type="application/javascript" src="libs/js/leaflet.markercluster.js"></script>
<script type="application/javascript" src="libs/js/bootstrap.bundle.min.js"></script>
<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
<script type="application/javascript" src="libs/js/script.js"></script>
Reorder your <script> tags as follows.
<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
<script type="application/javascript" src="libs/js/bootstrap.bundle.min.js"></script>
<script type="application/javascript" src="libs/js/leaflet.markercluster.js"></script>
<script type="application/javascript" src="libs/js/script.js"></script>
jQuery should usually come first, or at least included before Bootstrap, followed by other plugins that usually depend on them with your own scripts coming in at last.
If the modals still don't work, please share your Bootstrap version details.

How do I pass a C# object as the parameter to a Javascript function

So I have this table which generates it's data based on a collection inside the #Model
#foreach (var number in Model.Numbers)
{
<tr class="tb-tnx-item">
<td class="tb-tnx-id">
<div class="">
<span>#number.Msisdn</span>
</div>
</td>
<td class="tb-tnx-id">
<span>#number.Country</span>
</td>
<td class="tb-tnx-info">
<div class="">
<span class="title">Mobile</span>
</div>
</td>
<td class="tb-tnx-amount">
<div class="tb-tnx-total">
<span class="amount"><em class="icon ni ni-coins align-middle"></em>#number.Cost</span>
</div>
<div class="tb-tnx-status">
<span title="#number.Features" class="">#number.Features[0] / #number.Features[1]</span>
</div>
</td>
<td class="text-center">
<div class="tb-tnx-status">
<a class="btn btn-primary" onclick="doFunction(); ">Default S2</a>
</div>
</td>
</tr>
}
And as you can see I have this part right here which calls upon a JavaScript function when I click on it
<a class="btn btn-primary" onclick="doFunction(); ">Default S2</a>
And here is the JavaScript
<script>
function doFunction() {
alert("Test");
}
</script>
My question is.. How do I pass number as a parameter so that I can do something like this
alert(number.Msisdn);
You should serialize number C# object into a JSON string using Newtonsoft nuget Package
#using Newtonsoft.Json
then pass it to the view as following:
<a class="btn btn-primary" onclick="doFunction(#(JsonConvert.SerializeObject(number)));">Default S2</a>
so final view it will be something like the following:
#using Newtonsoft.Json
#foreach (var number in Model.Numbers)
{
<tr class="tb-tnx-item">
<td class="tb-tnx-id">
<div class="">
<span>#number.Msisdn</span>
</div>
</td>
<td class="tb-tnx-id">
<span>#number.Country</span>
</td>
<td class="tb-tnx-info">
<div class="">
<span class="title">Mobile</span>
</div>
</td>
<td class="tb-tnx-amount">
<div class="tb-tnx-total">
<span class="amount"><em class="icon ni ni-coins align-middle"></em>#number.Cost</span>
</div>
<div class="tb-tnx-status">
<span title="#number.Features" class="">#number.Features[0] / #number.Features[1]</span>
</div>
</td>
<td class="text-center">
<div class="tb-tnx-status">
<a class="btn btn-primary" onclick="doFunction(#(JsonConvert.SerializeObject(number))); ">Default S2</a>
</div>
</td>
</tr>
}

Change content of multiple elements using Javascript without for loop

I am trying to change the content of multiple elements with the same id, using:
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript">
var price_01 = '$8000';
var dimension_01 = '10m';
window.onload = function() {
document.getElementById('price_01').innerHTML = price_01;
document.getElementById('dimension_01').innerHTML = dimension_01;
}
</script>
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<div class="w3-container">
<table class="table">
<tbody>
<tr>
<td>Price:</td>
<td id='price_01'></td>
</tr>
<tr>
<td>Dimension:</td>
<td id='dimension_01'></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
However, it seems that the code doesn't work because you can only have one unique id for each element. Is there a more elegant solution to this problem without for loops and class? I have a lot of these elements to populate and I don't really want to write a for loops for each of them.

Error jquery : Uncaught TypeError: $(...).DataTable is not a function

I tried for tow days to add search field and sorting data table using jquery but always i show this error :
Uncaught TypeError: $(...).DataTable is not a function
I changed the script source order but can't run
PS : I'm using thymeleaf, bootstrap
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}"></td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
This a screen shoot
This error comes because of this code snippet did not take the insecure link so you put https:// for loading data tables. check it with other editor with http:// that woks for me.
the body of the first column have no values. data tables shows this type if errors and alert because missed values.
some times the
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">1</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">2</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
Thank you for your answer, i resolved the problem. The source of the problem was a conflict with anathor jquery local file

Using Jquery.GetJSON to display numbers from JSON file in HTML/JS, with Wordpress?

I have seen similar questions but no answer has quite worked for me yet.
I have JSON code at this address.
I am trying to display the "value_sell" and "value_buy:" objects from "official" and "blue". In Wordpress I have placed the following code in the custom Javascript box:
jQuery(function() {
jQuery.getJSON( “http://api.bluelytics.com.ar/v2/latest?callback=?”,function( data ) {
jQuery(‘#blue_bid’).text(data.blue.value_buy.toFixed(2));
jQuery(‘#blue_ask’).text(data.blue.value_sell.toFixed(2));
jQuery(‘#official_bid’).text(data.oficial.value_buy.toFixed(2));
jQuery(‘#official_ask’).text(data.oficial.value_sell.toFixed(2));
});
});'
The following is the HTML table using variables to display values, but it does not display anything:
<aside class="widget wbluedollar">
<table width=200 cellpadding=3 bordercolor=white border=none>
<tr width=200>
<td style="background: linear-gradient(blue, #0000bb);color:white;" width="100">
<div style="color:#FFFFFF; font-size:.8em;">Dollar Blue</div>
</td>
<td style="background: linear-gradient(#00bb00, green);color:white;" width="100">
<div style="color:#FFFFFF; font-size:.8em;">Dollar Official</div>
<tr>
<td>
<div style="color:#0000bb; font-size:.8em;">BUY: <span id="blue_bid">
<br>SELL: <span id="blue_ask">
</div></td>
<td>
<div style="color:#00bb00; font-size:.8em;">BUY: <span id="official_bid>
<br>SELL: <span id="official_ask"></div></td>
<tr>
<td>
<div style="color:grey; font-size:.7em;">Powered by
<a href=http://bluelytics.com.ar/>Bluelytics</a>
</div></td>
</table>
Any suggestions on where the problem is?
Thanks!
Use proper quotes,properly close the dom elements
<tr width=200>
<td style="background: linear-gradient(blue, #0000bb);color:white;" width="100">
<div style="color:#FFFFFF; font-size:.8em;">Dollar Blue</div>
</td>
<td style="background: linear-gradient(#00bb00, green);color:white;"
width="100">
<div style="color:#FFFFFF; font-size:.8em;">Dollar Official</div>
<tr>
<td>
<div style="color:#0000bb; font-size:.8em;">BUY: <span id="blue_bid"></span>
<br>SELL: <span id="blue_ask"></span>
</div></td>
<td>
<div style="color:#00bb00; font-size:.8em;">BUY: <span id="official_bid"></span>
<br>SELL: <span id="official_ask"></div></td>
<tr>
<td>
<div style="color:grey; font-size:.7em;">Powered by
<a href=http://bluelytics.com.ar/>Bluelytics</a>
</div></td>
</table>
js:
jQuery(function() {
jQuery.getJSON( "http://api.bluelytics.com.ar/v2/latest?callback=?",function( data ) {
jQuery("#blue_bid").text(data.blue.value_buy.toFixed(2));
jQuery("#blue_ask").text(data.blue.value_sell.toFixed(2));
jQuery("#official_bid").text(data.oficial.value_buy.toFixed(2));
jQuery("#official_ask").text(data.oficial.value_sell.toFixed(2));
});
});
Jsfiddle: http://jsfiddle.net/vr9e619k/

Categories