I'm trying to display a page of html using bottle (the python web framework). The page has javascript embedded but it won't display it when I serve it with bottle.
The JS I'm using is EditArea, I can clean it up how I want and put it an html page that displays properly when I open the page in chrome. But when I use bottle:
#route('/edit')
def edit():
return template('editarea')
#route('/edit_area')
def edit_area():
send_file('example1.html', root='path/to/file/')
and go to http://localhost:8080/edit or /edit_area, I see the page without any of the fancy javascript features.
Eventually I want to hook this up (EditArea is text area and I'll be using it to accept code which hopefully I'll be able to run... but that's a separate issue...), but right now all it's supposed to do is display the page and the javascript. The JS is put in the html as simply as possible. Those two blocks use different files but they are just copies of the same html file, one with .html and the other with .tpl extensions.
<title>EditArea - the code editor in a textarea</title>
<script language="Javascript" type="text/javascript" src="../edit_area/edit_area_full.js"></script>
<script language="Javascript" type="text/javascript">
// initialisation
editAreaLoader.init({
...and then it's all of the JS code (that I didn't write).
In the file to start the server I import: route, run, debug, template, request, send_file, and error from bottle; and sqlite3; but that's all. Is there something else I should be including?
I've looked into the bottle documentation, and a few other places and it's either something really obvious that nobody bothers to write down or it's something that people just don't do...
I was looking at pyjamas (it keeps coming up with different combinations of search queries involving "python" and "javascript"), but it looks like that just converts python into javascript. I don't think that's what I want b/c the javascript is already javascript...
Thanks for any insight you might have.
You need to create a view to serve static files, as described in Bottle documentation.
I suggest you to put all your static files (css, js, images) in a static folder next to your application. The view to serve static files would then look like this:
from bottle import static_file
#route('/static/:filename:')
def send_static(filename):
return static_file(filename, root='./static/')
You would then include your .js file like this (using the path you'll have choosen of course):
<script type="text/javascript" src="/static/edit_area/edit_area.js"></script>
If you're using the template system included in Bottle called SimpleTemplate then it does not support multi line strings and the templates get compiled to executable Python bytecode. So its likely any Javascript would be stripped out.
The only way to include javascript in your page would be via script tags as you did for the "edit_area_full.js" file.
Related
this might be an issue of, I don't even know what to look for, thereby repeating a question. If so please link correct page and I will scurry to the corner in shame! Thanks in advance!
BEFORE: I was just running a game with an index.html and two file_name.js files, and pulling them in the head along with jQuery.
In my old HTML file:(This worked) I had a game.js file (doing doc ready, on click and keyup commands) and a gamelogic.js file (managing all the game logic)
My code from my OLD index.html file
<script src="https://code.jquery.com/jquery........."></script>
<script src="js/gamelogic.js"></script>
<script src="js/game.js"></script>
Now:
(Transferring a game over to rails) I'm in a Rails 4 app, scaffolded a game Model.
Created two new .js files with similar names in the app/assets/javascripts file
The problem: I know both files are being loaded, as I can console.log("foo") from both. And I know all my functions work, as when all code is combined to one file, all feature function.
I would like to keep them as two different files as the doc ready section is already kinda long and so is the logic section.
Below is the goal, call a logic function inside of the main game file.
File game.js
$(document).ready(function() {logicFunction();};
File gamelogic.js
function logicFunction(){console.log("BAR")}
Just a note: this is not for production or best practices, this is to learn the ins and outs of rails, and what things can and can't do. I doubt my code "should" be split, however I am curious if it's even possible. I will also we converting to coffee once I get functionality.
A much detailed explanation on your above question is in the following link. please check through
How to include js file in another js file?
I have some html, that had a bunch of JS code inside a script tag. So I moved it to a separate .js file.
JS code also loaded some variables from CGI, using strings in a form of <%ejGet(var)%>. But after separating the code from HTML file, the strings don't get replaced with data from the server.
Is there a way to include a JS file as if it was written inside a script tag or is there another way to do this?
<script language="javascript">
<!-- hide
var syncNvram = '<%ejGetWl(wlSyncNvram)%>';
...about 1000 lines more...
</script>
So after moving this code to a separate file, the variables don't load.
The problem is that your <% ejGetWl(wlSyncNvram) %> is being executed on the server by some templating or processing engine before it gets sent to the browser, so the browser is actually seeing the output, e.g.
var syncNvram = 'abcdefg'; // or whatever the output is
The question you are really asking is, can my server side templating/processing engine process a javascript file as opposed to an html file.
The answer is, it depends on the template/processing engine, but in general, this is a bad idea. JS files should remain static assets for lots of good reasons (breaking code, distributing via CDNs, etc.)
The better thing to do is separate them out:
<script>var syncNvram = '<%ejGetWl(wlSyncNvram)%>';</script>
<script src="myfile.js"></script>
Declare it separately.
Even better might be using ajax to get it, but that is a whole different architecture which may not suit here.
To do that you need to generate the script from the CGI program.
<script src="/cgi-bin/example.js.cgi"></script>
Of course, that will be a different CGI program so getting the variables in the right state may be problematic.
Usually you would solve the problem using a different approach: include the data in the document (either in the script element or in an element such as a <meta> element, a hidden input or a data-* attribute on something relevant and then have a static script read the data from the DOM.
Okay so I have a meteor app and I am trying to make templates that have THREEjs animations in them so I can load a specific animation by loading a specific template. I wanted to de-clutter my HTML file by taking out the script tags and moving them to a separate JavaScript file but that wasn't working. I ended up just putting the JavaScript into my HTML and it worked. I was going to just keep doing that and live with the cluttered code but now I have run into a problem.
For some odd reason even if a for loop is inside the script tags, the computer will see the < sign and expect a html tag. At first I thought I had forgotten a closing tag or something but I checked and I haven't. If I delete the for loop (only create one particle) everything works perfectly again. I could fix this by just using escape character for the < sign (<) but I think I should find a solution to the overarching problem so I don't run into similar problems in the future.
I want to put the least amount of JavaScript in my HTML file as possible. (Meteor doesn't like it and neiter do I.)
If I try to just copy and paste my JavaScript into a separate file, it won't find the min.three.js file (it tells me THREE isn't defined)
I would prefer not to use another framework like require.js mainly because I'm not sure how but I will as a last resort if that's the only way to do it
All the examples for THREEjs put the code directly in the HTML file but how can I put it into a separate javascript file and make sure the javascript file finds min.three.js?
This is an overview of what the template looks like. I used jQuery to find actualAnimation2 and appended the container to that. You can also find all the code here
<template name = "animation2">
<div id = "animation2" class = "centered">
<div class = "line"></div>
<h1>Animation 2</h1>
<div class = "line"></div>
{{> animationButtons}}
<!--Put in a threejs animation here -->
<div id = "actualAnimation2" class = "animation">
<script src="client/three.min.js"></script>
<script>
//THREEjs stuff here
//This is what I want to move
</script>
</div>
</div>
</template>
tl;dr: How can I make THREEjs play nice with Meteor?
Any suggestions are welcome and let me know if I can clarify anything. Thank you for your help!
Quoting http://docs.meteor.com/ :
Some JavaScript libraries only work when placed in the
client/compatibility subdirectory. Files in this directory are
executed without being wrapped in a new variable scope. This means
that each top-level var defines a global variable. In addition, these
files are executed before other client-side JavaScript files.
This is exactly what needs to be done with three.min.js because the beggining of the file looks like :
// threejs.org/license
'use strict';var THREE={REVISION:"68"};
So you need to put three.min.js inside cient/compatibility/.
But you are probably better off using a package, choose carefully the one who is more likely to upgrade to revision 69 quickly in a few weeks or so.
If I try to just copy and paste my JavaScript into a separate file, it won't find the min.three.js file (it tells me THREE isn't defined)
It sounds like you're running into an issue where your JS files are loaded before min.three.js. You might be able to fix that by taking advantage of Meteor's JS load order - files in directories called lib are loaded first, so if you put your min.three.js file inside /client/lib it will load before source files outside that directory.
Another option would be to use a package - for example, meteor add aralun:three.
Background information :
A tool simulates IE behavior, instead of HTML for browser, it uses a special object which contains html segment<![CDATA[ HTML Here or JS here ]]>. The tool disabled the ajax call; however, the activeX works on that tool. In other words, HTML display in browser = special object display. No server side language (i.e. php) allowed.
Problem :
The object developed for that tool contains everything(html+css+js) in one single file. Then it makes developer difficult to manage changes. Currently, when I develop, I copied the HTML from <![CDATA[ All HTML or JS here ]]>; after I modified it , I copied the html file back to <![CDATA[ HTML Here or JS here ]]>. I want the object is more organized, for example: in the html segment of the object, just put something like <![CDATA[<javascript>require a.html<javascript> ]]> , then the content in a.html will be automatically placed in the object. Can you suggest any solution or any library for this problem?
ps: I didn't use requirejs before, it seems requirejs uses ajax call to include text file, is it possible that requirejs uses local path to include a file?
Thank you.
Partial solution to my problem: I used activeX to read the entire file, and used jQuery to set the file content to some html element. so the js will look like:
<![CDATA[
<script>var k = readfile(getAbsolutePath()+"\\a.html");
jQuery("#display").html(k);<script> ]]>
I think this solution is for my tool only; To make it work, some requirements:
1. can get the absolute path of the text/html file.
2. activeX works.
OK, now that I understood your problem.
Use
<iframe src="another_file.html">
That is probably the only way to load multiple html files without Ajax or PHP, as far as I know.
Per comment from prytsh, using an embed call should do the trick in HTML5:
You can try this by using jquery
//use this line in jquery
$("#id").load("trackingCode.html");
I am working on a project where I need to include somewhat around 10-15 .js files in the HTML head section directly like
<script type="text/javascript" src="http://localhost:9020/website1/wa/min/soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
what is the way I can give refrences correctly
the files I need to refre are in the same hierarchy like
1.....2,3
2.........4,5
3........6,7
I need to refer 1,4,7 please help.
somewhere I read this method what's it?
<script type="text/javascript" src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
The example you posted looks exactly like the query string interface for the minify PHP library: http://github.com/mrclay/minify
Using it you use it in the fashion <script src="min/?b=path&f=script1.js,script2.js,ui/script3.js"></script>.
Where path is the path from your web root that you want it to look for scripts under.
I've used it before and I've found it quite effective. It concatenates, minifies, caches, and serves JS and CSS.
I'm sure there are other libraries to achieve the same effect, alternatively you can create a build script to concatenate and minify all your scripts and then deploy a single JS file to your site, in a single script tag.
It is not possible to load multiple javascript files in a single <script> element.
You have to have to have an individual <script> element for each script you are referencing..
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js"></script>
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=vars.js"></script>
I think you'll get what you need from dynamically loading external javascript files:
http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
The second line you posted requests scripts from the server dynamically. the b parameter of the request tells it you want scripts and the f parameter tells the server which files you want. Then it concatenates these into one file and sends that back to the user agent. You need server-side scripting to handle this; it is not something built into the URL specification.
http://localhost:9020/wordplus/root/child/
b=scripts
f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js
The simplest solution is just have one script tag per file as it will let you take advantage of caching:
<script src="http://localhost:9020/wordplus/root/child/soundmanager2.js"></script>
<script src="http://localhost:9020/wordplus/root/child/vars.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/md5.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/utils.js"></script>
Another solution is to use some JavaScript builder to join all your files, generating just one. The pros of this approach is that your result file will be "compressed" (minified). Some builders:
Google Closure Compiler (I like and use this since 2009).
YUI Compressor