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')"
Related
I'm trying to create a file browser app.Here on click of a folder should be inserted into the text box provided.
Suppose if I click on app folder,I want the /app folder to be inserted into the provided text box.I've followed this URL in order to make this file browser app.
My template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>File Browser</title>
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/lib/app.css">
</head>
<body>
<div id="panelDiv">
<div class="panel-heading">
<button type="button" id="butDiv" >Browse</button>
<input type="text" name="location"/>
<span class="up">
<i class="fa fa-level-up"></i> Up
</span>
</div>
<div id="showDiv" class="panel-body">
<table class="linksholder">
</table>
</div>
</div>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/datatable/js/jquery.datatables.min.js"></script>
<script src="/lib/app.js"></script>
<script>
$(document).ready(function(){
$("#butDiv").click(function(){
$("#showDiv").toggle();
});
});
</script>
</body>
</html>
Can anyone please suggest me regarding this issue ...
Since you're using jquery already I would say the easiest would set the jquery event click for the folders to select the text input element and use the .val () function to set your new value so it would look something like this
$(".folder selector").click (function (){
$(".textbox selector").val ("/"+this.text());
});
I'm not sure if the value function works on input elements but if not you could change it to a <textarea></textarea>
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>
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>
This is not a duplicate of "Why does jQuery or a DOM method such as getElementById not find the element?". I have a form that is supposed to trigger a bunch of events but none of the functions get called. I added a button just for the purpose of testing.
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="utf-8" />
<title>Sign in</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="passphrase.css" />
</head>
<body>
<noscript>
Javascript is disabled. Now redirecting.
<meta HTTP-EQUIV="REFRESH" content="0; url=passnojs.html">
</noscript>
Welcome.
<form method="post" action="prolevel2.php" id="loginForm">
<!--code snipped-->
<br /><br /><input type="button" value="big ugly button" id="testing" />
</form>
<script src="verify.js"></script><!--this should work because it's after the HTML-->
</body>
</html>
Included external JavaScript
alert("begining")
document.getElementById('testing').addEventListener('onclick', display, false)
alert("here now")
function display()
{
alert("now displaying")//doesn't work
}
"begining" and "here now" are displayed but "now displaying is not". There are no messages in the console. What am I doing wrong?
Try this
document.getElementById('testing').addEventListener('click', function(){alert("now displaying")}, false);
or
document.getElementById('testing').addEventListener('click',display, false);
You have a syntax error, as others have mentioned. "onclick" should be "click". For default events, i prefer using the attribute instead of addEventListener, which throws a proper syntax error if entered incorrectly:
alert("begining")
document.getElementById('testing').onclick = display;
alert("here now")
function display()
{
alert("now displaying");//doesn't work
}
http://jsfiddle.net/MaxPRafferty/N4qGB/
Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});