I wanna know whether i can access external javascript files through jinja?
It's working well with html files or with js embedded in html files but not when javascript file is external.
code:
#app.route('/')
def default():
return render_template('main.html', var1 = 1, var2 = 2)
main.html code:
<html>
<body>
<p>The first value is {{var1}}</p>
<script src="main.js"></script>
</body>
</html>
main.js file:
window.onload=function(){
console.log('{{var2}}');
};
now the jinja code in main.js is not working
Maybe it's not possible to use it in external js?
If someone can help, please reply to this thread.
You need to understand how Jinja works. When you run the commmand
return render_template('main.html', var1 = 1, var2 = 2), it gets processed in the following way:
The Flask server opens the main.html template
Renders/replaces all the defined Jinja variables i.e. the context into the template
Sends the rendered HTML to the client.
Hence the variables are not loaded into the {{ var }} place-holders on the client side but at the server side.
Therefore to achieve what you are trying to do you could do something as follows:
In main.html code:
<html>
<body>
<p>The first value is {{var1}}</p>
<script>var var2 = {{var2}};
<script src="main.js"></script>
</body>
</html>
In main.js code:
window.onload=function(){
console.log(var2);
};
Note: We have added the script inside HTML code before calling main.js which the dependent script.
Let me know if this solves your issue and you have understood the explanation.
TLDR; Pass your flask variable to a global JS variable from your HTML file.
I don't think that it's possible to access external JavaScript files directly from Flask. But you can use this hack, it works with many templating languages (Jinja, EJS...)
main.py:
#app.route('/')
def default():
return render_template('main.html', var1 = 1, var2 = 2)
main.html
<html>
<body>
<p>The first value is {{var1}}</p>
<!-- Insert this <script/> tag before loading you main.js -->
<script type="text/javascript"> window.myVar1 = "{{var1}}" </script>
<script src="main.js"></script>
</body>
</html>
main.js
window.onload=function(){
// Now you can access to myVar1 directly
console.log(myVar1);
};
Related
The scenario for my frontend javascript application is as following:
GET via URL an html/javascript file
execute it
Current I am trying the following frontend approach:
const myElement = document.createElement('myElement');
myElement.setAttribute('src', 'https://.../file.html');
document.body.appendChild(myElement);
And file.html looks like:
<html>
<head>
<script language="Javascript">
function doSomething() { }
</script>
</head>
<body onload="doSomething()"></body>
</html>
But nothing is happening.
Am I wrong to expect that on document.body.appendChild() , the file will be downloaded and executed as if the URL was opened from the browser?
I have html file which has 3 script tags. I want to put these script tags in my vue.js file
my html file
<html>
<body>
<script type="text/javascript">
mxBasePath = "../editors/pure";
</script>
<script type="text/javascript" src="../editors/pure/js/mxClient.js"></script>
<script src="../editors/dist/main.js"></script>
</body>
</html>
So i want to add the 3 script tags seen in the above html to my vue js file.So for this i have
tried to create the script tags manually in the mounted function of the vue file as seen below-
my vue js file
<template>
<div id="geApp">
</div>
</template>
<script>
const client = '../editors/pure/js/mxClient.js'
const mains = '../editors/dist/main.js'
mounted () {
var a = document.body.getElementsById("geApp")
let basePath = document.createElement('script')
basePath.innerText = 'mxBasePath = "../editors/pure"'
basePath.async = true
a.appendChild(basePath)
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', './pure/js/mxClient.js')
recaptchaScript.async = true
a.appendChild(recaptchaScript)
let processes = document.createElement('script')
processes.setAttribute('src','./dist/main.js')
processes.async = true
a.appendChild(processes)
},
.....
.....
</script>
Unfortunately iam getting an error saying http://localhost/editors/dist/main.js net::ERR_ABORTED 404 (Not Found) from main.js file.So how do i load these scripts correctly in my vue js file?
If files that you are trying to add are some libraries/plugins that doesn't support import or require for some reason only then you try to do the way you are adding the file to DOM:
Anyhow, If you are sure and don't care about webpack processing your .js files in anyways, then keep your files in ./public/assets/js/ folder, then just do:
<script src="./assets/js/your-file.js"></script>
Check this "How to add external JS scripts to VueJS Components" or search it in stackoverflow search box. Hope you will get the answer.
I have a js file with the following script
alert("{{ route('contacts.show',':contactid:') }}");
I used the .js file and include it in my blade view
<script type="text/javascript" src={{ asset('admin/js/contact/test.js') }}></script>
But if I write the script in the blade view. It does evaluate the codes inside the curly brackets.
The JS file is not processed by PHP, so the Laravel blade templates would not be in effect in the JS file. What you should do, is define the route in a variable in JS ON THE PHP PAGE by injecting the route value into a JS variable. Then you can access that variable in your JS file.
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<script>
// Inject the PHP route value into a JS variable.
window.route = '<?php echo route("contacts.show",":contactid:"); ?>';
// You can also use 'let route = ...' to declare the variable.
</script>
<script src="./main.js"></script>
</body>
</html>
main.js:
alert(route);
Curly brackets are executed only when inside a blade file. If you need to keep the JS external and not merge the code into a blade template, you could define a JS variable in blade, in the global JS scope, load the external JS after it and then use that variable in your js.
in blade
<script>
var contactsRoute = ""{{ route('contacts.show',':contactid:') }}"";
</script>
<script type="text/javascript" src={{ asset('admin/js/contact/test.js') }}></script>
In the external js
alert(contactsRoute);
I'm trying to understand how to modularize the Backbone ToDo tutorial
Originally everything is inside the same file, but if I try to extract to another file:
var TodoView = Backbone.View.extend({
...
});
then this throws an error:
var view = new TodoView({model: todo});
**Uncaught TypeError: undefined is not a function**
It's probably due to a scope issue, but I don't know how to create a reference inside the $(function() so I can create this new object inside the main function.
Assuming that your first code part is TodoView.js,
and your second code part is app.js.
Write your html file like this,
<html>
<head>
<script type="text/javascript" src="js/TodoView.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
// your dom
</body>
</html>
(Edited, at 2015-07-27)
sorry for my late reply.
how about this?
<html>
<head></head>
<body>
<!-- your dom -->
<script type="text/javascript" src="js/TodoView.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
In many case, most javascript codes are appended to just before </body>, so that javascript can use your dom!
You can use something like require.js to load your external files and manage dependancies.
Ok, the solution was to move the script references to the end of the body instead of inside the head tags.
I think that the reason is that TodoView.js is making use of templates that were defined in the body, and since the js file was being loaded before the body, the templates were not yet available.
I have in my application layout file an external javascript file witch has several lines of code and at the end runs a function like BooManager.init() no big deal...
the problem is, it is not running the inside code on this javascript file.
this is how i use it:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "iphone4s, apple";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<%= javascript_include_tag "http://widgets.boo-box.com/javascripts/embed.js" %>
but it didn`t do anything it was suposed to do...
i`ve tried in simple html file and it works... what am i doing wrong?
NOTE:
the default way in html is this:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "keywords, between, commas";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
-- EDIT --
the result generated by rails:
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
It's not evaluating the script when loading using the <%= method. I'm not familiar with that syntax, but from the effect, that's what it sounds like. It's treating the script as html rather than code.
jQuery has a script load function that will get a script dynamically from a URL and then eval() it to execute it.
UPDATED WITH SAMPLE CODE
Add jQuery to your app:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Then use it to load your script:
$.getScript('http://widgets.boo-box.com/javascripts/embed.js');
UPDATE NUMBER 2
I was able to duplicate the problem in this fiddle: http://jsfiddle.net/7x2zT/4/
If what you are trying to accomplish is to get your parameters activated before the script shows the widget - the default one looks like a sidebar, whereas your parameters make it more of a banner, then just make sure you put your parameters above the <script src stuff.
If you must be able to load dynamically, then you're going to have to figure out where the bug lies in the embed code, or if there's some other activation method. That site's documentation doesn't seem to be in English, so I can't help with that.