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?
Related
I ran next build followed by next start. It's still rendering with many JS files at once instead of a singular entrypoint.
Is there something I'm missing here? The docs make it seem as though this is all that's needed
The files you see are NextJS code splitting into functional and framework code , you can read more about it here
https://nextjs.org/blog/next-9-2#improved-code-splitting-strategy
I see a comment about a <script file in your head, Next will leave this alone because its just a tag being printed - if you need your own outside JS file to be served by Next, place it in the public directory.
I'm trying to get both Typescript controllers and the connected html files from a IIS 7 database, but the code has been minimized and divided into .js and .js.min files.
Using chrome source, I've managed to find and use the reconstructed .ts files, but when I try to open the corresponding html files in chrome, they show up blank.
I have found the html code I need in a templates.js file, but it's not formatted as html, but rather in a compressed form;
$templateCache.put(" loooong line of html looking code.....");
example of compressed html found in templates.js
$templateCache.put("/Project.Dashboards.Instruments/Instruments/XYPlot/xYPlotEdit.html","<form role=form class=xyPlot-edit><div class=form-group><div class=row><div class=col-sm-4><div class=dashboards-propertypanel-navigation-container><abn-tree icon-leaf=icon-leaf icon-expand=\"glyphicon glyphicon-chevron-down\" icon-collapse=\"glyphicon glyphicon-chevron-up\" expand-level=1 tree-data=vm.configurationNodes tree-control=vm.tree data-on-select=vm.open(branch)></abn-tree></div>..... etc
Is there any way to reconstruct this html code to a usable form again?
I'm not very experienced in source mapping in javascript yet, if that wasn't abundantly clear.
Thanks.
Ok! I think I've got the file now. Like N.J.Dawson said, all i needed to do was use an online unminifyer to show the template.js content.
I used http://unminify.com/ for anyone else stumbling over this thread.
Haven't found out if the html works with my own code yet, but if it doesn't I'm pretty sure it's my fault, not the html code.
Thanks for the answers!
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.
I'm looking for some advice on the best way to hold my JavaScript (jQuery) functions.
I am developing in MVC/razor and therefore have a layout page. I include my jQuery library and an external JavaScript file in here so it's available in every single page.
This is working well, but I am now becoming very aware of the fact that I am adding almost 300 lines of JS to EVERY page, where maybe half of that is used in any one of these pages.
One function is not in the external file and instead sits inside the HTML because I need to use variables set in my razor code.
I have a couple of questions around this arrangement:
Is placing JS inside the HTML generally acceptable when variables set using razor are used? There does not appear to be a clean way of passing a variable into an external js file
Should I split my functions down in to individual JS files and just include what is needed for each page in the site?
If I were to split them into multiple files, how would that work with jQuery's (document).ready ? Do I need to use that if all the JavaScript I am including is to be used?
I'm sure this will more a matter of opinion than a black and white answer, but I want to consider all my options before moving on. Even though it works fine as is, I can't help but feel there is a better/cleaner way.
Remember once a user lands on your homepage and loads the javascript file it will be cached in their browser so subsequent pages will not download the Javascript again.
I would definitely keep the js separate, you could have a snippet on each page that initialise the JS that that particurlar view needs. Put something like the below in the views that need to run JS
$(document).ready(function() {
mysite.mypage();
});
Then the function mysite.mypage() can be defined in the external JS file.
300 lines isnt the end of the world, I would say its probably too early to be worryign about optimisation.
You could always look at minifying that JS file to decrease the size. A quick and easy way to do this is here:
http://www.minifyjavascript.com/
Have you ever heard of require.js? http://requirejs.org/ I find it really useful.
It's a module loader so you are able to split all of your JS code into individual files and load only the ones you need on each page.
I don't know about passing a variable to an external JS file, I don't think its possible / the 'right' way.
You can make each external JS file into a function that accepts and returns parameters. Then in the page you need to use it:
- include the file dependancy
- call the function
Thats what I do, seems like your 2nd suggestion.
for the $(document.ready) question its really up to you. You don't have to use it but its useful for some things , check out this overview:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
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.