I am trying to fill a Javascript array inside a javascript functions using JSTL. My purpose is to make the JQuery auto complete feature work with my web application which is developed using Servlets and jsp. The original link to the JQuery auto completionis here - https://jqueryui.com/autocomplete/
Below is my code
index.jsp
<%#taglib prefix="c" uri= "http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
var availableTags=[] ;
<c:forEach var="list" items="${requestScope['list']}">
availableTags.push('${list.drug_name}');
</c:forEach>
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<form action="Combo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input name="selectBox" id="tags">
<input type="submit"/>
</div>
</form>
</body>
</html>
I am calling the index.jsp from a servlet, like below.
List<Names> list=names.readNames(file);
request.setAttribute("list", list);
RequestDispatcher dispatcher=request.getRequestDispatcher("WEB-INF/jsp/Index.jsp");
dispatcher.forward(request, response);
Here the List<Names> list=names.readNames(file); returns a bean of Names. Names is just a simple class with setters and getters fer one variable name which is type String.
However I was not able to achieve this, because the autofilling is not working in this way. Most probably because there is an error in inserting data to the array. what has gone wrong here?
Open the developer tools (F12) and go to console.
There will be some errors there.
use the var name as item instead of list
<c:forEach var="item" items="${requestScope['list']}">
availableTags.push('${item.drug_name}');
</c:forEach>
Related
I'm very new to website building and I'm trying to build validation into a form that employees will submit. I want to prevent them selecting dates in the future for a particular field. None of the suggested solutions I've read in the other posts have worked for me so far. Believe me I've been at this a longer that I would like to admit trying everything I could find. I would greatly appreciate some help in figuring out what I am doing wrong. Here are the sections of my code that will hopefully be enough to see what is going on.
<head>
<script>
$(document).ready(function(){
$(function(){
$("#purchasedate").datepicker({
maxDate: '0',
format: 'mm-dd-yyyy'
});
});
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/
jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<section>
<form method="post" action="#">
<p>Purchase Date</p>
<input class="purchasedate"
type="date"
name="purchaseDate"
value=""
/>
</form>
</section>
<body>
I've tried using maxDate: new Date(). I've tried it without the ready function or the function enclosing the datepicker. When previewing the page the calendar pops up to select a date but future dates are still available. Thanks for the help.
Can you try something like this :
You have to replace your script tag in the header by this one :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Data sharemedia</title>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
<section>
<form method="post" action="#">
<p>Purchase Date</p>
<input type="text" id="datepicker">
</form>
</section>
</body>
<script>
$(document).ready(function() {
$( "#datepicker" ).datepicker({ maxDate: new Date });
});
</script>
</html>
Firstly, change the order of the scripts. Call the jquery, and any other plugins that uses this jquery after this one. Later, add your scripts. That will save you headaches.
Secondly, remove the $(function(){ line, as it's doing nothing right now. And it should be fine.
I got the jsfiddle of it right here: https://jsfiddle.net/tuk4pob3/
I just copied your code with the changes I told you and I can only select dates from past until the present day. The only thing I changed is the type of the input.
I'm newbie with jQuery and I my facing the following problem.
I'm trying to use a mask, but the script doesn't work. At all.
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
</script>
</head>
<body>
<input type="text" id="date">
<input type="text" id="phone">
<input type="text" id="tin">
<input type="text" id="ssn">
</body>
</html>
What's wrong?
I'm using the plugin from this site: http://digitalbush.com/projects/masked-input-plugin/
I checked the code. And I used this latest jQuery Mask Plugin. It works.
Here are some examples , they might help.
Only change I did is
<script src="jquery.mask.min.js" type="text/javascript"></script>
You may have put your files in wrong location.
You can check those using the built in inspect element functionality (right click and you can see it) in Google chrome. If the console indicate missing .js files you can correct them.
There are ways for other browser to check those also.
It looks like maskedinput.js either not be found or there is something wrong in this script
change from
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
to
<script src="http://digitalbush.com/wp-content/uploads/2013/01/jquery.maskedinput-1.3.1.min_.js" type="text/javascript"></script>
I need to use Handlebars inside of a jsp page. I have handlebars-v1.3.0.js in my js folder and used the following code snippet to include that js file into my jsp page.
code:
<script type="text/javascript" src="./js/handlebars-v1.3.0.js"></script>
I tried <script type="text/javascript" src="js/handlebars-v1.3.0.js"></script> also. But no luck.
But when the page is loaded I am getting an error "Hanldebars not defined" in my browser console. Please suggest what am I doing wrong.The whole thing is working if I use handlebars inside of an html page.
Folder structure is as shown below.
-WebContent
--Home.jsp
-js
--handlebars-v1.3.0.js
I would like to know two things.
1.) what is the right way to give the js file path inside the jsp file ?
2.) Does jsp support handlebars ?
'components' is an array object which is defined in another js.
My source code(Home.jsp) :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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">
<title>My first JSP</title>
<script type="text/javascript" src="./js/handlebars-v1.3.0.js"></script>
<script type="text/javascript">
Handlebars.registerHelper('eachByIdx', function(menuData, options) {
// My Logic
});
var menuSource = document.getElementById("myTemplate").innerHTML;
var menuTemplate = Handlebars.compile(menuSource);
document.getElementById("div1").innerHTML = menuTemplate(menuData);
</script>
</head>
<body>
<form action="Hello" method="post">
<input type="text" value="ajith" />
<script id="myTemplate" type="text/x-handlebars-template">
<table>
{{#eachByIdx components}}
// My Logic here
{{/eachByIdx}}
<tr>
<td>
Add New
</td>
</tr>
</table>
</script>
</form>
</body>
</html>
Don't use a relative path to load JS files from within JSP files, since JSP files can be:
Located essentially anywhere, and
May be used (e.g., included) in other places
Instead, use an absolute path relative to your web content root, ideally using a JSP URL-ish tag so the context is provided automatically.
Regarding absolute path , try ${pageContext.request.contextPath}/js/handlebars-v1.3.0.js
Yes , please move your scripts code to the bottom, you are trying use getElementById , but the page did not finish loading.
Please see below sample:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="${pageContext.request.contextPath}/js/handlebars-v1.3.0.js"></script>
</head>
<body>
<form action="Hello" method="post">
<input type="text" value="ajith" />
<div id="div1"></div>
</form>
<script id="myTemplate" type="text/x-handlebars-template">
<table>
{{#eachByIdx components}}
// My Logic here
{{/eachByIdx}}
<tr>
<td>
Add New
</td>
</tr>
</table>
</script>
<script type="text/javascript">
Handlebars.registerHelper('eachByIdx', function(menuData, options) {
//My Logic
});
var menuSource = document.getElementById("myTemplate").innerHTML;
var menuTemplate = Handlebars.compile(menuSource);
document.getElementById("div1").innerHTML = menuTemplate(menuTemplate);
</script>
</body>
</html>
I can't get jQuery to work on my page. so I used jsfiddle.net to test if my jQuery code works, and it does. However, when I copy and paste the same code unto my document, it doesn't work. So I'm assuming that there's an error with linking the jQuery external file on my html document. I'm using TextWrangler as my text editor.
html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
css
#left {
float:left;
margin-left:200px;
}
jQuery
$(document).ready(function () {
$("#left").mouseenter(function () {
$("#left").fadeTo("fast", 0.25); });
});
Thanks for the time in answering and reading this. I'm currently stuck, I've reached a dead end, and I can't wait to overcome this problem!
I agree with other people that it's most likely a typo in the name of your jQuery file. I created a web page using your exact code except that I spelled the jquery file correctly. It worked fine.
And even though using the BODY element is proper and important, it didn't affect the outcome of my testing your code.
Please, use the "Inspect Element" (tools of chrome ) or Firebug (tool of Firefox and Chrome) for find the error.
Now for me the possible errors are:
Name not declared correctly for example <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
you can change the script with external files (libraries of google) <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
Now I create the DEMO on JSFIDDLE with your code and seems that it works
You have a typo in your HTML referencing the jQuery document:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<!---Typo was here--->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
</body>
function passString(str)
{
alert(str);
}
function passText()
{
str = document.getElementById('formId:hidden1').value;
alert(str);
}
I am using both of the above javascript functions to get the string obtained from a jsf bean file but none is working. The string is successfully obtained from the "#{addRoute5.teamNames}"(jsf bean File - see below) and displayed in the inputText, but the javascript cant accept string for some reason from xthml. My code in xhtml file is as follows:
Thanks in advance
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:head>
<link href="css/myCss1.css" rel="stylesheet" type="text/css"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Paris-Dakar Rally</title>
<link href="css/mapsStyle.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js? sensor=false"></script>
</h:head>
<h:body onload ="#{addRoute5.calculateLatMarker()}">
<div id="container">
<div id="header">
<div id="title">
<span>Paris - Dakar Rally</span>
</div>
</div>
<div id="map_canvas"></div>
<h:form id="formId">
<div id="body">
<div class="transbox">
<h:inputText id="hidden1" value="#{addRoute5.teamNames}"/>
**<h:commandButton type ="button" value="Start Simulation" onclick ="passText()" or onclick="passString(#{addRoute5.teamNames})"/>**
</div>
</div>
</h:form>
</div>
</h:body>
</f:view>
</html>
Stop. Step back. Break the problem down.
The code you have provided is a template that will be processed on the server. Then passed to a browser. Then the browser will extract the JavaScript from the HTML and run it.
Look at the source code the browser processes. Then ask yourself "Does this JavaScript not do what I expect? Or does the template not output the JavaScript I want?"
It looks like you have this:
onclick="passString(#{addRoute5.teamNames})"
which will generate something like:
onclick="passString(foo)"
when you want something like:
onclick="passString('foo')"