Why can I call verfieFormulaire.js but not captureMouvement.js? - javascript

I'm trying to understand why I can't load captureMouvement.js whereas I can load verifieFormulaire.js. Both of them are stored in the same file as my PHP file. I need to use PHP because I really want that page being dynamic.
I'm also running this site on localhost.
Fact : I could call the script when the page was a HTML file.
I've tried to call the script that is already stored on another server. It did not worked. I also tried to move down to , it did not worked either.
I also tried to call the script using ;?> but this failed too
<head>
<title>Projet</title>
<link href="projet.css" type="text/css" rel="stylesheet" title="projet.css" />
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/verifieFormulaire.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="https://tp-ssh2.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
<?php echo '<script src ="projetweb/captureMouvement.js"></script>';?>
</head>
This should call captureMouvement.js, either from local file or from tp-ssh1.dep-informatique.u-psud.fr.
I opened google chrome, so I could check for javascript console. I got this error message : net::ERR_ABORTED 404 (Not Found)
However, I did not get this error for verifieFormulaire.js
Please, help me.

If the .js files are in the same directory as the HTML page (it doesn't matter if it's a PHP page on your server; it's an HTML page from the browser's perspective), then using no path is correct. So remove the extra script tags and the path on them, and there's no need to use PHP to output a static string:
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/verifieFormulaire.js"></script>
<script src ="https://tp-ssh1.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="https://tp-ssh2.dep-informatique.u-psud.fr/~mpetit4/captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
<?php echo '</script>';?>
Those changes give you this:
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="captureMouvement.js"></script>
<script src ="verifieFormulaire.js"></script>
If that works for verifieFormulaire.js but not for captureMouvement.js, then there are really only a few possible reasons:
There's a problem with the permissions on captureMouvement.js; make sure they match verifieFormulaire.js.
There's a typo in the name (perhaps you're using a case-sensitive file system and the filename is capturemouvement.js or in some other way subtly different).
captureMouvement.js isn't in the same directory.
captureMouvement.js is getting loaded, but failing to parse/run because of a syntax error. Check your web console for errors. (No, you said you get a 404 for it.)

Related

html script blank page when run

I'm trying to debug an experiment written in JS & html. I'm running an html template that imports JS codes. But all I get is a blank page when I run it in chrome. I checked whether my chrome preference allows javascript to be run.
<!doctype html>
<html>
<head>
<title>Name Face Association Task</title>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/jquery-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/underscore-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/backbone-min.js" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/lib/d3.v3.min.js"></script>
<!-- jsPsych Plugins -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/jspsych.js"></script>
<script defer src ="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-instructions.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/plugins/jspsych-survey-html-form.js"></script>
<link href="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/jsPsych/css/jspsych.css" rel="stylesheet" type="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/css"></link>
<!-- additional functions -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/supplementary-functions.js"></script>
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/questionnaire.js"></script>
<!-- psiTurk
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/psiturk.js" type="text/javascript"></script>
<script type="text/javascript">
// These fields provided by the psiTurk Server
var uniqueId = "{{ uniqueId }}"; // a unique string identifying the worker/task
var adServerLoc = "{{ adServerLoc }}"; // the location of your ad (so you can send user back at end of experiment)
var mode = "{{ mode }}"
</script>
-->
<!-- experiment -->
<script defer src="/Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/static/js/NFA.js"></script>
</head>
<body>
<noscript>
<h1>Warning: Javascript seems to be disabled</h1>
<p>This website requires that Javascript be enabled on your browser.</p>
<p>Instructions for enabling Javascript in your browser can be found
here</p>
</noscript>
</body>
</html>
My psiturk is not able to be downloaded, so I commented out all the code related to psiturk and tried running it in plain html instead.
I guess your server does not have a path like http://example.com/Users/jasonlim/.... :)
You should open your browser's devtools (F12) to see the errors. It would have told you that those files cannot be found.
You need to make those paths relative to the current page (something like static/lib/jquery-min.js or lib/jquery-min.js depending on where your HTML file is located), or when running a local HTTP server you can make them relative to the root of the domain (e.g. /lib/jquery-min.js).
Plus, you have invalid type attributes. The MIME type for JavaScript is text/javascript and not /Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/javascript. Same goes for the style tag, the MIME type should be text/css and not /Users/jasonlim/Downloads/MTurk_Experiments-master/NFA/text/css.
You can check the documentation about <script> and <style> here. Also, take a look at this tutorial to understand relative and absolute URLs.
But, it appears to me that you are looking at this the wrong way in the first place. According to the psiTurk documentation, you need to use the psiturk tool (for example with the debug command) to test your experiment locally, not by opening the HTML file manually. Your comment says "These values are provided by the psiTurk server" but if you just open the HTML files, there is no such psiTurk server, and you will have variables actually containing {{ uniqueId }} for example, instead of the ID that the server would normally put there...

Trying to link a local Javascript file to HTML document but in the browser, I receive a Failed to load resource error

I'm trying to link a javascript file to my html document.
I'm following the instructions on http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-days-range to select multiple dates from a calendar as input in a form.
It says "You include both jQuery and jQuery UI (with datepicker module included!) javascript files to your HTML page, and right after that, include MultiDatesPicker".
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery-ui.multidatespicker.js"</script>
Which I have done.
Note jquery-ui.multidatespicker.js is in my local project directory as it's own file not in any folders. You can download a zip file on the github page where this file is included.
Then I call the multidatespicker function in the head of the document.
<script type="text/javascript">
$(function() {
$('#mdp-demo').multiDatesPicker();
});
</script>
And finally within the body you write your html input id to be used in the function
<input id="mdp-demo">
When I run this in the browser I get an error "Failed to load resource: the server responded with a status of 404 (NOT FOUND)" for jquery-ui.multidatespicker.js:1.
If you scroll down to the demos on the multiple dates github page and go to "Form input". That is what i'm trying to achieve. The problem is that my jquery-ui.multidatespicker.js script search isn't finding the script and therefore doesn't recognize the .multiDatesPicker() function.
Any suggestions as to what I'm doing wrong?
You should use CDN link for multidatespicker
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker#1.6.6/jquery-ui.multidatespicker.js"></script>
If you want to use <script src="jquery-ui.multidatespicker.js"</script> you need download file an put at same HTML folder and it will work. Also note that you missing > for open tag.
$(function() {
$('#mdp-demo').multiDatesPicker();
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker#1.6.6/jquery-ui.multidatespicker.js"></script>
<input id="mdp-demo" />

Linking to files in custom 404 page not working in other directories

SO I have this 404 page
and I think I understand the problem.
SO this works correctly: sia.github.io/404.html and so does this:
sia.github.io/ooofdfsdfaablahblah
BUT sia.github.io/1/2/3/
does work, but all the files are missing, as in the jpg and all the .js scripts.
How do I link them so they work?
Like in a script you'd make this problem go away if you had an issue with
/Documents/fileIwant.txt
to
~/Documents/fileIwant.txt
so it would always go home first then get the file.
I see you 404 file code
<script src="js/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
When we access http://sia.github.io/ooofdfsdfaablahblah , The js/Three.js will location to http://sia.github.io/js/Three.js .
Howere if we access http://sia.github.io/1/2/3/ , The js/Three.js will location to http://sia.github.io/1/2/3/js/Three.js . this file not found.
solution one:
<script src="/js/Three.js"></script>
or solution two:
<base href="http://sia.github.io/" />
<script src="js/Three.js"></script>

Referencing JQuery correctly

I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.

cant get jquery to work with php file

I have a linux webserver that has /var/www configured in the Apache2.conf file as the DocumentRoot. Next I have my jquery core file located at /var/www/js/jQuery_v1.4.2.js (a central location for all my websites to access.
The .php index file is located at /var/www/AOI/aoiparse.php, where the aoifunctions.js file is also located. My <head> tag looks as follows:
<script type='text/javascript' scr='/js/jQuery_v1.4.2.js'></script>
<script type='text/javascript' scr='aoifunctions.js'></script>
my aoifunctions.js file has the following in it in order to verify that the script link works:
$(document).ready(function(){
alert("hello");
});
My problem is that I cannot get the alert() to work. I'm not getting an error message so I do not know where the problem is.
You can try <script type='text/javascript' src='../js/jQuery_v1.4.2.js'></script>
(The attribute is src, not scr, plus your path was incorrect)
put the jquery file in /var/www/AOI/js/ and then
remove the first /
<script type='text/javascript' src='js/jQuery_v1.4.2.js'></script>
so it lies in a subdirectory to your main page
or use this if you want to leave it where it is:
<script type='text/javascript' src='../js/jQuery_v1.4.2.js'></script>
You misspelled "src" in your <script> tags. It's short for SouRCe.
<script type='text/javascript' src='/js/jQuery_v1.4.2.js'></script>
<script type='text/javascript' src='aoifunctions.js'></script>
If you used Firebug you'd have been able to easily tell that the scripts weren't loaded.

Categories