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.