How do I pass the JSP variable to javascript function in external file?
I have the following set up
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery/ui/jquery-ui.js"></script>
<script type="text/javascript" src="js/date/moment.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" charset="utf-8" src="js/d3.js"></script>
<script type="text/javascript" src="js/myScript.js" ></script>
<link href="js/jquery/ui/jquery-ui.css" rel="stylesheet" />
<link href="js/jquery/ui/jquery-ui.theme.css" rel="stylesheet" />
<link href="css/myCSS.css" rel="stylesheet" />
<title>My Title</title>
</head>
<body>
<div id="myDIV">
<c:set var="myVar" value="${myInVar}" />
<script>runMyScript();</script>
</div>
</body>
</html>
Now inside my javascript, I try to access the jsp variable but neither of the two ways I found online works:
var javaScriptVar = '${myVar}';
var javaScriptVar2 = "<%=myVar%>";
Instead of the actual value of the jsp variables, I get the strings.
I read in this answer: Passing variable from JSP to Javascript which suggest to declare the variables before I include the javascript file, but I can't figure out how to do that.
If I put them in the header, they are not resolved because they come from a backend request.
If I don't include the script in the header and add src attribute to the script section before making the call, the method is never executed.
Totally confused here.
Your JavaScript is inside a .js file. The server will (exceptional circumstances aside) treat that as a static file. It will just serve it up to the client without processing.
If you want to run JSP code (such as <%=myVar%>) then put it in a JSP file.
Related
I have a PHP based website. I need to add a JavaScript code in to the head. I would like to include the code in to a small JavaScript file and call it from within PHP page. The code starts with <script type="text/javascript"> and ends with </script>. So I tried to save the code in to code.js and in the head of my website's PHP code I put <script type="text/javascript" src="code.js" /> but it didn't work. I am wondering what am I doing wrong?
The content of the PHP page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following JavaScript code instead of the <!--head-->:
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the PHP code I inserted <script type="text/javascript" src="code.js" />
The problem is that you have inserted the tag script as a non-templated tag, here is the right form:
<script type="text/javascript" src="code.js"></script>
Obviously, if the .js is located in the right place, it will be loaded.
You haven't seen the tag in your code probably because you've inspected the HTML with an HTML inspector, but that tool is not always capable to show you malformed tags. For be sure to see the right HTML result, you must view the souce code (usually, right click on the web page via browser and "show source code" option is there).
The content of the php page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>title of the page</title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<!--head-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<!----start-wrap---->
<div class="wrap">
<!----start-Header---->
<!----End-Logo---->
<!--body-top-->
code of the huge page
<!----End-wrap---->
</body>
</html>
I need to insert the following javascript code instead of the <!--head--> :
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
So what I did is placed the code
<script type="text/javascript">
var _prvar=_prvar||new Object();
(function(pa,s){if(document.getElementById('125456'))return false;
pa=document.createElement('script');pa.type='text/javascript';pa.async=true;pa.id='125456';pa.src='//abcdefg.com/pub.js';
s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(pa,s);})();
</script>
in to a code.js and instead of the <!--head-->in the php code I inserted <script type="text/javascript" src="code.js" />
I would need help on attaching my .js document to my html document so that jQuery works on it, at the moment only normal JS is working.
This is the html document header (called "3i.html"):
<!PROCTYPE <!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
<script type="text/javascript" src="3i.js"></script>
</head>
The javascript file is called "3i.js".
Javascript commands like "alert" or "prompt" work fine, I just can't find a way to make jQuery code work.
Help is very much appreciated
Include the jQuery library and your .js file just before closing the body.
<!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="3i.js"></script>
</body>
</html>
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
How to fix '$' was used before it was defined in both jslint and jshint using coding?
(2 answers)
Closed 8 years ago.
This is my first time trying to use JQuery and I was trying to add an event when the document is ready, but every time it says:
"$ was used before defined".
I don't know how to solve it. I tried different solutions on the internet but couldn't find any. Don't really know what I am doing wrong.
I referenced the HTML file to the js file like this
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<script type="text/javascript" src="script.js"></script>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
and this is my script
$(document).ready(function () {
"use strict";
$('div').mouseenter(function () {
$(this).animate({
height: '+=10px'
});
});
});
Reference the JQuery library in your page, like this
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Include this tag above the script tag of your js file
Add JQuery library (http://jquery.com/)
Adding a event on every div in your app - rethink this. Add a class or something, and add it to a single element container, or a body, but don't add it to most common element.
You should organize your HTML DOM like that :
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</body>
1.You should call Jquery library before calling your project JS file's.
The problem here is that you are using jQuery without actually including that library of code in your HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with Javascript</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
Just to clarify, jQuery is a library that acts on top of JavaScript so you would need to include that library above your own scripts that use it.
NOTE: It is best practice to include your scripts just before your closing body tags.
I'm trying this effect in my .html file, but don't know how to call javascript ?
I've tried with but that doesn't do anything.
Here is the Fiddle.
This is the HTML code:
<!doctype html>
<html>
<head>
<title> Tikitas </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta charset = "UTF-8" />
</head>
<body>
<div class='header'>Header</div>
<div class='content'></div>
<script type="text/javascript" src="script.js">
</body>
</html>
Close your script tag.
This:
<script type="text/javascript" src="script.js">
Should be this:
<script type="text/javascript" src="script.js"></script>
In the header part of your HTML structure, you'll need to put:
<script src=""
in the "" you will put the path to your JavaScript file.
If your JavaScript file is in the same folder as your HTML file, you'll just need to put the name of the file + the extension in the src="" part.
And after close it with the usual close tag </script>.
At the end it's suppose to give you something like that <script src="path"></script>.
Okay I have a js file in htdocs and when I include it in my php page it doesn't work however when I load it from online it works I don't know what is wrong with it.
I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> test</title>
</head>
I am putting the js file at the bottom of the page and this doesn't work,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/boostrap.js"></script>
<script type="text/javascript" src="js/wpts_slider_multiple.js"></script>
This works,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jqueryslidershock.com/wp-content/plugins/tsslider/js/boostrap.js"></script>
<script type="text/javascript" src="http://www.jqueryslidershock.com/wp-content/plugins/tsslider/js/wpts_slider_multiple.js"></script>
try this: src="/js/boostrap.js"> instead of src="js/boostrap.js">
the / is your root path
you can use this absolute path /js/boostrap.js in php, js, css files, and it works fine.
<script type="text/javascript" src="/js/boostrap.js"></script>
<script type="text/javascript" src="/js/wpts_slider_multiple.js"></script>
You should give full path of your jquery files like
http://example.com/js/boostrap.js
Code
<script src="http://example.com/js/boostrap.js"></script>
<script src="http://example.com/js/wpts_slider_multiple.js"></script>
Either of the following is happening.
Incorrect path - Please check the file paths.
No Read permission for the JS files - If you are sure that the path for the local JS files are correct, check their read permissions.
File does not exist - Simple reason as it states. I believe that it's not the case.
Let me know what you found.
try giving the paths like
<script type="text/javascript" src="/js/boostrap.js"></script>
<script type="text/javascript" src="/js/wpts_slider_multiple.js"></script>
src='/js/boostrap.js'
Assuming your root is http://localhost then the above link should always resolve to http://localhost/ProjectName/js/boostrap.js whether it's called from
http://localhost/ProjectName/index.php or http://localhost/ProjectName/subdir/index.php
Make sure the js files are present within your folder structures
Always try to give relative paths to your files so that they can be easily found.