In Firefox hit Ctrl+Shift+Q, then you may have to refresh your page. Look for inputJavaScript.js to be loaded and see why it’s erroring.
I don’t know, this is weird. I moved the src to bottom of body
<script type="text/javascript" src="./inputJavaScript.js"></script>
<!-- <script type="text/javascript" src="test.js"></script> -->
</body>
and I copied and pasted the js from inputJavaScript back into the html just to check that it is working and it is. So i know that there isn’t any problem with the JS. And the fact that the test.js works means I don’t have any path issues.
At least i know that I have all the obvious things correct and it seems to be something obscure.
So let’s think about this logically. Before, you were calling the JS before the HTML had loaded. So that JS will run without any loaded HTML. Why would that JS be able to properly work? It’s not weird that moving it AFTER HTML loaded makes it work.
It was hinted.
1 Like
It still isn’t working. When you say
do you mean inside and at the end of body, as above post #24?
Thanks
It makes it work when all the JS is there inside script tags but not when a link to the JS source is out there.
The JS does get alot of elements and moves them around in the DOM.
I had very similar problem before.
First of all check file permission. A lot of times it is the culprit. Make sure that everyone has the right to read.
Secondly try src=./inputJavaScript.js instead of src=inputJavaScript.js. This worked for me if the directory order is as you described. Let me know how it works
Also follow the advices of the above. removing language=“javascript” is definitely correct.
I have tried
src=./inputJavaScript.js
src=/inputJavaScript.js
and
src=inputJavaScript.js
and have removed
Can’t see how file permissions could be the issue as test.js works. I also tried copying the JS into the test.js file while using src=“test.js” but no luck
Must be some reason that the JS can’t access the html elements.
I must try to run a simpler version of this and see how it goes.
Thanks,
Definitely use simpler script to test response, but have you checked file permission and not just dismissing the possibility??
If your js is not accessible by browsing public it won’t be used.
Based on you saying that running a dummy test.js worked fine, that should tell you something - there’s something either a) wrong with the script itself, or b) like others have posted, there’s an issue with the timing of the script firing (are you firing it on the DOMLoad or DocumentLoad? Or some other time).
I don’t know?
I think
Thanks
The file permission for both inputjavaScript.js and test.js are the same. I ahve just checked them.
I got this to work
alert("blah");
document.getElementById('subject').innerHTML = "";
document.getElementById('subject').innerHTML = "Subject:";
in the JS file while commenting out the rest.
I am geeting an error,
SyntaxError: expected expression, got '<'
which is in this line,
subjectArray = <?php echo json_encode($ASsubjects, JSON_PRETTY_PRINT); ?>;
which is in the eight line in this function,
function subjectHandler() {
var subjectArray = [];
var a = true;
document.getElementById('subjectText').innerHTML = "";
document.getElementById('subjectText').innerHTML = "Subject:";
document.getElementById('subject').innerHTML = "";
if(exam.value=="AS"){
subjectArray = <?php echo json_encode($ASsubjects, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="A2"){
subjectArray = <?php echo json_encode($A2subjects, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="AP"){
subjectArray = <?php echo json_encode($APsubjects, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="KET"||exam.value=="PET"||exam.value=="FCE"||exam.value=="IELTS"){
selectOption = "<select name='subject' style='background-color: #FFDDF4'><option value='English'>English</option></select>";
document.getElementById('subject').innerHTML = selectOption;
a = false;
}
if(a){
var strOption = "";
subjectArray.forEach(function(item){
strOption += "<option value='" + item + "'>" + item + "</option>";
});
selectOption = "<select name='subject' style='background-color: #FFDDF4'>" + strOption + "</select>";
document.getElementById('subject').innerHTML = selectOption;
}
}
But I don’t see anything wrong.
Thanks,
You can’t mix server side and client side. If you want to do that, it’s gotta stay in a script tag, and not in an external file.
2 Likes
Ah so this is the problem. I can’t have php inside a js file.
I needed to convert some php arrays into JSON js objects.
What and where is the best place to do this then?
Should I do it in the HTML?
At least I now know the problem.
Thanks
Taking the code out of the external file and placing it inside the script tags (which is probably where it was before) should work.
The other option would be to create the JSON objects in your php file, then pass them as parameters to the method when you call the method.
you can if you make it a PHP file. but then you would also need to set the correct headers, otherwise the browser won’t process it.
as usual, it depends on your code. you can make a JS function that accepts the data from PHP as input and instantiate the data from PHP in the main page and call it with the (now PHP independent) function.
from the looks of your function you could also request PHP (via AJAX) for the necessary data when you need them.
This is what I would like to do. But as you can see from the JS function below the PHP arrays are only converted if a certain option in a menu is selected. The menu has id=‘exam’.
function subjectHandler() {
var subjectArray = [];
var a = true;
document.getElementById('subjectText').innerHTML = "";
document.getElementById('subjectText').innerHTML = "Subject:";
document.getElementById('subject').innerHTML = "";
if(exam.value=="AS"){
subjectArray = <?php echo json_encode($ASsubjects, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="A2"){
subjectArray = <?php echo json_encode($A2subjects, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="AP"){
subjectArray = <?php echo json_encode($APsubjects, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="KET"||exam.value=="PET"||exam.value=="FCE"||exam.value=="IELTS"){
selectOption = "<select name='subject' style='background-color: #FFDDF4'><option value='English'>English</option></select>";
document.getElementById('subject').innerHTML = selectOption;
a = false;
}
if(a){
var strOption = "";
subjectArray.forEach(function(item){
strOption += "<option value='" + item + "'>" + item + "</option>";
});
selectOption = "<select name='subject' style='background-color: #FFDDF4'>" + strOption + "</select>";
document.getElementById('subject').innerHTML = selectOption;
}
}
function sessionHandler() {
var sessionArray = [];
if(exam.value=="AS"|| exam.value=="A2"){
document.getElementById('sessionText').innerHTML = "";
document.getElementById('sessionText').innerHTML = "Session:";
sessionArray = <?php echo json_encode($sessions, JSON_PRETTY_PRINT); ?>;
document.getElementById('session').innerHTML = "";
var strOption = "";
sessionArray.forEach(function(item){
strOption += "<option value='" + item + "'>" + item + "</option>";
});
selectSessionOption = "<select name='session' style='background-color: #FFDDF4'>" + strOption + "</select>";
document.getElementById('session').innerHTML = selectSessionOption;
} else{
document.getElementById('sessionText').innerHTML = "";
document.getElementById('session').innerHTML = "";
}
}
function resultHandler() {
var resultArray = [];
if(exam.value=="AS"|| exam.value=="A2"){
resultArray = <?php echo json_encode($GCEresults, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="AP"){
resultArray = <?php echo json_encode($APresults, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="KET"||exam.value=="PET"){
resultArray = <?php echo json_encode($KETPETresults, JSON_PRETTY_PRINT); ?>;/*KET and PET results are same*/
}else if(exam.value=="FCE"){
resultArray = <?php echo json_encode($FCEresults, JSON_PRETTY_PRINT); ?>;
}else if(exam.value=="IELTS"){
resultArray = <?php echo json_encode($IELTSresults, JSON_PRETTY_PRINT); ?>;
}
var strOption = "";
resultArray.forEach(function(item){
strOption += "<option value='" + item + "'>" + item + "</option>";
});
part1Str = "<select name='result";
part2Str = "' style='background-color: #FFDDF4'>" + strOption + "</select>";
}
function yearHandler() {
document.getElementById('yearText').innerHTML = "";
document.getElementById('yearText').innerHTML = "Year:";
var yearArray = [];
yearArray = <?php echo json_encode($years, JSON_PRETTY_PRINT); ?>;
document.getElementById('yearid').innerHTML = "";
var strOption = "";
yearArray.forEach(function(item){
strOption += "<option value='" + item + "'>" + item + "</option>";
});
selectYearOption = "<select name='annual' style='background-color: #FFDDF4'>" + strOption + "</select>";
document.getElementById('yearid').innerHTML = selectYearOption;
}
var i=0;
function classAdder(){
var table = document.getElementById("tableByclass");
var row = document.createElement("tr");
var cell = document.createElement("td");
if(i==0){
var empty = document.createTextNode("First name:");
}else{
var empty = document.createTextNode("");
}
cell.appendChild(empty);
row.appendChild(cell);
cell = document.createElement("td");
var detail = document.createElement("input");
detail.type = "text";
detail.name = "first" +i;
cell.appendChild(detail);
row.appendChild(cell);
cell = document.createElement("td");
if(i==0){
var empty = document.createTextNode("Last name:");
}else{
var empty = document.createTextNode("");
}
cell.appendChild(empty);
row.appendChild(cell);
cell = document.createElement("td");
var detail = document.createElement("input");
detail.type = "text";
detail.name = "last" +i;
cell.setAttribute("id", "idNumber");
cell.appendChild(detail);
row.appendChild(cell);
cell = document.createElement("td");
if(i==0){
var empty = document.createTextNode("Result:");
}else{
var empty = document.createTextNode("");
}
cell.appendChild(empty);
row.appendChild(cell);
cell = document.createElement("td");
cell.setAttribute("class", "left");
selectResultOption = part1Str + i + part2Str;
cell.innerHTML = selectResultOption;
row.appendChild(cell);
table.appendChild(row);
table.rows[1].className = "topRow"; /* second row*/
i++;
}
function clearTable(){
for(var j=i; j>0; j--){
tableByclass.deleteRow(j);
}
i=0;/*resets i to 0 so that when classAdder is called in callFunctions() the first row will include the text nodes First name and Last name*/
}
function callFunctions(){
yearHandler();
subjectHandler();
resultHandler();
sessionHandler();
clearTable();/*clear all but first row*/
classAdder();/*generates last name, first name and result forms when exam type is first pressed*/
}
document.getElementById('exam').onchange = callFunctions;
Thanks
What I want to do now is run php in the js file. I know I need to rename the js file test.js.php and change the header to
<?php header("Content-type: text/javascript"); ?>
Does that bit of php header go at the top of the js as is it here with both enclosing php tags?
So I have a html file with php which includes a php file where thr php files comes from. Then in the html there is a src link to the js file with extension .php and header as above. Will this js.php file see the php arrays in the php file?
Thanks
Is this the correct header?
<?php header("Content-type: text/javascript"); ?>
Thanks