hi all,
i'm new to ajax.
i'm facing a problem while using <logic:iterate> tags and ajax.
i'm also refreshing my
jsp page.
i'm using frames in my page.
From one frame i'm sending my request and in another frame the result page will get display.
The result page will have to autorefresh.
problem:
i'm getting data from database and everything is working correctly.
at the time of displaying the result page in bottom frame i'm getting the topframe .
i'm sending my code please help me as early as possible
thanks in advance
note:: without ajax my pages are working properly. when i implement ajax that time only problem arises.
please mention where i have to use <span id=""> tags
thanks in advance
1. topframe jsp page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="org.apache.struts.action.*, org.apache.struts.Globals" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean" prefix="bean"%>
<html>
<head>
<title>Booking Parameter: Time Structure - Select</title>
</script>
</head>
<html:form actionfiltered="/BookingParameterResourceMaintenanceStructure.do" target="bottomFrame1">
<p><font class="message">Booking Parameter: Resource Maintenance Structure</font></p>
<table border="0"><tr>
<td><html:messages bundle="TbsResources" property="message" message="true"
id="msg"
header=""
footer=""><div align="left" class="messageInfo">
<%= pageContext.getAttribute("msg") %> </div></html:messages></td>
<td><div align="left" class="messageError"><html:errors bundle="TbsResources" /></td>
</tr>
</table>
<table width="100%" cellspacing=0 class="tableborder">
<td> <input type="hidden" name="command" value=" "/>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="tablelight">
<tr>
<td class="fieldname" width="17%"><bean:message bundle="TbsResources" key="resource.maintenance.number"/></td>
<td width="83%">
<html:text property="maintenanceNbr" maxlength="12" />
</td>
</tr>
<tr>
<td class="fieldname" width="17%"><bean:message bundle="TbsResources" key="resource.status"/></td>
<td width="83%">
<html:select property="recStatus" >
<html

ptions collectionfiltered="resourceStatusList" labelProperty="label" property="value"/>
</html:select>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- <input type="submit" name="list" value="List" onfiltered="return ListBookingParameterResourceMaintenance();"> -->
<input type="submit" name="list" value="List" onfiltered="retrieveURL('/JRPA/BookingParameterResourceMaintenanceStructure.do?command=RESOURCEMAINTENANCETOP','resourceMaintenanceForm');">
</ilayer>
</html:form>
</html>
-------------------------------------------------------------
2. bottom frame jsp page in which result will get display
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="org.apache.struts.action.*, org.apache.struts.Globals,java.util.ArrayList" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean" prefix="bean"%>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<%
String rnumber=(String) request.getAttribute("RESOURCEMAINTENANCENBR");
String rstatus=(String) request.getAttribute("RESOURCESTATUS");
System.out.println("The main no is "+rnumber+rstatus);
%>
<%
ArrayList ar = (ArrayList) session.getAttribute("maintenanceList");
int rows=ar.size();
%>
<html>
<head>
var sortFields = new Array("Maintenance Number","Maintenance Date","Hours From","Hours To","User Id","Creation DTTM",
"Status");
</script>
function AddBookingParameterResourceMaintenance() {
document.resourceMaintenanceForm.command.value="ADD";
document.resourceMaintenanceForm.actionfiltered="BookingParameterResourceMaintenanceStructure.do";
document.resourceMaintenanceForm.submit();
}
function autorefresh()
{
document.forms[0].command.value="RESOURCEMAINTENANCETOP";
document.forms[0].recStatus.value=parent.mainFrame1.document.forms[0].recStatus.value;
document.forms[0].maintenanceNbr.value=parent.mainFrame1.document.forms[0].maintenanceNbr.value;
document.forms[0].actionfiltered="/JRPA/BookingParameterResourceMaintenanceStructure.do";
document.forms[0].submit();
}
</script>
</head>
<html:form actionfiltered="/BookingParameterResourceMaintenanceStructure.do" >
<br>
<table width="100%" border="0">
<table border="0"><tr>
<td><html:messages bundle="TbsResources" property="message" message="true"
id="msg"
header=""
footer=""><div align="left" class="messageInfo">
<%= pageContext.getAttribute("msg") %> </div></html:messages></td>
<td><div align="left" class="messageError"><html:errors bundle="TbsResources" /></td>
</tr>
</table>
<table width="100%" cellspacing=0 class="tableborder">
<html:hidden property="recStatus" value=" "/>
<html:hidden property="maintenanceNbr" value=" "/>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td colspan="2">
<table class="sortable" id="unique_id" width="100%" border="0" cellspacing="1" cellpadding="2">
<thead>
<tr><html:hidden property="command" value=""/><input type="hidden" name="hiddenPageInfo" value=""/>
<th> </th>
<th>S/No</th>
<th>Maintenance Number</th>
<th>Maintenance Date </th><input type="hidden" name="hiddenMaintenanceNbr" value="<%=rnumber%>" />
<th>Hours From</th><input type="hidden" name="hiddenRecStatus" value="<%=rstatus%>" />
<th>Hours To</th>
<th>Maintenance Desc</th>
<th>User Id</th>
<th>Create DTTM</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<% int sno=0;
%>
<span id="theTable2">
<logic:iterate id="list" offset="offset" indexId="index" name="maintenanceList">
<%
if((index.intValue()+1)%2 >0){ %>
<tr class="tablelight">
<% } else { %>
<tr class="tabledark">
<% } sno++; %>
<td><input type="radio" name="resourceSelected" value="<bean:write name = "list" property="recStatus" />,<bean:write name = "list" property="maintenanceNbr" />,<bean:write name = "list" property="maintenanceDate" />,<bean:write name = "list" property="hoursFrom" />,<bean:write name = "list" property="hoursTo" />"></td>
<td><%=sno%></td>
<td><bean:write name = "list" property="maintenanceNbr" /></td>
<td><bean:write name = "list" property="maintenanceDate" /></td>
<td><bean:write name = "list" property="hoursFrom" /></td>
<td><bean:write name = "list" property="hoursTo" /></td>
<td><bean:write name = "list" property="maintenanceDesc" /></td>
<td><bean:write name = "list" property="lastModifyUserId" /></td>
<td><bean:write name = "list" property="lastModifyDttm" /><input type="hidden" name="activeStatus" value="<bean:write name = 'list' property='recStatus' />"></td>
<logic:equal name="list" property="recStatus" value="A">
<td><bean:message bundle="TbsResources" key="record.active.status"/></td>
</logic:equal>
<logic:equal name="list" property="recStatus" value="I">
<td><bean:message bundle="TbsResources" key="record.inactive.status"/></td>
</logic:equal>
</tr>
</logic:iterate>
</span>
<input type="hidden" name="hRecStatus" value=" " />
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<%
if(rows > 0){
%>
<input type="button" name="status" value="Active/Inactive" onfiltered="resourcemaintenance_verify_status()">
<%
}
%>
<input type="button" name="add" value="Add" onfiltered="AddBookingParameterResourceMaintenance();">
</html:form>
</html>
---------------------------------------------------------------
3. My Ajax.js file
_/**
* Ajax.js
*
* Collection of Scripts to allow in page communication from browser to (
struts) server
* ie can reload part instead of full page
*
* How to use
* ==========
* 1) Call retrieveURL from the relevant event on the HTML page (e.g. onclick)
* 2) Pass the url to contact (e.g. Struts Action) and the name of the HTML form to post
* 3) When the server responds ...
* - the script loops through the response , looking for <span id="name">newContent</span>
* - each <span> tag in the *existing* document will be replaced with newContent
*
* NOTE: <span id="name"> is case sensitive. Name *must* follow the first quote mark and end in a quote
* Everything after the first '>' mark until </span> is considered content.
* Empty Sections should be in the format <span id="name"></span>
*/
//global variables
var req;
var which;
_/**
* Get the contents of the URL via an Ajax call
* url - to get content from (e.g. /struts-ajax/sampleajax.do?ask=COMMAND_NAME_1)
* nodeToOverWrite - when callback is made
* nameOfFormToPost - which form values will be posted up to the server as part
* of the request (can be null)
*/
function retrieveURL(url,nameOfFormToPost) {
//get the (form based) params to push up as part of the get request
url=url+getFormAsString(nameOfFormToPost);
//Do the Ajax call
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open("POST", url, true); //was get
} catch (e) {
alert("Problem Communicating with Server\n"+e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processStateChange;
req.open("POST", url, true);
req.send();
}
}
}
_/*
* Set as the callback method for when XmlHttpRequest State Changes
* used by retrieveUrl
*/
function processStateChange() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
//Split the text response into Span elements
spanElements = splitTextIntoSpan(req.responseText);
//Use these span elements to update the page
replaceExistingWithNewHtml(spanElements);
} else {
alert("Problem with server response:\n " + req.statusText);
}
}
}
_/**
* gets the contents of the form as a URL encoded String
* suitable for appending to a url
* @param formName to encode
* @return string with encoded form values , beings with &
*/
function getFormAsString(formName){
//Setup the return String
returnString ="";
//Get the form values
formElements=document.forms[formName].elements;
//loop through the array , building up the url
//in the form /strutsaction.do&name=value
for ( var i=formElements.length-1; i>=0; --i ){
//we escape (encode) each value
returnString=returnString+"&"+escape(formElements[i].name)+"="+escape(formElements[i].value);
}
//return the values
return returnString;
}
_/**
* Splits the text into <span> elements
* @param the text to be parsed
* @return array of <span> elements - this array can contain nulls
*/
function splitTextIntoSpan(textToSplit){
//Split the document
returnElements=textToSplit.split("</span>")
//Process each of the elements
for ( var i=returnElements.length-1; i>=0; --i ){
//Remove everything before the 1st span
spanPos = returnElements[i].indexOf("<span");
//if we find a match , take out everything before the span
if(spanPos>0){
subString=returnElements[i].substring(spanPos);
returnElements[i]=subString;
}
}
return returnElements;
}
_/*
* Replace html elements in the existing (ie viewable document)
* with new elements (from the ajax requested document)
* WHERE they have the same name AND are <span> elements
* @param newTextElements (output of splitTextIntoSpan)
* in the format <span id=name>texttoupdate
*/
function replaceExistingWithNewHtml(newTextElements){
//loop through newTextElements
for ( var i=newTextElements.length-1; i>=0; --i ){
//check that this begins with <span
if(newTextElements[i].indexOf("<span")>-1){
//get the name - between the 1st and 2nd quote mark
startNamePos=newTextElements[i].indexOf('"')+1;
endNamePos=newTextElements[i].indexOf('"',startNamePos);
name=newTextElements[i].substring(startNamePos,endNamePos);
//get the content - everything after the first > mark
startContentPos=newTextElements[i].indexOf('>')+1;
content=newTextElements[i].substring(startContentPos);
//Now update the existing Document with this element
//check that this element exists in the document
if(document.getElementById(name)){
//alert("Replacing Element:"+name);
document.getElementById(name)._innerhtml = content;
} else {
//alert("Element:"+name+"not found in existing document");
}
}
}
}
-----------------------