ExpressionEngine: referencing js file vs script in template - javascript

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.

Related

Django Template Variables to Javascript File

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;

Global JS variable in Prestashop 1.6

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

Sharing variable within different javascript file at client side

I was actually going through this link. which explains how we can share global variable across multiple js. but the point is what need to be done if I am getting some variable into one js and need to pass to another one mentioned in same document after the 1st one.
approach which followed was:
Script 1 <script type="text/javascript" src="js/client.js"></script>
body added some hidden input with id myHiddenId, where values are set using client.js
Script 2 <script type="text/javascript" src="js/anotherJS.js"></script>
inside script 2 I am simply using $("#myHiddenId").val(); and using for my purpose.
I want to know whether I am following correct approach, because that hidden field may have some data which client should not get aware of. is there any other way through which I can pass the variable values across the js files ? Since I am at beginner level hence digging up some resources/books but still no luck.
If the client should not be aware of the data then you should not be using client side JavaScript. Any JavaScript executed in the browser can be debugged and viewed by the user.
You should always handle sensitive data on the server side.
Saving the variable in the JavaScript file or in the hidden element makes little difference.
Regarding using variables across files then you should be able to use any variables declared in Script 1 in Script 2 provided they are declared in the root scope and that Script 1 appears before Script 2 in the DOM.
<script> // Script 1
var root_scope = 'This variable is declared at root';
function some_function() {
// Variables not defined at root are subject to the scope they are in
var non_root = 'This is not at root';
}
</script>
<script> // Script 2
// Use the variable declared in Script 1:
alert(root_scope); // This variable is declared at root
// Note: declaring at root is the same as assigning to window
alert(window.root_scope); // This variable is declared at root
alert(typeof non_root); // undefined
</script>

Pass variables between different .js files; one is inside an iframe

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.

how to set a variable for external javascript file after the js file is defined?

I'm using jQuery Mobile Ajax navigation feature, And I need to change a variable that is defined inside external js file, So I can't put my definition before I load that js file...
So, How to change value of a variable for external javascript file after the js file is defined?
(That external js file includes events)
So this question is not duplicate of that question.
Update
My JS File contains events, something like this: $(document).on('mousemove','#main',function() { /*something*/} );
And I need that variable. Is it possible to pass variable to that?
I have tried simply changing that variable i = 5;, but I'm getting undefined error.
Update 2
The external JS file is something for some pages that are almost same, but a little different, just one or two parameters.
And I simply want to pass the parameters to that JS file. Is it possible? How?
Let's assume http://www.example.com/external.js defines variable foo, which you want to change.
<script src="http://www.example.com/external.js"></script>
<script type="text/javascript">
foo = "my new value";
</script>
This assumes that external.js defined foo in the global scope. If it's defined in an anonymous function or similar, you won't be able to change the value.
Depending on what you're doing, you can just set the variable and it'll work. Example:
// JS file
blah = "Hello";
function doSomething() {
alert(blah);
}
// HTML file
blah = "I'm a fish";
doSomething(); // alerts "I'm a fish";
Alternatively, pass the variable as an argument to relevant functions instead of using global variables.

Categories