The targets attribute of my ajax generated form does not seem to be working. I can't seem to publish topics from this form either. I have the following page:
<!Doctype html, taglibs, etc here !-->
<html>
<head>
<s:head theme="css_xhtml" />
<sj:head jqueryui="true" />
<script type="text/javascript">
$.subscribe('testtopic', function(event, data) {
alert('testtopic Published!');
});
</script>
<title>Exam CRUD</title>
</head>
<s:url namespace="/exam" action="ReadAll" var="readExamsTag" />
<body>
<s:include value="/WEB-INF/content/navigation.jsp" />
<h2>Exam CRUD</h2>
<sj:div id="formcontainer"></sj:div>
<sj:div id="tablecontainer" loadingText="Loading.."
reloadTopics="reloadTable" href="%{readExamsTag}">
</sj:div>
</body>
</html>
ReadAll loads the following jsp into the "tablecontainer" div:
<s:url namespace="/exam" action="CreateForm" var="createFormTag" />
<p>
Listed below are the exams currently available to students.
<sj:a href="%{createFormTag}" targets="formcontainer">Add an exam</sj:a>
<!The above anchor works perfectly fine. It loads the form into the div as expeceted>
</p>
<table>
<! Table contents over here >
</table>
The form being loaded into "formcontainer" onclick by %{createFormTag}:
<sj:head />
<s:form theme="css_xhtml" namespace="/exam" action="Create">
<!Form fields>
<input type="button" value="Cancel" onclick="$('#formcontainer').empty();">
<sj:submit targets="formcontainer" onCompleteTopics="reloadTable" value="Add" />
</s:form>
<sj:a href="#" onClickTopics="testtopic">Test</sj:a>
The problems im facing come from the above form. The targets attribute does not work, on submitting this form it loads the result into a new page. I also wanted to test if topics can be published so i added the anchor at the end of the form. Clicking this anchor when the form loads into the page does nothing. The "Cancel" button seems to be working fine, and so does the initial anchor that loads this form, so why isn't the form?
EDIT: Fixed it..
I'm not sure why this is so, must have something to do with the css_xhtml template. I fixed the targets attribute by adding an id attribute to my form.
As for fixing the publishing, I added an id attribute to the datepicker fields in my form and everything works perfect now. Weird..
Final code:
crud.jsp:
<!DOCTYPE html>
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<html>
<head>
<s:head theme="css_xhtml" />
<sj:head jqueryui="true"/>
<title>Exam CRUD</title>
</head>
<s:url namespace="/exam" action="ReadAll" var="readExamsTag" />
<body>
<s:include value="/WEB-INF/content/navigation.jsp" />
<h2>Exam CRUD</h2>
<sj:div id="formcontainer"></sj:div>
<sj:div id="tablecontainer" loadingText="Loading.."
reloadTopics="reloadTable" href="%{readExamsTag}">
</sj:div>
</body>
</html>
add.jsp:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<s:form id="addform" theme="css_xhtml" namespace="/exam" action="Create">
<s:textfield name="exam.name" label="Name" required="true" />
<s:textfield name="exam.author" label="Author" />
<s:textfield name="exam.minutesAllotted" label="Time limit"
required="true" />
<sj:datepicker id="startingDate" name="exam.startingDate"
label="Start date" timepicker="true" readonly="true"
displayFormat="dd/mm/yy" changeMonth="true" changeYear="true"
minDate="-0d" maxDate="+2y" />
<sj:datepicker id="endingDate" name="exam.endingDate" label="End date"
timepicker="true" displayFormat="dd/mm/yy" changeMonth="true"
changeYear="true" readonly="true" minDate="-0d" maxDate="+2y" />
<input type="button" value="Cancel"
onclick="$('#formcontainer').empty();">
<sj:submit targets="formcontainer" value="Add" />
</s:form>
I didnt need to change anything in the second jsp.
Include < sj:head /> only once. – Aleksandr M
Related
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.
I want to write a if condition on aspx page. Please help me putting the condition.
<head runat="server">
<% if()
{ %>
some html
<% } %>
</head>
<form id="form1" runat="server">
<div>
<input type="hidden" name="menuId" id="menuId" value="ADDNEWTEMPLATE" />
</div>
</form>
</body>
Under if the i need to check if the value of Menuid = "ADDNEWTEMPLATE" then some html statement has to written. Please let me know what should be the condition.
<head runat="server">
<script runat = "server">
string hiddenValue = document.getElementById('<%= menuId.ClientID %>';
</script>
<% if( hiddenValue == "ADDNEWTEMPLATE") { %>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<% } else {%>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<% } %>
</head>
<form id="form1" runat="server">
<div>
<input type="hidden" name="menuId" id="menuId" value="ADDNEWTEMPLATE" />
</div>
</form>
I have a JSP page with a form. I want to submit and return the input to the JSP page. I can't get it to work.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ejemplo</title>
<script type="text/JavaScript" src="Scripts/jquery-1.9.1.js"></script>
<script>
function enviarDatos() {
form = document.getElementById("datos");
form.datoIntroducido.value = "holaaaaaa";
form.submit();
<%System.out.println(request.getParameter("datoIntroducido"));%>
}
</script>
</head>
<body>
<h3>Ejemplo</h3>
<form name="datos" id="datos" action="mypage" method="post" enctype="multipart/form-data">
Escribe aquí: </br>
<textarea cols=50 rows=10 id="texto"></textarea><br />
<input type="hidden" name="datoIntroducido" id="datoIntroducido"/>
<input type="submit" value="Enviar datos" class="btn-primary" onclick="enviarDatos();"/>
</form>
</div>
</body>
</html>
It prints "null" when executing the first time but it doesnt write anything when pressing the button
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>
Hey guys so I cant get a jquery plugin to work - timepicker - I have a datepicker already set up and working. I have researched this for many hours, I have tried different plugins. Procedure that I am doing....downloading the plugin, importing .js file to my projects resources/js folder (I am using spring by the way), I then copy the .css file (of the timepicker) to the resources/css folder. I then add a script below the script that imports the standard jquery library to import the plugin...below you can see how I implemented it. Thank you for the help.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<title>Home</title>
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/styles.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery- ui-1.10.3.custom.min.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery.timepicker.css" />' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='<c:url value="/resources/js/jquery-ui-1.10.3.custom.min.js" />'></script>
<script src='<c:url value="/resources/js/jquery.timepicker.min.js" />'></script>
<script>
$(function() {
$("#dateStart").datepicker();
$("#dateEnd").datepicker();
});
</script>
<script>
$(function() {
$('.timeStart').timepicker();
});
</script>
</head>
<body>
<div id='header-container'>
<div id='header-content'>
<a href='<c:url value="/" />'>414Cal</a>
<div id='header-content-right'>
<a href='<c:url value="/signout" />'>Sign Out, ${ user.email }</a>
</div>
</div>
</div>
<div id='body-content'>
<h1>
414Cal Event Creator
</h1>
<c:if test="${!empty username}">
${username = "User"}
</c:if>
<h3>
${username}
</h3>
<form action='<c:url value="/createEvent" />' method='post'>
<p><input type='text' name='eventTitle' size='58' placeholder='Title' /></p>
<p><input type='text' name='eventLocation' size='58' placeholder='Location' /></p>
<p><textarea name='eventDescription' rows='5' cols='42' placeholder='Description'></textarea></p>
<p>Start<input type='text' name='dateStart' id='dateStart' /> <input type='text' name='.timeStart' id='.timeStart' /> to <input type='text' name='dateEnd' id='dateEnd' /></p>
<p><input type='checkbox' name='allDay'> All day</p>
<p><input type='checkbox' name='repeat' id='repeat'> Repeat</p>
<p><input type='submit' /></p>
</form>
}
</div>
</body>
</html>
The HTML elements that you're initializing datepicker on do not appear in your JSP file.
here is the updated code, thank you
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<title>Home</title>
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/styles.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery- ui-1.10.3.custom.min.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery.timepicker.css" />' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>></script>
<script src='<c:url value="/resources/js/jquery-ui-1.10.3.custom.min.js" />'></script>
<script src='<c:url value="/jquery.timepicker.min.js" />'></script>
<script type="text/javascript" src="js/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css" />
<script type="text/javascript" src="lib/base.js"></script>
<link rel="stylesheet" type="text/css" href="lib/base.css" />
<script>
$(function() {
$("#dateStart").datepicker();
$("#dateEnd").datepicker();
});
$(function() {
$('timestart').timepicker();
});
</script>
</head>
<body>
<div id='header-container'>
<div id='header-content'>
<a href='<c:url value="/" />'>414Cal</a>
<div id='header-content-right'>
<a href='<c:url value="/signout" />'>Sign Out, ${ user.email }</a>
</div>
</div>
</div>
<div id='body-content'>
<h1>
414Cal Event Creator
</h1>
<c:if test="${!empty username}">
${username = "User"}
</c:if>
<h3>
${username}
</h3>
<form action='<c:url value="/createEvent" />' method='post'>
<p><input type='text' name='eventTitle' size='58' placeholder='Title' /></p>
<p><input type='text' name='eventLocation' size='58' placeholder='Location' /></p>
<p><textarea name='eventDescription' rows='5' cols='42' placeholder='Description'></textarea></p>
<p>Start<input type='text' name='dateStart' id='dateStart' /> <input id="timestart" type="text" class="time" /> to <input type='text' name='dateEnd' id='dateEnd' /></p>
<p><input type='checkbox' name='allDay'> All day</p>
<p><input type='checkbox' name='repeat' id='repeat'> Repeat</p>
<p><input type='submit' /></p>
</form>
</div>
</body>
</html>
Just saw this at the bottom of the console right after I load the jsp page. Thank you
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/calendar/jquery.timepicker.min.js] in DispatcherServlet with name 'appServlet'
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/calendar/js/jquery.timepicker.js] in DispatcherServlet with name 'appServlet'
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/calendar/css/jquery.timepicker.css] in DispatcherServlet with name 'appServlet'