Can't get Tabs component working

42 views
Skip to first unread message

Robin Garner

unread,
Sep 3, 2014, 3:28:21 AM9/3/14
to tapestry...@googlegroups.com
I'm not sure what I'm doing wrong, but I can't get the Tabs component to work properly when there's a form in one of the tabs.

I've reduced the problem down to a simple example, code like this:

public class About {
  @Inject Logger logger;
  @Persist @Property private int activeTab;
  @Property private String field1;
}

<html t:type="layout" title="About taptest" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p="tapestry:parameter">
  <t:jquery.tabs t:tabs="tab1,tab2" t:activePanelId="activeTab">
<p:tab1>Tab 1 content</p:tab1>
<p:tab2>
 <t:form t:id="form2">
   <t:errors/>
   <t:textfield t:id="tab2Field1" value="field1"/>
   <input t:type="submit"></input>
 </t:form>
</p:tab2>
  </t:jquery.tabs>
</html>

The page displays correctly initially.  If I just click on the tab headers, the content changes appropriately.

If I click "Tab2", then  "submit", the selected tab in the heading goes back to Tab1, but the content shows Tab2's contents.  Hit "submit" again, and the content follows the tab heading, i.e. we're back to tab1 completely.

If I instrument the setter for activeTab and enable event logging, you see this sequence of events for the Submit button:

[DEBUG] pages.About Dispatch event: ComponentEvent[activate from (self)]
[DEBUG] pages.About Dispatch event: ComponentEvent[prepareForSubmit from form2]
[DEBUG] pages.About Dispatch event: ComponentEvent[prepare from form2]
[DEBUG] pages.About Dispatch event: ComponentEvent[validate from tab2Field1]
[DEBUG] pages.About Dispatch event: ComponentEvent[selected from submit]
[DEBUG] pages.About Dispatch event: ComponentEvent[validate from form2]
[DEBUG] pages.About Dispatch event: ComponentEvent[success from form2]
[DEBUG] pages.About Dispatch event: ComponentEvent[submit from form2]
[DEBUG] pages.About Dispatch event: ComponentEvent[action from form2]
[DEBUG] pages.About Dispatch event: ComponentEvent[activate from (self)]
[DEBUG] pages.About Dispatch event: ComponentEvent[preallocateFormControlNames from (self)]
[DEBUG] pages.About Dispatch event: ComponentEvent[prepareForRender from form2]
[DEBUG] pages.About Dispatch event: ComponentEvent[prepare from form2]
[DEBUG] pages.About Dispatch event: ComponentEvent[toClient from tab2Field1]
[DEBUG] pages.About Dispatch event: ComponentEvent[activate from (self)]
[INFO] pages.About activeTab: 1 -> 0
[DEBUG] pages.About Dispatch event: ComponentEvent[SelectTab from tabs]

What am I doing wrong ?

Version information:

tapestry-core 5.3.7
tapestry5-jquery 3.4.0 and 3.4.1-SNAPSHOT

Regards,
Robin

Emmanuel DEMEY

unread,
Sep 16, 2014, 5:36:10 AM9/16/14
to tapestry...@googlegroups.com
Hi, 

I have just test with the sample from the demo website without any troubles. Do you set/unset the activeTab somewhere in your java code ? 

<html t:type="layoutWithAccordion" 
t:title="jQuery Tabs" 
t:activeElement="1" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p="tapestry:parameter">

<t:jquery.tabs  t:tabs="TabsDemoTabs1,TabsDemoTabs2,TabsDemoTabs3,TabsDemoTabs4" 
t:activePanelId="prop:activePanel">
<p:TabsDemoTabs1>
<h3>Panel 1</h3>
<hr/>
content from block 1
</p:TabsDemoTabs1>
<p:TabsDemoTabs2>
<h3>Panel 2</h3>
<hr/>
content from block 2
</p:TabsDemoTabs2>
<p:TabsDemoTabs3>
<h3>Panel 3</h3>
<hr/>
content from block 3
</p:TabsDemoTabs3>
<p:TabsDemoTabs4>
<h3>Panel 4</h3>
<hr/>
content from block 4
<t:form>
<t:datefield value="sysDate"/>
<input type="submit"/>
</t:form>
</p:TabsDemoTabs4>
</t:jquery.tabs>


</html>

//
// Copyright 2010 GOT5 (GO Tapestry 5)
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

package org.got5.tapestry5.jquery.pages.components;

import java.util.Date;

import org.apache.tapestry5.annotations.PageReset;
import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;

public class DocsJQueryTabs
{
@Persist
@Property
private String activePanel;
@Persist
@Property
private Date sysDate;


public void onActivate(){
if(activePanel == null || activePanel == "") activePanel = "1";
}
public void onSubmit(){
}
}

Manu
Reply all
Reply to author
Forward
0 new messages