You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by Stefaan Somers <st...@gmail.com> on 2011/10/17 19:51:52 UTC
How to use tabbed panels with
Hi,
I'm trying to split up my form (using <s:form>) into different tabs. I've
already searched the internet, but haven't found much information about it.
If anyone could send me a sample, or a link to a page describing how to do
this, that would be most helpfull.
Sample struts-page I want to split up in different tabs :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ include file="taglibs.jsp" %>
<%String styleVar = (String) session.getAttribute("style");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="header.jsp" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<jsp:include page="<%=styleVar+\"-styles.jsp\"%>" />
<link type="text/css" rel="stylesheet"
href="/struts/js/jquery.autocomplete.css">
<script type="text/javascript"
src="/struts/js/jquery.autocomplete.js"></script>
</head>
<jsp:include page="<%=styleVar+\"-heading.jsp\"%>" />
<p><span class="tit">ArtikelNummer Entry</span></p><br/>
<s:actionerror />
<s:fielderror></s:fielderror>
<s:form action="artikelNummer-confirm">
<s:hidden name="nextEventId"/>
<s:hidden name="artikelNummerOid" />
<s:textfield name="artikelNummerName" class="formTable" label="Name"/>
<s:set name="dt_name" value="displayType['name']" />
<s:if
test="(#dt_name == null) || (#dt_name.name() == null)">
<s:set name="dtv_name" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_name" value="#dt_name.name()" />
</s:else>
<s:if test="(#dtv_name == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_name == 'LABEL')">
<s:label id="name" key="artikelNummerDetails.name" class="formTable2"
label="Name" />
</s:elseif>
<s:elseif test="(#dtv_name == 'READONLY')">
<s:textfield id="name" key="artikelNummerDetails.name" class="formTable"
label="Name" readonly="true" />
</s:elseif>
<s:else>
</s:else>
<s:set name="dt_omschrijving" value="displayType['omschrijving']" />
<s:if
test="(#dt_omschrijving == null) || (#dt_omschrijving.name() == null)">
<s:set name="dtv_omschrijving" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_omschrijving" value="#dt_omschrijving.name()" />
</s:else>
<s:if test="(#dtv_omschrijving == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_omschrijving == 'LABEL')">
<s:label id="omschrijving" key="artikelNummerDetails.omschrijving"
class="formTable2" label="Omschrijving" />
</s:elseif>
<s:elseif test="(#dtv_omschrijving == 'READONLY')">
<s:textfield id="omschrijving" key="artikelNummerDetails.omschrijving"
class="formTable" label="Omschrijving" readonly="true" />
</s:elseif>
<s:else>
<sjr:ckeditor id="omschrijving" label="Omschrijving"
name="artikelNummerDetails.omschrijving"
value="%{artikelNummerDetails.omschrijving}"
rows="10" cols="80" width="800"/>
</s:else>
<s:set name="dt_functioneleCode" value="displayType['functioneleCode']" />
<s:if
test="(#dt_functioneleCode == null) || (#dt_functioneleCode.name() ==
null)">
<s:set name="dtv_functioneleCode" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_functioneleCode" value="#dt_functioneleCode.name()" />
</s:else>
<s:if test="(#dtv_functioneleCode == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_functioneleCode == 'LABEL')">
<s:label id="functioneleCode" key="artikelNummerDetails.functioneleCode"
class="formTable2" label="Functionele code" />
</s:elseif>
<s:elseif test="(#dtv_functioneleCode == 'READONLY')">
<s:textfield id="functioneleCode"
key="artikelNummerDetails.functioneleCode" class="formTable"
label="Functionele code" readonly="true" />
</s:elseif>
<s:else>
<!-- custom -->
<tr>
<td><s:a action="functioneleCode-entry" id="f1"
target="_blank">nieuw.</s:a></td>
</tr>
<s:url id="myUrl" namespace="" action="artikelNummer-functioneleCode" />
<sx:autocompleter
name="artikelNummerDetails.functioneleCode.name"
id="artikelNummerDetails.functioneleCode.id"
keyName="artikelNummerDetails.functioneleCode.id"
href="%{myUrl}"
loadOnTextChange="true"
label="Functionele code"
loadMinimumCount="1"
forceValidOption="true"
autoComplete="true"
preload="true"
/>
<!-- /custom -->
</s:else>
<s:set name="dt_arpaCode" value="displayType['arpaCode']" />
<s:if
test="(#dt_arpaCode == null) || (#dt_arpaCode.name() == null)">
<s:set name="dtv_arpaCode" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_arpaCode" value="#dt_arpaCode.name()" />
</s:else>
<s:if test="(#dtv_arpaCode == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_arpaCode == 'LABEL')">
<s:label id="arpaCode" key="artikelNummerDetails.arpaCode"
class="formTable2" label="Arpa code" />
</s:elseif>
<s:elseif test="(#dtv_arpaCode == 'READONLY')">
<s:textfield id="arpaCode" key="artikelNummerDetails.arpaCode"
class="formTable" label="Arpa code" readonly="true" />
</s:elseif>
<s:else>
<!-- custom -->
<tr>
<td><s:a action="arpaCode-entry" target="_blank">nieuw</s:a></td>
</tr>
<s:url id="myUrl" namespace="" action="artikelNummer-arpaCode" />
<sx:autocompleter
name="artikelNummerDetails.arpaCode.name"
id="artikelNummerDetails.arpaCode.id"
keyName="artikelNummerDetails.arpaCode.id"
href="%{myUrl}"
loadOnTextChange="true"
label="Arpa code"
loadMinimumCount="1"
forceValidOption="true"
autoComplete="true"
preload="true"
/>
<!-- /custom -->
</s:else>
<s:set name="dt_boekhoudkundigeSleutel"
value="displayType['boekhoudkundigeSleutel']" />
<s:if
test="(#dt_boekhoudkundigeSleutel == null) ||
(#dt_boekhoudkundigeSleutel.name() == null)">
<s:set name="dtv_boekhoudkundigeSleutel" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_boekhoudkundigeSleutel"
value="#dt_boekhoudkundigeSleutel.name()" />
</s:else>
<s:if test="(#dtv_boekhoudkundigeSleutel == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_boekhoudkundigeSleutel == 'LABEL')">
<tr><td class="formTable" cssStyle="width:300px;
font-family:Tahoma;"><span class="normal">Boekhoudkundige sleutel :
</span></td><td class="formTable"> <s:iterator
value="artikelNummerDetails.boekhoudkundigeSleutel"> <s:url id="url"
action="boekhoudkundigeSleutel-detail"> <s:param
name="boekhoudkundigeSleutelOid"><s:property value="id"/></s:param>
</s:url> <s:a href="%{url}"><span class="boldText"><s:property
value="name"/></span></s:a> <br/> </s:iterator> </td></tr>
</s:elseif>
<s:elseif test="(#dtv_boekhoudkundigeSleutel == 'READONLY')">
<s:textfield id="boekhoudkundigeSleutel"
key="artikelNummerDetails.boekhoudkundigeSleutel" class="formTable"
label="Boekhoudkundige sleutel" readonly="true" />
</s:elseif>
<s:else>
<s:select multiple="true" id="boekhoudkundigeSleutel"
key="artikelNummerDetails.boekhoudkundigeSleutelIds"
list="artikelNummerAgent.boekhoudkundigeSleutelIds" listKey="id"
cssClass="multiselect2side" listValue="name" label="Boekhoudkundige sleutel"
/>
</s:else>
<s:set name="dt_status" value="displayType['status']" />
<s:if
test="(#dt_status == null) || (#dt_status.name() == null)">
<s:set name="dtv_status" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_status" value="#dt_status.name()" />
</s:else>
<s:if test="(#dtv_status == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_status == 'LABEL')">
<s:label id="status" key="artikelNummerDetails.status" class="formTable2"
label="Status" />
</s:elseif>
<s:elseif test="(#dtv_status == 'READONLY')">
<s:textfield id="status" key="artikelNummerDetails.status"
class="formTable" label="Status" readonly="true" />
</s:elseif>
<s:else>
<s:textfield name="artikelNummerDetails.status" class="formTable"
cssStyle="width:300px; font-family:Tahoma;" label="Status" />
</s:else>
<s:set name="dt_eindDatum" value="displayType['eindDatum']" />
<s:if
test="(#dt_eindDatum == null) || (#dt_eindDatum.name() == null)">
<s:set name="dtv_eindDatum" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_eindDatum" value="#dt_eindDatum.name()" />
</s:else>
<s:if test="(#dtv_eindDatum == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_eindDatum == 'LABEL')">
<s:label id="eindDatum" key="artikelNummerDetails.eindDatum"
class="formTable2" label="Eind datum" />
</s:elseif>
<s:elseif test="(#dtv_eindDatum == 'READONLY')">
<s:textfield id="eindDatum" key="artikelNummerDetails.eindDatum"
class="formTable" label="Eind datum" readonly="true" />
</s:elseif>
<s:else>
<s:textfield name="artikelNummerDetails.eindDatum" class="formTable"
cssStyle="width:300px; font-family:Tahoma;" label="Eind datum" />
</s:else>
<s:set name="dt_life" value="displayType['life']" />
<s:if
test="(#dt_life == null) || (#dt_life.name() == null)">
<s:set name="dtv_life" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_life" value="#dt_life.name()" />
</s:else>
<s:if test="(#dtv_life == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_life == 'LABEL')">
<s:label id="life" key="artikelNummerDetails.life" class="formTable2"
label="Life" />
</s:elseif>
<s:elseif test="(#dtv_life == 'READONLY')">
<s:textfield id="life" key="artikelNummerDetails.life" class="formTable"
label="Life" readonly="true" />
</s:elseif>
<s:else>
<sx:autocompleter name="artikelNummerDetails.life"
id="artikelNummerDetails.life" list="%{artikelNummerAgent.lifeList}"
keyValue="%{artikelNummerDetails.life}"
emptyOption="true" resultsLimit="-1" dropdownWidth="300"
cssStyle="width:300px; font-family:Tahoma;" label="Life" />
</s:else>
<s:set name="dt_enteredAt" value="displayType['enteredAt']" />
<s:if
test="(#dt_enteredAt == null) || (#dt_enteredAt.name() == null)">
<s:set name="dtv_enteredAt" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_enteredAt" value="#dt_enteredAt.name()" />
</s:else>
<s:if test="(#dtv_enteredAt == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_enteredAt == 'LABEL')">
<s:label id="enteredAt" key="artikelNummerDetails.enteredAt"
class="formTable2" label="Entered at" />
</s:elseif>
<s:elseif test="(#dtv_enteredAt == 'READONLY')">
<s:textfield id="enteredAt" key="artikelNummerDetails.enteredAt"
class="formTable" label="Entered at" readonly="true" />
</s:elseif>
<s:else>
<s:hidden name="artikelNummerDetails.enteredAt"
value="%{artikelNummerDetails.enteredAt}"/>
</s:else>
<s:set name="dt_enteredBy" value="displayType['enteredBy']" />
<s:if
test="(#dt_enteredBy == null) || (#dt_enteredBy.name() == null)">
<s:set name="dtv_enteredBy" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_enteredBy" value="#dt_enteredBy.name()" />
</s:else>
<s:if test="(#dtv_enteredBy == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_enteredBy == 'LABEL')">
<s:label id="enteredBy" key="artikelNummerDetails.enteredBy"
class="formTable2" label="Entered by" />
</s:elseif>
<s:elseif test="(#dtv_enteredBy == 'READONLY')">
<s:textfield id="enteredBy" key="artikelNummerDetails.enteredBy"
class="formTable" label="Entered by" readonly="true" />
</s:elseif>
<s:else>
<s:hidden name="artikelNummerDetails.enteredBy.id" value="%{
artikelNummerDetails.enteredBy.id}"/>
</s:else>
<s:set name="dt_lastModifiedAt" value="displayType['lastModifiedAt']" />
<s:if
test="(#dt_lastModifiedAt == null) || (#dt_lastModifiedAt.name() ==
null)">
<s:set name="dtv_lastModifiedAt" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_lastModifiedAt" value="#dt_lastModifiedAt.name()" />
</s:else>
<s:if test="(#dtv_lastModifiedAt == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_lastModifiedAt == 'LABEL')">
<s:label id="lastModifiedAt" key="artikelNummerDetails.lastModifiedAt"
class="formTable2" label="Last modified at" />
</s:elseif>
<s:elseif test="(#dtv_lastModifiedAt == 'READONLY')">
<s:textfield id="lastModifiedAt" key="artikelNummerDetails.lastModifiedAt"
class="formTable" label="Last modified at" readonly="true" />
</s:elseif>
<s:else>
</s:else>
<s:set name="dt_lastModifiedBy" value="displayType['lastModifiedBy']" />
<s:if
test="(#dt_lastModifiedBy == null) || (#dt_lastModifiedBy.name() ==
null)">
<s:set name="dtv_lastModifiedBy" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_lastModifiedBy" value="#dt_lastModifiedBy.name()" />
</s:else>
<s:if test="(#dtv_lastModifiedBy == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_lastModifiedBy == 'LABEL')">
<s:label id="lastModifiedBy" key="artikelNummerDetails.lastModifiedBy"
class="formTable2" label="Last modified by" />
</s:elseif>
<s:elseif test="(#dtv_lastModifiedBy == 'READONLY')">
<s:textfield id="lastModifiedBy" key="artikelNummerDetails.lastModifiedBy"
class="formTable" label="Last modified by" readonly="true" />
</s:elseif>
<s:else>
</s:else>
<s:set name="dt_dtState" value="displayType['dtState']" />
<s:if
test="(#dt_dtState == null) || (#dt_dtState.name() == null)">
<s:set name="dtv_dtState" value="'EDIT'" />
</s:if>
<s:else>
<s:set name="dtv_dtState" value="#dt_dtState.name()" />
</s:else>
<s:if test="(#dtv_dtState == 'HIDDEN')">
</s:if>
<s:elseif test="(#dtv_dtState == 'LABEL')">
<s:label id="dtState" key="artikelNummerDetails.dtState"
class="formTable2" label="Dt state" />
</s:elseif>
<s:elseif test="(#dtv_dtState == 'READONLY')">
<s:textfield id="dtState" key="artikelNummerDetails.dtState"
class="formTable" label="Dt state" readonly="true" />
</s:elseif>
<s:else>
<s:textfield name="artikelNummerDetails.dtState" class="formTable"
cssStyle="width:300px; font-family:Tahoma;" label="Dt state" />
</s:else>
<s:submit value="Submit" />
</s:form>
<jsp:include page="<%=styleVar+\"-footing.jsp\"%>" />
Re: How to use tabbed panels with
Posted by roger <ro...@googlemail.com>.
Hi
I can confirm that it is possible to use the sj:tabbedpanel tag within a
form. I've included a working example below (sorry about the size). One
important thing to note is that you need to set theme="simple" on your
s:form tag. If you use the default style which uses tables for layout and
look at the generated HTML you will see that your tabs are totally screwed.
(This also happens if you design a s:form using the <fieldset> tag)
HTH
Regards
<s:form action="edit-rma" theme="simple" method="POST">
<s:hidden name="rmaId" value="%{rmaId}"/>
<s:if test="%{fieldErrors.size > 0}">
You have errors on this page
</s:if>
<sj:tabbedpanel id="localtabs" selectedTab="0">
<sj:tab id="tab1" target="productDetails" label="Product"/>
<sj:tab id="tab2" target="customerDetails" label="Customer" />
<sj:tab id="tab3" target="repairDetails" label="Repair"/>
<sj:tab id="tab4" target="shippingDetails" label="Shipping"/>
<div id="productDetails">
<table>
<tr>
<td class="tdLabel"><label for="rma.serialNumber">Serial
Number:</label></td>
<td><s:textfield name="rma.serialNumber" value="%{rma.serialNumber}"/>
<s:fielderror><s:param>rma.serialNumber</s:param></s:fielderror></td>
</tr>
<tr>
<td class="tdLabel"><label for="rma.UnitNumber">Unit Number:</label></td>
<td><s:textfield name="rma.unitNumber" value="%{rma.unitNumber}"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="rma.faultDescription.comment">Fault
Description:</label>
<td><s:textarea cols="45" name="rma.faultDescription.comment"
value="%{rma.faultDescription.comment}"/>
</tr>
</table>
<table id="requestItems">
<tr>
<th>Requested Items.</th>
<th>Value.</th>
</tr>
<tr class="requested">
<td><s:textfield cssClass="description"
name="rma.requestedItems[0].description"
value="%{rma.requestedItems[0].description}"/></td>
<td><s:textfield name="rma.requestedItems[0].value"
value="%{rma.requestedItems[0].value}"/>
<s:fielderror><s:param>rma.requestedItems[0].value</s:param></s:fielderror></td>
<td id="cell1" onclick="clickFunction(this)"> resources/images/plus.jpeg
</td>
</tr>
<tr class="requested">
<td><s:textfield cssClass="description"
name="rma.requestedItems[1].description"
value="%{rma.requestedItems[1].description}"/></td>
<td><s:textfield name="rma.requestedItems[1].value"
value="%{rma.requestedItems[1].value}"/>
<s:fielderror><s:param>rma.requestedItems[1].value</s:param></s:fielderror></td>
<td id="cell2" onclick="clickFunction(this)"> resources/images/plus.jpeg
</td>
</tr>
<tr class="requested">
<td><s:textfield cssClass="description"
name="rma.requestedItems[2].description"
value="%{rma.requestedItems[2].description}"/></td>
<td><s:textfield name="rma.requestedItems[2].value"
value="%{rma.requestedItems[2].value}"/>
<s:fielderror><s:param>rma.requestedItems[2].value</s:param></s:fielderror></td>
<td id="cell3" onclick="clickFunction(this)"> resources/images/plus.jpeg
</td>
</tr>
<tr class="requested">
<td><s:textfield cssClass="description"
name="rma.requestedItems[3].description"
value="%{rma.requestedItems[3].description}"/></td>
<td><s:textfield name="rma.requestedItems[3].value"
value="%{rma.requestedItems[3].value}"/>
<s:fielderror><s:param>rma.requestedItems[3].value</s:param></s:fielderror></td>
<td id="cell4" onclick="clickFunction(this)"> resources/images/plus.jpeg
</td>
</tr>
<tr class="requested">
<td><s:textfield cssClass="description"
name="rma.requestedItems[4].description"
value="%{rma.requestedItems[4].description}"/></td>
<td><s:textfield name="rma.requestedItems[4].value"
value="%{rma.requestedItems[4].value}"/>
<s:fielderror><s:param>rma.requestedItems[4].value</s:param></s:fielderror></td>
<td id="cell5" onclick="clickFunction(this)"> resources/images/plus.jpeg
</td>
</tr>
<tr class="requested">
<td><s:textfield cssClass="description"
name="rma.requestedItems[5].description"
value="%{rma.requestedItems[5].description}"/></td>
<td><s:textfield name="rma.requestedItems[5].value"
value="%{rma.requestedItems[5].value}"/>
<s:fielderror><s:param>rma.requestedItems[5].value</s:param></s:fielderror></td>
<td></td>
</tr>
</table>
</div>
<div id="customerDetails">
<table>
<tr>
<td class="tdLabel"><s:label for="rma.customer.memberId">Forum
Id:</s:label></td>
<td><s:textfield name="rma.customer.memberId"
value="%{rma.customer.memberId}"/>
<s:fielderror><s:param>rma.customer.memberId</s:param></s:fielderror>
<td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.memberName">Forum
Name:</s:label></td>
<td><s:textfield name="rma.customer.memberName"
value="%{rma.customer.memberName}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.firstName">First
Name:</s:label></td>
<td><s:textfield name="rma.customer.firstName"
value="%{rma.customer.firstName}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.lastName">Last
Name:</s:label></td>
<td><s:textfield name="rma.customer.lastName"
value="%{rma.customer.lastName}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.address.addressLine1">Address
Line 1:</s:label></td>
<td><s:textfield name="rma.customer.address.addressLine1"
value="%{rma.customer.address.addressLine1}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.address.addressLine2">Address
Line 2:</s:label></td>
<td><s:textfield name="rma.customer.address.addressLine2"
value="%{rma.customer.address.addressLine2}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.address.addressLine3">Address
Line 3:</s:label></td>
<td><s:textfield name="rma.customer.address.addressLine3"
value="%{rma.customer.address.addressLine3}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.address.addressLine4">Address
Line 4:</s:label></td>
<td><s:textfield label="Address Line 4"
name="rma.customer.address.addressLine4"
value="%{rma.customer.address.addressLine4}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.address.addressLine5">Address
Line 5:</s:label></td>
<td><s:textfield name="rma.customer.address.addressLine5"
value="%{rma.customer.address.addressLine5}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.phoneNumber.number">Phone
Number:</s:label></td>
<td><s:textfield label="Phone Number" name="rma.customer.phoneNumber.number"
value="%{rma.customer.phoneNumber.number}"/>
<s:fielderror><s:param>rma.customer.phoneNumber.number</s:param></s:fielderror><td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.customer.email">Email
Address:</s:label></td>
<td><s:textfield label="Email Address" name="rma.customer.email"
value="%{rma.customer.email}"/>
<s:fielderror><s:param>rma.customer.email</s:param></s:fielderror></td>
</tr>
</table>
</div>
<div id="repairDetails">
<table>
<tr>
<td class="tdLabel"><s:label for="warrantyDate">Warranty/Shipping Status
(dd.mm.yyyy):</s:label></td>
<td><s:textfield name="warrantyDate" value="%{warrantyDate}"/>
<s:fielderror><s:param>warrantyDate</s:param></s:fielderror>
</td>
</tr>
<tr>
<td class="tdLabel"><s:label for="goodInDate">Goods In Date
(dd.mm.yyyy):</s:label></td>
<td><s:textfield name="goodsInDate" value="%{goodsInDate}"/>
<s:fielderror><s:param>goodsInDate</s:param></s:fielderror>
</td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.goodsInDescription.comment">Goods In
condition:</s:label></td>
<td><s:textarea label="Goods In Condition" cols="45"
name="rma.goodsInDescription.comment"
value="%{rma.goodsInDescription.comment}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.repairDetails.comment">Repair
Details:</s:label></td>
<td><s:textarea cols="45" name="rma.repairDetails.comment"
value="%{rma.repairDetails.comment}"/><td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.repairCost">Cost of
Repairs</s:label></td>
<td><s:textfield name="rma.repairCost" value="%{rma.repairCost}"/>
<s:fielderror><s:param>rma.repairCost</s:param></s:fielderror>
</td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.generalRemarks.coment">Other
Comments:</s:label></td>
<td><s:textarea cols="45" name="rma.generalRemarks.comment"
value="%{rma.generalRemarks.comment}"/></td>
</tr>
</table>
</div>
<div id="shippingDetails">
<table>
<tr>
<td class="tdLabel"><s:label for="shippingDate">Shipping Date
(dd.mm.yyyyy):</s:label></td>
<td><s:textfield name="shippingDate" value="%{shippingDate}"/></td>
<s:fielderror><s:param>shippingDate</s:param></s:fielderror>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.courier">Courier:</s:label></td>
<td><s:textfield name="rma.courier" value="%{rma.courier}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.trackerNumber">Tracker
No:</s:label></td>
<td><s:textfield name="rma.trackerNumber"
value="%{rma.trackerNumber}"/></td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.shippingCost">Shipping
Cost:</s:label></td>
<td><s:textfield name="rma.shippingCost" value="%{rma.shippingCost}"/>
<s:fielderror><s:param>rma.shippingCost</s:param></s:fielderror>
</td>
</tr>
<tr>
<td class="tdLabel"><s:label for="rma.shippingComment">Shipping
Comment:</s:label></td>
<td><s:textarea cols="45" name="rma.shippingComment.comment"
value="%{rma.shippingComment.comment}"/></td>
</tr>
</table>
</div>
</sj:tabbedpanel>
<sj:submit cssClass="vMenuItemText" targets="rmaDetails"
onCompleteTopics="reloadGrid"/>
</s:form>
--
View this message in context: http://struts.1045723.n5.nabble.com/How-to-use-tabbed-panels-with-s-form-tp4910789p4920522.html
Sent from the Struts - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: How to use tabbed panels with
Posted by Stefaan Somers <st...@gmail.com>.
No, I didn't yet. But unfortunateley I need to use the s2-jquery lib for
some of my functionalities.
I will check a bit further to be able to pinpoint the problem better
On 18 October 2011 09:26, Maurizio Cucchiara <mc...@apache.org> wrote:
> @Stefaan,
> what theme are you using? Maybe, b/c the interaction with: a) xhtml
> theme b) s2-jquery lib.
> Did you try the example provided by Li running the simple theme w/o
> s2-jquery lib?
>
> Twitter :http://www.twitter.com/m_cucchiara
> G+ :https://plus.google.com/107903711540963855921
> Linkedin :http://www.linkedin.com/in/mauriziocucchiara
>
> Maurizio Cucchiara
>
>
>
> On 18 October 2011 08:11, Stefaan Somers <st...@gmail.com> wrote:
> > Hi Li,
> >
> > thnks for answering. Try to use the struts-tags in your JSP, and you will
> > see that it will not work.
> >
> > Greetings,
> >
> > Stefaan Somers
> >
> > On 18 October 2011 08:03, Li Ying <li...@gmail.com> wrote:
> >
> >> Hi, I wrote a simple sample include only pure html + javascript.
> >>
> >> It works pretty well.
> >>
> >> I believe the same thing will works for JSP,
> >> because JSP will produce HTML,
> >> so the finally result displayed by the browser will be [pure html +
> >> javascript].
> >>
> >> Here is my sample:
> >>
> >> ===========================================
> >>
> >> <html>
> >>
> >> <head>
> >> <meta http-equiv="Pragma" content="no-cache">
> >> <meta http-equiv="CONTENT-TYPE" content="text/html;
> charset=UTF-8">
> >>
> >> <link rel="stylesheet" type="text/css"
> >> href="../css/jQueryUI/jquery-ui-1.8.15.redmond.css"/>
> >> <link rel="stylesheet" type="text/css"
> >> href="../css/jQueryUI/jquery-ui-custom.css"/>
> >> <link rel="stylesheet" type="text/css" href="../css/common.css"/>
> >>
> >> <script type="text/javascript"
> >> src="../js/lib/jquery-1.6.2.min.js"></script>
> >> <script type="text/javascript"
> >> src="../js/lib/jquery-ui-1.8.15.custom.min.js"></script>
> >>
> >> <script type="text/javascript"
> >> src="../js/pageCommon/common.js"></script>
> >>
> >> <title>Test</title>
> >> </head>
> >>
> >> <body>
> >>
> >> <div class="main">
> >> <form action="http://www.google.com/search">
> >> <div class="mainTab">
> >> <ul>
> >> <li><a href="#tab_01"><span
> >> class="tabTitle">Tab_01</span></a></li>
> >> <li><a href="#tab_02"><span
> >> class="tabTitle">Tab_02</span></a></li>
> >> <li><a href="#tab_03"><span
> >> class="tabTitle">Tab_03</span></a></li>
> >> </ul>
> >> <div id="tab_01">
> >> Q: <input name="q" />
> >> </div>
> >> <div id="tab_02">
> >> Age: <input name="age" />
> >> </div>
> >> <div id="tab_03">
> >> <input type="submit" value="Search" />
> >> </div>
> >> </div>
> >> </form>
> >> </div>
> >>
> >> </body>
> >>
> >> <script type="text/javascript">
> >> function initTabs() {
> >> $(".mainTab").tabs();
> >> }
> >>
> >> initTabs();
> >> </script>
> >> </html>
> >>
> >> ===========================================
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> >> For additional commands, e-mail: user-help@struts.apache.org
> >>
> >>
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
Re: How to use tabbed panels with
Posted by Maurizio Cucchiara <mc...@apache.org>.
@Stefaan,
what theme are you using? Maybe, b/c the interaction with: a) xhtml
theme b) s2-jquery lib.
Did you try the example provided by Li running the simple theme w/o
s2-jquery lib?
Twitter :http://www.twitter.com/m_cucchiara
G+ :https://plus.google.com/107903711540963855921
Linkedin :http://www.linkedin.com/in/mauriziocucchiara
Maurizio Cucchiara
On 18 October 2011 08:11, Stefaan Somers <st...@gmail.com> wrote:
> Hi Li,
>
> thnks for answering. Try to use the struts-tags in your JSP, and you will
> see that it will not work.
>
> Greetings,
>
> Stefaan Somers
>
> On 18 October 2011 08:03, Li Ying <li...@gmail.com> wrote:
>
>> Hi, I wrote a simple sample include only pure html + javascript.
>>
>> It works pretty well.
>>
>> I believe the same thing will works for JSP,
>> because JSP will produce HTML,
>> so the finally result displayed by the browser will be [pure html +
>> javascript].
>>
>> Here is my sample:
>>
>> ===========================================
>>
>> <html>
>>
>> <head>
>> <meta http-equiv="Pragma" content="no-cache">
>> <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
>>
>> <link rel="stylesheet" type="text/css"
>> href="../css/jQueryUI/jquery-ui-1.8.15.redmond.css"/>
>> <link rel="stylesheet" type="text/css"
>> href="../css/jQueryUI/jquery-ui-custom.css"/>
>> <link rel="stylesheet" type="text/css" href="../css/common.css"/>
>>
>> <script type="text/javascript"
>> src="../js/lib/jquery-1.6.2.min.js"></script>
>> <script type="text/javascript"
>> src="../js/lib/jquery-ui-1.8.15.custom.min.js"></script>
>>
>> <script type="text/javascript"
>> src="../js/pageCommon/common.js"></script>
>>
>> <title>Test</title>
>> </head>
>>
>> <body>
>>
>> <div class="main">
>> <form action="http://www.google.com/search">
>> <div class="mainTab">
>> <ul>
>> <li><a href="#tab_01"><span
>> class="tabTitle">Tab_01</span></a></li>
>> <li><a href="#tab_02"><span
>> class="tabTitle">Tab_02</span></a></li>
>> <li><a href="#tab_03"><span
>> class="tabTitle">Tab_03</span></a></li>
>> </ul>
>> <div id="tab_01">
>> Q: <input name="q" />
>> </div>
>> <div id="tab_02">
>> Age: <input name="age" />
>> </div>
>> <div id="tab_03">
>> <input type="submit" value="Search" />
>> </div>
>> </div>
>> </form>
>> </div>
>>
>> </body>
>>
>> <script type="text/javascript">
>> function initTabs() {
>> $(".mainTab").tabs();
>> }
>>
>> initTabs();
>> </script>
>> </html>
>>
>> ===========================================
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>> For additional commands, e-mail: user-help@struts.apache.org
>>
>>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: How to use tabbed panels with
Posted by Stefaan Somers <st...@gmail.com>.
Hi Li,
thnks for answering. Try to use the struts-tags in your JSP, and you will
see that it will not work.
Greetings,
Stefaan Somers
On 18 October 2011 08:03, Li Ying <li...@gmail.com> wrote:
> Hi, I wrote a simple sample include only pure html + javascript.
>
> It works pretty well.
>
> I believe the same thing will works for JSP,
> because JSP will produce HTML,
> so the finally result displayed by the browser will be [pure html +
> javascript].
>
> Here is my sample:
>
> ===========================================
>
> <html>
>
> <head>
> <meta http-equiv="Pragma" content="no-cache">
> <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
>
> <link rel="stylesheet" type="text/css"
> href="../css/jQueryUI/jquery-ui-1.8.15.redmond.css"/>
> <link rel="stylesheet" type="text/css"
> href="../css/jQueryUI/jquery-ui-custom.css"/>
> <link rel="stylesheet" type="text/css" href="../css/common.css"/>
>
> <script type="text/javascript"
> src="../js/lib/jquery-1.6.2.min.js"></script>
> <script type="text/javascript"
> src="../js/lib/jquery-ui-1.8.15.custom.min.js"></script>
>
> <script type="text/javascript"
> src="../js/pageCommon/common.js"></script>
>
> <title>Test</title>
> </head>
>
> <body>
>
> <div class="main">
> <form action="http://www.google.com/search">
> <div class="mainTab">
> <ul>
> <li><a href="#tab_01"><span
> class="tabTitle">Tab_01</span></a></li>
> <li><a href="#tab_02"><span
> class="tabTitle">Tab_02</span></a></li>
> <li><a href="#tab_03"><span
> class="tabTitle">Tab_03</span></a></li>
> </ul>
> <div id="tab_01">
> Q: <input name="q" />
> </div>
> <div id="tab_02">
> Age: <input name="age" />
> </div>
> <div id="tab_03">
> <input type="submit" value="Search" />
> </div>
> </div>
> </form>
> </div>
>
> </body>
>
> <script type="text/javascript">
> function initTabs() {
> $(".mainTab").tabs();
> }
>
> initTabs();
> </script>
> </html>
>
> ===========================================
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
Re: How to use tabbed panels with
Posted by Li Ying <li...@gmail.com>.
Hi, I wrote a simple sample include only pure html + javascript.
It works pretty well.
I believe the same thing will works for JSP,
because JSP will produce HTML,
so the finally result displayed by the browser will be [pure html + javascript].
Here is my sample:
===========================================
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="../css/jQueryUI/jquery-ui-1.8.15.redmond.css"/>
<link rel="stylesheet" type="text/css"
href="../css/jQueryUI/jquery-ui-custom.css"/>
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<script type="text/javascript" src="../js/lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
src="../js/lib/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="../js/pageCommon/common.js"></script>
<title>Test</title>
</head>
<body>
<div class="main">
<form action="http://www.google.com/search">
<div class="mainTab">
<ul>
<li><a href="#tab_01"><span class="tabTitle">Tab_01</span></a></li>
<li><a href="#tab_02"><span class="tabTitle">Tab_02</span></a></li>
<li><a href="#tab_03"><span class="tabTitle">Tab_03</span></a></li>
</ul>
<div id="tab_01">
Q: <input name="q" />
</div>
<div id="tab_02">
Age: <input name="age" />
</div>
<div id="tab_03">
<input type="submit" value="Search" />
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript">
function initTabs() {
$(".mainTab").tabs();
}
initTabs();
</script>
</html>
===========================================
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: How to use tabbed panels with
Posted by Stefaan Somers <st...@gmail.com>.
Hi Li,
I knew this web-site too. But it only shows sections of text, and not
sections of forms.
I tried it, but <s:form> will throw all strange elements to set it above.
Just try with a simple form and you will see that it won't work.
On 18 October 2011 02:25, Li Ying <li...@gmail.com> wrote:
> JQuery UI can help you.
>
>
> Here is the home page:
> http://jqueryui.com/
>
> Here is the tab ui demo:
> http://jqueryui.com/demos/tabs/
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>
Re: How to use tabbed panels with
Posted by Li Ying <li...@gmail.com>.
JQuery UI can help you.
Here is the home page:
http://jqueryui.com/
Here is the tab ui demo:
http://jqueryui.com/demos/tabs/
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org