How to use variables from a php file in a js file? - javascript

I have the following file structure:
Now I want to use the variables from the dropdown menu's (that are in the get_attributes.php, get_fields.php and in the get_tables.php) in my main.js and in getData.php . Now the question is how can use a variable from another .php file in a .js file?

You can't directly use PHP variables from JS scripts.
Dynamic access
If you want get variables dynamically you can use AJAX (see jQuery AJAX doc ).
Static access
If you want to access PHP variables when your JS app start you can put PHP variables in the DOM by using this syntax :
<input type="hidden" id="php_name" value="<?=$name?>" />
And use jQuery to get it :
$('#php_name').val();
I hope it will help.

Related

How to pass data from nodejs to inside html script tags

I'm using expressjs as a server on 8000 port. I want to send a string value from expressjs file to html script tags and use this string value in script tags.
name variable is coming as a empty string now.
How can i console.log name variable's value?
static-pages-server.js:
app.get('/index', function(req, res) {
var name = "hello";
res.render(__dirname + "/static-pages/journey-analize-report/index.html", {name:name});
});
index.html:
<script type="text/javascript">
console.log(name);
</script>
Edit : I used ejs and now problem is how should i describe name attribute in script tags? Below code is giving syntax error.
<script type="text/javascript">
console.log(<%=name%>);
</script>
Express.js itself is a backend server. If you would like to have dynamic HTML files you need to use templates engines.
Please follow this document -> https://expressjs.com/en/guide/using-template-engines.html
Eventually, you will realize you will need a frontend framework to write your code faster with good quality. So also recommend you to take a look at some of the frameworks like React, Vue.js. If you need Single Page Applications you only use express.js to provide data not to render HTML. If you need Server-side rendering it is good to investigate Next.js, Nuxt.js.
You cant directly inject variables into a html file in nodejs . That is why you have templating engines in express. Check out ejs.
It would allow you to pass data directly from your routes into the page you are rendering.
Local variables sent to a view via the locals parameter using the res.render() method aren't directly accessible. Instead you need to refer to those using it's variable name wrapped inside double curly brackets. So if you want to use it inside a JavaScript function, you need declare a local variable and give it the content of your name local.
Simply modify your index.html like this:
<script type="text/javascript">
let name = "{{name}}";
console.log(name);
</script>
here is the answer How do I use HTML as the view engine in Express?
what you will need is a view engine package in your app. there are many view engines currently available.
then set that view engine in express app. Trigger the view render via a call from your route’s response like you have done above.
Then in your view render the html output using the view variables and if these variables are outputted into html you can use them in your in browser JavaScript. You can also call a service in your html sending the dynamic data as well.
check out esj or pug (ps pug is my personal favourite )

Spring message in javascript file

I'm trying spring:message tag to my javascript file, but nothing is displayed. In jsp file and tag spring:message works fine, but if I put js code to js file it's not working.
In js file I use:
password: '<spring:message code="account.enterPassword" />'
Sorry for my bad English.
Spring tags renders on the server side and javascript works in client after server side process is complete. But you can put an <script></script> tag inside your jsp, define your variable on it, and then access your global javascript variable in your external js file:
jsp:
<script>
var password: '<spring:message code="account.enterPassword" />'
//any other variables you want to use
</script>
Now, you can access the password variable inside any other js file.
Note, this script tag must be at top of your js files that you want to variables on it. Also, be careful when picking a name for global variables, because, local variables can override global variables in case of common name.
It is not possible for javascript to have access to a spring tag. spring:message is processed server-side before the page is sent to the client, javascript/jQuery is processed later on the client side.
As a workaround, put the message value in a hidden input on your jsp page. Then get its value in your javascript. In your case:
<c:set var="val"><spring:message code="account.enterPassword"/></c:set>
<input id="enterPasswordId" type="hidden" value="${val}"/>
In your javascript (using jquery) you can then use it as follows:
$('#enterPasswordId').val() //jquery
document.getElementById("enterPasswordId"); //javascript

Js Function not defined when I use php include

I used to write JS inline in my footer but since it's getting too much I want to write it in an external file and include the file in the footer then.
I'm currently using
<?php include "https://example.com/myjs.php"; ?>
in the footer.
In that Php file which is mainly js with a few php expressions, I'm defining all the functions first and afterwards I'm calling some of them functions "onload" with
jQuery(document).ready(function() {
// functions....
});
I've put everything inside
<script></script>
The thing is that I get an error showing the functions I'm calling arent defined. However, when I just paste the code in the footer template inside
<script> </script>
tags it works fine.
I'm assuming that the error is with the tags and inlcude...
What am I doing wrong?
EDIT:
I am using WP functions which are based on logged in user id and page id. Do these might cause the errors?
I'm using wordpress with jQuery.
Since it's a remote URL, all php scripts will be executed before inclusion into your file. So how about
echo file_get_contents("https://example.com/myjs.php");
I could solve the problem:
I defined the php vars in JS before the script within the footer.php. Credits to: Access PHP var from external javascript file
Then I just replaced the php vars wih the js vars and included it with html as script.
Works like a charm now,
thanks anyway for all the help!

how do i access server data in separate js file

aspx file
string firsrName="jafer";
myscript.js
GetMyName();
function GetMyName() {
alert('<%=firstName%>');
}
I am not getting my value
The line alert('<%=firstName%>'); use the Web Form Page syntax. It is actually not possible to get the value like this because this syntax cannot be used in external JS files.
The simpliest (but not cleanest) method is to write the JS method into the layout file or another aspx file.
Read How to get asp.net client id at external javascript file
You could make a global variable in your aspx page and access it in your js using window.objectName

How to access a session variable in a .js file in CakePHP

In my CakePHP application I am creating a session variable in some controller, which I need to access in a ".js" file. Is there any possible way to do this?
I would suggest passing them as parameters like this -
<a onclick="some_function('<?php echo $_SESSION['var'] ?>')">Click</a>
and have the javascript function some_function() process it instead of assigning them inline. This way you can have the javascript file free from server side code. This is the cleanest way.
I too feel that because session variables are server side, they should not be handled directly in client side language through inline code.
You need to dynamically generate your JS file so that it contains the value you want. You can set up your server to parse .js files through PHP, or you can just name the JS file .php:
var myVar = '<?php echo addslashes($_SESSION['myVar']); ?>';

Categories

Resources