So I have narrowed down my problem and was wondering if there was a solution to this or a way to get around it.
The code I have been working on in HTML uses a web frame work called turbogears.
To grab the files in turbogears it uses this command
<script type=text/javascript src= "${tg.url('pv/jquery-2.0.2.min.js')}"
Without it I get an error message like so
GET 'pv/jquery-2.0.2.min.js' 500 Internal Server Error
Now I am working on integrating my code into someone elses and I used RequireJS in my code. So in my require I have this set up
//HTML5
<script type=text/javascript data-main= "${tg.url('pv/demo.js')}" src= "${tg.url('pv/require.js')}"
//JAVASCRIPT
requirejs.config({
'baseUrl': 'src',
});
require(['pv'], function(PV) {
//code here
}
So I think what happens is that it runs the turbogears commands before the javascript and when it gets to the require it doesn't know how to grab the files without the turbogears command.
So I am wondering how do I run the command somehow with requireJS? Is there a simple solution? I am not too familiar with the turbogears web framework since I am just trying to integrate my code.
THINGS I HAVE TRIED
I have tried to just copy and paste the command in replacement of just src in the baseURL
requirejs.config({
'baseUrl': "${tg.url('pv/src')}"
});
which doesn't work and responds with the same error.
I am thinking I would have to make each separate script tags to call each files? which might be too complicated and just down right messy code.
Any thoughts on how to tackle this problem?
You don't have to always use
"${tg.url('')"
. Suppose in my public directory i have a folder javascript and in that i have require.js then i can include it directly like this:
<script type="text/javascript" src="/javascript/require.js"></script>
If anywhere you use the tag ${}, then that will be evaluated before the javascript.
Related
In my electron renderer, I have the following script:
<script>require('main.js')</script>
In that file, everything is commented out and my program keeps crashing. If I change the above to:
<script src="main.js"></script>
The file loads, however I cannot use require within that file. What do I need to change to get this to start working?
Edit:
I think the issue might be because I am using pug to generate my html like so:
block content
script.
require('../../js/client/main')
When I use an actual HTML file, it loads without hanging.
So, it looks like the issue was that electron was trying to load a .js.map file from the wrong location. electron-pug was intercepting the url of the file and since it was not found it was throwing an error (not handling it very well it seems).
My solution to fix this was to have inline sourcemaps instead of having a separate file.
I have recently got a chance to explore one famous JavaScript library; In that library, I have found one strange way of referring JavaScript library from HTML page.
The application folder structure looks like this,
index.html contains the reference of subroot.js;
index.html
<head>
<title>Index</title>
<script src="js/subroot.js"></script>
</head>
subroot.js only contains the following code (i.e.,the relative path of root.js)
subroot.js
../../js/root.js
When I try to run the index.html, i get syntax error in the first line of subroot.js
Questions:
Is it right way to refer another javascript library by its relative path?
If yes, Why I get error message on the web page?
JavaScript by itself doesn't support loading files or referring paths. You need a module loader of some kind to achieve what you want. With the new version of the standard (ECMAScript 6) there is something called "imports" which you might find useful. I have experience using JSPM and the SystemJS module loader, which makes it pretty easy to connect the dots.
However, without using any additional tools you should just inject another script tag in your HTML.
Just reference root.js in the HTMl file not in the Subroot.js file, you can't reference another .js file from a .js file as far as I know.
<script src="../js/root.js"></script>
See Link
write this in subroot.js file
var x = document.createElement('script');
x.src = '../../js/root.js';
document.getElementsByTagName("head")[0].appendChild(x);
I built a python app on google app engine that pulls pictures from the flickr API and allows users to do cool stuff with the pictures, like drag and drop.
I have three JS files in the body:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/init.js"></script>
My jQuery code is working fine but only when I write it in either of the jQuery documents. If I place the code in the init.js, the code simply doesn't work, which I find rather weird. I put the code in the jquery files because I wrote console logs on the three script files and only the init.js didn't print to the console. I am linking the files correctly and referring to the right folder and right file. The folder JS was also added to the app.yaml:
- url: /js
static_dir: js
I can just leave the code in the jQuery file but this is not what I am supposed to do. I want to fix it.Is there a specific way to use the JS file on google app engine?
Use absolute paths instead of relative when loading your JS files (add the leading slash /):
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/init.js"></script>
I fixed it. The problem was that I named the file init.js. For some reason Firefox doesn't like that name (at least mine didn't) and didn't load the file. Chrome loaded the file without any problems. When I changed the file name to main.js, it started working in Firefix as well. I only tried this when I had exhausted all other possible options though. Such a weird behavior of Firefox.
I put a function in an existing.js file (I tried two different files) so that the method would be available multiple places without repeating the code. I even created a simple function just to make sure it wasn't something my function was messing up.
function doNothing() {
alert("Dammit.");
}
I can see the method in the intellisense list in my .ascx control, but as soon as I try to step into it, it fails.
Below is how I tried to reference the file and it seemed to work as far as seeing the methods, but it won't work.
<script src="/javascript/messages.js" language="javascript" type="text/javascript"></script>
Any ideas? Any common mistakes that I may be making? It looks like it should work.
Note: when the methods are inside the .ascx file, they work fine, even with missing semi-colons.
Even if IntelliSense suggested "/javascript/messages.js", the path will be wrong if your application is installed under a virtual directory instead of at the root of the Web site. For example, the full URL of the JavaScript file might be at http://www.example.com/myapp/javascript/messages.js, but because the src attribute starts with a /, the browser will access http://www.example.com/javascript/messages.js (without the "myapp" virtual directory) instead.
If you're using WebForms, you can change the src attribute as follows:
src='<%= this.Page.ResolveClientUrl("~/javascript/messages.js") %>'
I have defined the following module in MyModule.js:
MyModule.js:
MyModule = {
controller: {
paintCar: function(color){
//PAINTING PROCESS
}
},
tester: {
...
},
};
Then, I have another javascript file, other.js:
other.js:
MyModule.controller.paintCar('red');
My index.html
<body>
<script scr="MyModule.js"></script>
<script src="other.js"></script>
</body>
All these files are put under WebContent directory of Eclipse Dynamic Web Project.
In other.js when I try to run the above code, I got error "MyModule is not defined". Why?
You misspelt src here: <script scr="MyModule.js">. This would have been picked up by basic automated QA testing.
(Original answer before the theory was confirmed) Presumably, because you aren't loading the script files properly. Since you haven't shown us the code that does that (or even told us what environment you are using) it is hard to say exactly how you went wrong.
Assuming you are using client side JS in a webpage, your code should look something like:
<script src="MyModule.js"></script>
<script src="other.js"></script>
Order is significant. End tags are mandatory. Self-closing tag syntax is unacceptable (unless the document is served as application/xhtml+xml)
(This uses HTML 5 syntax. For HTML 4 / XHTML 1, add a type attribute. For HTML 3.2, add a language attribute)
You haven't mentioned your environment, but generally you have to ensure that the JavaScript in MyModule.js is executed before the JavaScript in other.js, because you need MyModule.js to set up the MyModule variable.
How you do it will vary by environment. In a web browser, you'd do that by putting in two script tags, first one for MyModule.js then the one for other.js (although frequently, for use on websites, you want to have a build process that combines your scripts into a single file to minimize HTTP requests). In NodeJS, there's the whole require mechanism.
Update based on your edit:
Looks like a typo:
<body>
<script scr="MyModule.js"></script>
^^-- here, they're transposed
<script src="other.js"></script>
</body>
If that typo isn't really in your file, then look to see that the files are where the web server expects, that the web server isn't being thrown by capitalisation, that sort of thing. Fundamentally, that's correct.