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...
Related
I've an HTML web resource in Dynamics CRM on-premise environment. It is saved as new_htmlpage1, now at a click of Custom button I'm opening this HTML web resource. I've added ClientGlobalContext.js.aspx as reference in HTML webresource as well. But still I am receiving error that GetGlobalContext is not defined
Below is my HTML source code.
<html>
<head>
<script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script type="text/javascript">
function tempContext(){
if (typeof GetGlobalContext != "undefined") {
var userName = Xrm.Page.context.getUserName();
alert(userName);
return;
}
}
</script>
</head>
<body onload="tempContext()">
</body>
</html>
Here is the walkthrough from Microsoft that I am following, but still unable to get GlobalContext.
Please let me know what I am missing here.
The path to ClientGlobalContext.js.aspx is a relative path (relative to the location of your web resource), so ensure that you navigate up the necessary amount of times. E.g. one of the following might be what you need to use, depending on your web resource:
<script src="ClientGlobalContext.js.aspx" type="text/javascript" ></script>
<script src="../ClientGlobalContext.js.aspx" type="text/javascript" ></script>
<script src="../../ClientGlobalContext.js.aspx" type="text/javascript" ></script>
You should then call the function GetGlobalContext() from JavaScript to get access to the global context.
Right now you are trying to call Xrm.*, which is not available.
As the documentation for the GetGlobalContext function states:
Including a reference to ClientGlobalContext.js.aspx does not make the
Xrm object available in HTML web resources. Therefore, scripts
containing Xrm.* methods aren’t supported in HTML web resources.
parent.Xrm.* will work if the HTML web resource is loaded in a form
container. However, for other places, such as loading an HTML web
resource as part of the SiteMap, parent.Xrm.* also won’t work.
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.)
This is the script in my index.html
<script type="text/javascript" src="http://api.map.baidu.com/api v=2.0&ak=eBGR7XzaPhB5UbYARl3E7ksdkMdgrCw7"></script>
and I try to access a object --"BMap" from the script in my JS page which look like this:
var map = new BMap.Map("allmap"); // 创建Map实例
then I get error:"error! BMap is not defined"
what should I do?
I am guessing that you wanted to use BMap that is provided by baidu api. I changed the src that is actually pointing to the script and it seems to work. Note that you probably want to change the https to http when you are developing locally, as it may not work otherwise. See working example below (I had to use https because stackoverflow uses it by default).
If you have any other js module that uses BMap, make sure that it is called after the baidu api script is declared. S
<html>
<head>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058"></script>
<script type="text/javascript" src="../path/test.js"></script>
<script type="text/javascript" src="../otherpath/someOtherjs.js"></script>
</head>
<body>
<script>
// You can use BMap here...
console.log(BMap);
</script>
</body>
</html>
Is there any way that in an external javascript file, can know the host of the file?
For example, if I have the site http://hostOne.com/index.php, the code of the file index.php:
<html>
<head>
<script type="text/javascript" src="http://hostTwo.com/script/test.js"></script>
</head>
<body>
<div>...</div>
</body>
</html>
I need that in the file test.js can know the host http://hostTwo.com.
Thank you.
EDIT
or it can know the tag "script" which was called?, with this option I can analyzes the tag and get the "src" attribute. But I don't want to depend on the name of the file test.js and analyze all the tag script that contains the site.
*Solution based on the code of #Armi *
Html:
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script id="idscript" type="text/javascript" src="http://hostTwo.com/script/test.js"></script>
</head>
<body>
<div>...</div>
</body>
</html>
code in JS
var
url = $('head').find('#idscript').attr('src'),
host = url.replace(/(\/\/.*?\/).*/g, '$1');
console.log(host);
I've got an idea (the snippet based on jQuery):
var yourScriptTag = $('head').find('script[src$="jquery-1.7.1.js"]').eq(0);
var theHostnameOfYourScript = $(yourScriptTag).attr('src').replace(/(http:\/\/.*?\/).*/g, '$1');
alert(theHostnameOfYourScript);
jsfiddle example: http://alpha.jsfiddle.net/XsJn8/
If you know the filename of your script (and if this is always the same and unique) you can use this snippet to get the hostname.
If this path is relative (and contains no host) you can get the hostname with a simple location.hostname
Sorry, not possible. The content of the script is downloaded and after this it is fired. At this point the script "thinks" he is at your site.
Of course unless the host is hardcoded in the script.
This is not possible, because the JavaScript code is executed client-sided. You could propably parse it somehow out of your URL but, I don't think either that this is very useful and possible.
Inside test.js, you can use :
var url = document.URL;
then parse the url result.
You can't make cross-site scripting, so if you need more sophisticated stuff, you could write your javascript in php and call :
<script type="text/javascript" src="http://hostTwo.com/script/test.php"></script>
But that's not standard.
Anyway,, the solution is on the server, with a designed proxy.
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.