Currently I have my Django project set up so that the JS variables that depend on template variables are first defined under a script tag in the HTML template. Then, when the template runs, the JS variable gets created and added to the Javascript context, causing other external JS scripts to be able to use said variable without declaring it anywhere.
Html template:
<body>
content
</body>
<script>
const var = "{{ my_template_var }}";
</script>
<script type="module" src="{% url 'app_name/index.js' %}"></script>
JS Script (app_name/index.js)
console.log(var) // Prints value of "my_template_var" in the form of a string
However, I dont like the fact that the var variable in the JS script just "magically" has the value defined in the template when it runs (there's no actual statement saying const var = something). Is there any way that I can include a declaration in my JS file (not a comment) so that its a bit clearer to the rest of the developers from where the variable is coming from?
(NOTE: I'm mainly doing this as well because when using Typescript, those variables appear as undefined, even though they are receiving a value from somewhere)
The best way that I found I could do this is by using the declare statement on the Typescript file. So variables that received their value from another script tag:
<!-- Index.html -->
<script>
variable = 5
</script>
<script type="text/javascript" src="script.js"></script>
I can just do:
// script.ts that compiles into script.js
declare const variable: type;
Related
Where the global JS variable should be declared in Prestashop 1.6, so every .tpl would have access to it?
global.js doesn't make it.
And the code like this, placed in .tpl:
<script type="text/javascript">
// <![CDATA[
var test = "test";
//]]>
</script>
works for the exact .tpl only
Try this (in Hook methods like hookDisplayHeader or in your front controllers):
Media::addJsDef([
'Modal' => true,
'AjaxNum' => 5
]);
In other case, you can put your js files in "themes\YOUR-THEME\js\autoload" directory. This only affects the front office
Let's say the variable is called 'myvar'. I can access its value in twig using {{ myvar }}.
I can also use it inside javascript code, if inside the same twig page, by doing
<script>
//some javascript code
myJSVar = {{ myvar }};
//other javascript code
</script>
The question is: if I import a js (e.g. I have a main.js where I put all the common js stuff) is there a way do the same?
I've read about a solution for CSS (Symfony2: Use Twig variable in stylesheet) which is a bit convoluted, and another point of reference might be here (Using Twig as an Assetic filter for JavaScript in Symfony2). Any other options?
In practice what I need is passing a global variable, something that you'd find in config.yml. It's a path basically, which is different in production and in development.
Thank you!
Perhaps you could do something like:
<div id="somediv" data-var="{{ myvar }}"></div>.
And then on you main.js:
var myJSVar = $('#somediv').data('var');
I have a EE template in which I use a EE global variable {global_var}.
In the same template I have a js script.
//opening js script tag
{global_var}
//closing js script tag
Inside this script I can read and use {global_var}.
But if I move the script code to a JS template and reference to it like this
<script type="text/javascript" src='{path="js/contact_form"}'></script>
the {global_var} is no more available, why?
More info: {global_var} is a user defined variable that I added to index.php
$assign_to_config['global_vars'] = array(
"base_url" => "http://www.example.com/",
"global_var" => "hello"
);
Is there a way to read EE global variables in the referenced js file?
Try to add quotation mark to the global variable when you're outputting it to the Js.
"{global_var}"
Another reason why it may not work can be either:
The variable doesn't exist in the the DB So you might need to use syncSnippert to synchronize between the two.
The template for the variable doesn't exist so you might need to create it.
I have 2 .js files in the html document like this:
<script type="text/javascript" src="js/1.js"></script>
<script type="text/javascript" src="js/2.js"></script>
That document also have an iframe. I have 2 .js in the iframe aswell:
<script type="text/javascript" src="js/2.js"></script>
<script type="text/javascript" src="js/3.js"></script>
So 2.js is in both documents. My plan was to make that to connect them.
I can not put 3.js in both documents because it will mess up stuff.
1.js got a variable. I want to use that variable in 3.js. But i can't figure out how to pass a variable from 1.js to 3.js.
Is this even possible?
*The variable is declared in 1.js.
You can not "pass" variables through file references. You would need to add code to pass data from the parent frame to the iframe.
If the variable is global it is
//from the iframe
var theVariable = window.parent.yourVaraibleName;
//from the parent
var theVariable = document.getElementById("iframeId").contentWindow.yourVaraibleName;
Why not using jQuery cookies to pass the variables? Even within the multiple pages. Once you pass the variable you can destroy the cookie.
jus create a global variable, don't use var keyword
myGlobal = "probably not a good idea but still";
You cannot pass variables from one js file to the other
Javascript variables are stateless so they wont be retained.
If you are using .Net then you can make use of Session variables to solve this purpose.
If you use MVC you can go for viewbag or viewdata.
If its a must then declare some variable in the homepage, then assign the value to be passed to the variable in home page and then call the function in 3.js passing this parameter.
Not sure if this is possible or even if I should do it, but I think it's quite interesting.
I have a javascript file which I'm referencing in a flat HTML page. I'd like to pass in a parameter or two via the path to the script. Like this;
<script src="/scripts/myJavascriptFile.js?config1=true" type="text/javascript"></script>
Not really sure if it can work but it would make my solution a little easier for others to take my script and implement (arguable).
Cheers,
Mike
I don't think that passing in variables via the src attribute is possible out of the box without some extra coding on your part (there is an article here if you are interested!). You could do the following though, which should provide the same functionality as you are looking for:
Define your "config" variables in a single script block on your HTML page:
<script type="text/javascript">
var config1 = true;
</script>
Reference your external JS file in a second script block:
<script src="/scripts/myJavascriptFile.js" type="text/javascript"></script>
Add this code to your external JS file to reference the "local" variable in your HTML:
var conf1 = window.config1;
if (conf1) {
// Do stuff
}
This is a variation on Matt's answer. I have a similar case where I need a jQuery file to use a value that is generated in the HTML (by Razor in this case). I write the value to a meta tag, generated as it is from the controller:
<meta name="sessionId" content="#ViewBag.SessionId">
and then read it in the jQuery file:
var sessionId = $("meta[name=sessionId]").attr("content");
It's not quite the same as passing it in by querystring, but useful if that information is considered "meta-information" of the HTML page.