Jquery snippet does not executes in JSP - javascript

I have a dynamic web project in eclipse. I have a JSP and a html file.
In my JSP file , I include a html file that has jquery snippet inside script tag.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
</script>
</head>
<body>
<form>
<div>
Are you in school? <select id="in_school">
<option selected="selected">Please choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="in_school_yes" class="in_school_input" style="display: none;">
What grade are you in? <input type="text" name="grade" />
</div>
<div id="in_school_no" class="in_school_input" style="display: none;">
What year did you graduate? <input type="text" name="graduation_year" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
My JSP page is :
<%# 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>Hello World - JSP tutorial</title>
</head>
<body>
<%#include file="htmldata.html" %>
</body>
</html>
When I run this program I only see the form but when I choose the dropdown, nothing happens . It does not prompts me the other questions based on dropdownvalue. Inshort I see that jquery part is never executed.
The expected output is Expected_Demo.
Can anyone tell me where am I going wrong ?
Thanks !

There is nothing wrong with your jsp code.
1- You are have not included jQuery script in html.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2- You have placed javascript before your html. Here is full code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<div>
Are you in school? <select id="in_school">
<option selected="selected">Please choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div id="in_school_yes" class="in_school_input" style="display: none;">
What grade are you in? <input type="text" name="grade" />
</div>
<div id="in_school_no" class="in_school_input" style="display: none;">
What year did you graduate? <input type="text" name="graduation_year" />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
<script type="text/javascript">
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
</script>
</body>
</html>

Include jquery in your html before <script> that is using it:
Here's a link for cdn :
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
You can chose to download it and include from your own application path
Also, you need to wait until your html loads:
<script type="text/javascript">
$(document).ready(function(){
$("#in_school").change(function() {
var in_school = $(this).val();
$(".in_school_input").hide("fast", function() {
$("#in_school_" + in_school).show("slow");
});
});
});
</script>

Related

Open window which user select language

Here is a short form for selecting language for a webpage, There are two languages one is marathi and another is english actually what I want is like: when a user select english language and submit the form english.html page should open and
when user select marathi language marathi.html page should open.
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<form>
<center>
<p id="p1">
Language:<select>
<option id="English" >English</option>
<option id="Marathi" >Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open" >
</center>
</form>
</html>
You can use this as a reference, considering english.html and marathi.html as your targeting pages, you can change them accordingly
<html>
<head>
<title>Select Language</title>
<link rel="icon" href="hen.png">
<script>
$('#button').click(function() {
var selected = $('#language option:selected');
window.location.href = selected + ".html"
})
</script>
</head>
<body>
<form>
<center>
<p id="p1">
Language:
<select id="language">
<option id="English">English</option>
<option id="Marathi">Marathi</option>
</select>
</p>
<input type="submit" id="button" value="Open">
</center>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I think its obviously, but please do not repeat it at production:
<input type="submit" id="button" onclick="window.locaton.href='lol/'+$('select').val()+'.html'" value="Open" >
Here is easy way;
<select name="forma" onchange="location = this.value;">
<option value="english.html">English</option>
<option value="marathi.html">Marathi</option>
</select>
if you want to create this using simple Javascript then use location.href = "yourPageAddress";
here is the sample code i have written for the same:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript">
function MyFunction(){
var getValue = document.getElementById("language");
//console.log(getValue);
var getIndexValue = getValue.options[getValue.selectedIndex].value;
//console.log(getValue.selectedIndex);
//console.log(getIndexValue);
if(getValue.selectedIndex == 1){
//console.log("English")
location.href = "http://www.google.com";
}
else if(getValue.selectedIndex == 2){
//console.log("Marathi");
location.href = "http://www.yahoo.com";
}
else{
console.log("Wrong Option Selected.");
}
}
</script>
</head>
<body>
Language:
<select name="language" id="language">
<option>Select..</option>
<option value="https://www.google.com" id="english">English</option>
<option value="https://www.yahoo.com" id="marathi">Marathi</option>
</select>
<br>
<button name="submit" id="submit" onclick="MyFunction()">Submit</button>
</body>
</html>
This is just the one way where you can redirect the user to selected page, there are many different ways also to execute the same operation.
You may find some console.log statement marked comment, which was just used for debugging purpose.

logout when tab or browser window closed jsp

I am new #jsp, and would like to call the logout function when the tab or the browser window is closed. i've made some research and found out that i need to use window.onbeforeunload. But the thing is , i don't know where to put it in my jsp page. Here is it's code:
<%# page language="java" contentType="text/html; charset=windows-1256"
pageEncoding="windows-1256"%>
<!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=windows-1256">
<%# taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%# taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%# taglib uri="http://java.sun.com/jstl/core-rt" prefix="c-rt" %>
<link rel="stylesheet" href="css/login.css">
<title>Insert title here</title>
<script type="text/javascript" language="javascript" runat="server">
var divSelected = null;
function switchURL()
{
var x = document.getElementById("femp").value;
<c:choose>
<c:when test="${puser.LOGIN==true}">
document.getElementById("temp").value = x;
// alert("${puser.LOGIN}");
</c:when>
<c:otherwise>
document.getElementById("temp").value = 0;
document.getElementById("femp").value = 0;
// alert("${puser.LOGIN}");
</c:otherwise>
</c:choose>
}
</script>
<script type="text/javascript" language="javascript" runat="server">
var divSelected = null;
function Logout()
{
document.getElementById("Form1").target ="";
document.getElementById("Form1").action = "/dcHR/login";
// window.location = "login";
}
</script>
</head>
<body>
<section class="container">
<div class="login">
<form id="Form1" action="http://localhost:80/reports/rwservlet" method="Post" target="_blank">
<input type="hidden" id="cmdkey" name="cmdkey" value="repserv">
<input type="hidden" id="temp" name="P_TO_EMP" value="0">
<input type="hidden" id="femp" name="P_FROM_EMP" value="${puser.USR_USER}" >
<input type="hidden" id="pcomp" name="P_COMP" value="${puser.USR_CP}">
<p> Years:<input type="text" name="P_YEAR"> </p>
<p> Month:<input type="text" name="P_PERIOD"> </p>
<input type="submit" value="Report" name="pbtn" onclick="switchURL()" />
<input type="submit" value="Logout" name="pbtn" onclick="Logout()"/>
</form>
</div>
</section>
</body>
</html>
can somebody help me plz.
Regards to all.
You have to add listener on window object as below
window.addEventListener("beforeunload", function(){
    //Ajax call to invoke logout action
});
Put this code in your jsp page.

HTML form select option triggers text field

I'm trying to get a text field to appear when the user selects a certain option in a form select. I found exactly what I need at http://jsfiddle.net/0ak3b3z1/
However, when I copy this exact code into an html document, it doesn't work. Can anyone tell me where I'm going wrong.
Here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
$('#industry').on('change',function(){
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val()=="SaaS");
});
</script>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
</body>
</html>
Need to include jQuery. Plus you must place the javascript at end (after DOM elements are defined).
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<label for="">Industry?</label>
<select id="industry">
<option value="Telesales">Telesales</option>
<option value="Media">Media/Advertising</option>
<option value="SaaS">SaaS</option>
<option value="Insurance">Insurance</option>
<option value="Automobile">Automobile</option>
</select>
<!-- Show Metric Input based on Industry Selection -->
<input type="text" id="telesalesCalls" placeholder="How many calls?" style="display:none">
<input type="text" id="SaaSMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="MediaMeetings" placeholder="How many meetings?" style="display:none">
<input type="text" id="InsuranceCalls" placeholder="How many calls?" style="display:none">
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$('#industry').on('change', function () {
var selection = $(this).val();
console.log("Detected change..." + selection);
$("#SaaSMeetings").toggle($(this).val() == "SaaS");
});
</script>
</body>
</html>
The dollar sign is used with the jquery library, and you're not including this library.
So just add jquery library before the js code.
Just Include this code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You need to include this line in your code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'> </script>

textbox not appearing while selected radio button

Trying to select any of the radio button which makes appear the textbox but pratically it's not working :( .So here is html in the jsp page.
<%# 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>
<style type="text/css">
input[type=text]{
display : none
}
</style>
<script type="text/javascript" language="text/html" src="../jscript/jquery-1.7.2.js"></script>
<script type="text/javascript" language="javascript" src="../jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript"> // I 'm using your 1st jquery whose usage is void of css
$('input[type=radio]').change(function() {
$('input[type=text]').css('display','none');
$(this).closest('tr').find('input[type=text]').css('display','block');
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test </title>
</head>
<body>
<form action="">
<div align="left" style="color:#2D7EE7">
<table>
<tr>
<td>
<input type="radio" name="radio" value="college"></td>
<td>College </td>
<td><input type="text" name="clg"></td></tr>
<tr>
<td><input type="radio" name="radio" value="school"></td>
<td> School </td>
<td><input type="text" name="schl"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
And here is the piece of code of jquery:
<script type="text/javascript">
$('input[type=radio]').change(function() {
$('input[type=text]').hide();
$(this).parent().next().show();
});
</script>
and css :
<style type="text/css">
input[type=text]{
display : none
}
</style>
But still this is not working :( :(,so any guess where I'm going wrong.Feel free to comment.
Change a bit into:
$('input[type=radio]').change(function() {
$('input[type=text]').hide();
$(this).closest('tr').find('input[type=text]').show();
});
OR
$(document).ready(function(){
$('input[type=radio]').change(function() {
$('input[type=text]').css('display','none');
$(this).closest('tr').find('input[type=text]').css('display','block');
});
});
First try to include just one JQuery script into the page (remove jquery-1.4.2.min.js)
$(':radio') is equivalent to $('[type=radio]')
$(document).ready(function(){
$(':radio').change(function() {
// Hide all input:text in the table
$('input:text', $(this).closest("table")).hide();
$(this).parent().nextAll().find('input:text').show();
});
});

Data exchange between base html page and popup window

I have this index.php file;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Proj</title>
<script type="text/javascript">
function openWindow() {
window.open("popup.php", "popup_id", "scrollbars=no,resizable,width=200,,left=300,top=300,height=200");
}
</script>
</head>
<body>
<form name="form1" action="">
<input name="initialdata" type="text" value="initial data" />
<input type="button" value="Send" onClick="openWindow()" />
</form>
</body>
</html>
and this popup.php file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>popup</title>
<script type="text/javascript">
function putData() {
//How to copy from that file -> document.formname.popupdata.value to
//index.php -> document.form1.initialdata.value???
window.close();
}
function loadData() {
//how to get the value "initial data"
//from index.php -> document.form1.initialdata.value????????????
}
</script>
</head>
<body onLoad="loadData();">
<form name="formname" action="">
<input name="popupdata" type="text" value="" />
<input type="button" value="Send" onClick="putData()" />
</form>
</body>
</html>
How how to get the value "initial data" from from index.php -> document.form1.initialdata.value and how to copy from popup.php -> document.formname.popupdata.value to index.php -> document.form1.initialdata.value??
Using
window.opener.document.getElementsByName("initialdata")[0].value;
This might not work on every browser, though. For details, see this question:
window.opener alternatives

Categories