1 2 Previous Next 15 Replies Latest reply on Apr 28, 2011 4:07 PM by zehsilva

Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 6, 2009 8:20 AM

Click HELP for text formatting instructions. Then edit this text and check the preview.
Hi folks,
I am facing an issue while switching tabs. I have a tabpanel with 2 tabs
1.Grid View
2.Edit View

In Grid View ,
I have individual group entries as follows:
1     1     9/23/09 12:00:00 PM     1     sasadasd     saiaia     9/23/09 12:00:00 PM     1     View Edit
2     1     9/26/09 12:00:00 PM     0     adsdasd     1wsdasda     9/25/09 12:00:00 PM     2     View Edit

wherein View and Edit are commandLinks ...
I want that when i click on Edit link
1. It should redirect me to my Edit Page for that particular entry
2.The Edit View tab should be highlighted..

my JS code:

<script type="text/javascript">

    function cyEdit() {
     var callback = function(result) {
     document.getElementById("helloResult").innerHTML=result;
     };

   Seam.Component.getInstance("htmlTabPanelbean").
     cyEdit(callback);
    }
</script>

Thanks in advance

1. Re: Switching Tabs in tabpanel dynamically using AJAX

blabno Oct 7, 2009 12:23 PM (in response to sainath_nair)
Read this first :http://raogkalavar.blogspot.com/2008/09/switching-tab-via-javascript-in.html .

Now, switching tabs via javascript works only if switchType is client. If you want to use AJAX I suggest this :

<rich:tabpanel id="tabpanel" switchtype="ajax" selectedTab="#{backingBean.editMode ? 'edit' : 'grid'"> <rich:tab name="grid"> <a4j:commandLink value="edit" action="#{backingBean.enterEditMode}" reRender="tabpanel"/> </rich:tab> <rich:tab name="edit"> ... </rich:tab> </rich:tabPanel>
Actions
2. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 12:49 PM (in response to sainath_nair)

Thanks for the reply dear ,
Can you also suggest me the backingbean code as I think there is something wrong with my backingbean code??

THe backingbean code is as follows:

package com.qseap.cygnus.action;
import org.jboss.seam.annotations.remoting.WebRemote;
import java.awt.event.ActionEvent;

import javax.faces.context.FacesContext;
import org.jboss.seam.annotations.AutoCreate;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.framework.EntityHome;
import org.richfaces.component.html.HtmlTabPanel;

import com.qseap.cygnus.model.CyGroup;

@AutoCreate
@Name("htmlTabPanelbean")
public class HtmlTabPanelbean extends EntityHome<CyGroup> {


public HtmlTabPanelbean getTabPanel() {
          return tabPanel;
     }

     public void setTabPanel(HtmlTabPanelbean tabPanel) {
          this.tabPanel = tabPanel;
     }

     public String getSelectedTab() {
          return selectedTab;
     }

     public void setSelectedTab(String selectedTab) {
          this.selectedTab = selectedTab;
     }

private HtmlTabPanelbean tabPanel;

private String selectedTab;

@WebRemote
//backing bean method for the component TabPanel
public void cyEdit (){

     FacesContext context = FacesContext.getCurrentInstance();
     context.getViewRoot();

     tabPanel.setSelectedTab("cyEdit");
}
}
Actions

3. Re: Switching Tabs in tabpanel dynamically using AJAX

blabno Oct 7, 2009 1:07 PM (in response to sainath_nair)

I forgot you have to select entity you want to edit first, so :

<a4j:commandLink value="edit" action="#{backingBean.edit(cygroup)}" reRender="tabpanel"/>

@Scope(ScopeType.CONVERSATION)
@Name("backingBean")
public class BackingBean {

    @In(create=true)
    private CyGroupHome cyGroupHome;
    private boolean editMode;

    public void edit(CyGroup entity) {
        cyGroupHome.setInstance(entity);
        editMode = true;
    }

    public boolean isEditMode() {
        return editMode;
    }
}

@Name("cyGroupHome")
public class CyGroupHome extends EntityHome<CyGroup> {}

4. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 3:11 PM (in response to sainath_nair)

Thanks for the reply dear.

Hey is there anything else we need to add in the backingbean?

The method seems to be throwing 2 exceptions :

Caused by org.jboss.seam.RequiredException with message: "@In attribute requires non-null value: backingBean.cyGroupHome"

Caused by javax.el.ELException with message: "/CyGroupWelcome.xhtml @18,109 selectedTab="#{backingBean.editMode ? 'cyEdit' : 'cyGrid'}": Error reading 'editMode' on type com.qseap.cygnus.action.BackingBean_$$_javassist_seam_2"
Actions
5. Re: Switching Tabs in tabpanel dynamically using AJAX

blabno Oct 7, 2009 3:16 PM (in response to sainath_nair)
Are you sure you have CyGroupHome annotated with @Name(cyGroupHome) ? Also notice create=true in :

@In(create=true) private CyGroupHome cyGroupHome;
Actions
6. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 3:20 PM (in response to sainath_nair)

Yes dear , I do have CyGroupHome annotated with @Name(cyGroupHome) .
Actions
7. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 3:22 PM (in response to sainath_nair)

Hey, one more thing to bother

I got this error when i clicked on the edit button:

tabPanel: tab panel [@selectedTab=Grid View] has no enabled or rendered tab with such name. Tab: cyGrid will be used instead!
Actions
8. Re: Switching Tabs in tabpanel dynamically using AJAX

blabno Oct 7, 2009 3:26 PM (in response to sainath_nair)

Post your classes and facelet again, it works for me.
Actions
9. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 3:29 PM (in response to sainath_nair)

CyGroupWelcome.xhtml

<rich:panel>

<rich:tabPanel id="tabPanel" switchType="ajax" selectedTab="#{backingBean.editMode ? 'Edit View' : 'Grid View'}">
    <rich:tab label="Grid View" id="cyGrid">
        <a4j:commandLink value="edit" action="#{backingBean.edit(cyGroup)}" reRender="tabPanel"/>
    </rich:tab>
    <rich:tab label="Edit View" id="cyEdit">
        ...
    </rich:tab>
</rich:tabPanel>
</rich:panel>

BackingBean.java

@Scope(ScopeType.CONVERSATION)
@Name("backingBean")
public class BackingBean {

    @In(create=true)
    private CyGroupHome cyGroupHome;
    private boolean editMode;

    public void edit(CyGroup entity) {
        cyGroupHome.setInstance(entity);
        editMode = true;
    }

    public boolean isEditMode() {
        return editMode;
    }
}
Actions
10. Re: Switching Tabs in tabpanel dynamically using AJAX

blabno Oct 7, 2009 3:33 PM (in response to sainath_nair)
Try :

<rich:tabPanel id="tabPanel" switchType="ajax" selectedTab="#{backingBean.editMode ? 'cyEdit' : 'cyGrid'}">

I don't see CyGroupHome source. Do you still have that @In attribute requires non-null value: backingBean.cyGroupHome exception ?
Actions
11. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 3:33 PM (in response to sainath_nair)

Sorry, this is my grouphome.java file

CyGroupHome.java

@Name("cyGroupHome")
public class CyGroupHome extends EntityHome<CyGroup> {

          public void setCyGroupGrpSqlidentity(Integer id) {
               setId(id);
          }

          public Integer getCyGroupGrpSqlidentity() {
               return (Integer) getId();
          }

          @Override
               protected CyGroup createInstance() {
               CyGroup cyGroup = new CyGroup();
               return cyGroup;
          }

          public void load() {
               if (isIdDefined()) {
                    wire();
               }
          }

          public void wire() {
               getInstance();
          }

          public boolean isWired() {
               return true;
          }

          public CyGroup getDefinedInstance() {
               return isIdDefined() ? getInstance() : null;
          }
}

Thanks a lot for showing interest in my issue :)
Actions
12. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 3:40 PM (in response to sainath_nair)

New Exceptions:

19:07:42,407 WARN [Component] Cannot create Seam component, scope is not active: backingBean(CONVERSATION)
19:07:42,432 SEVERE [lifecycle] JSF1054: (Phase ID: UPDATE_MODEL_VALUES 4, View ID: /CyGroupWelcome.xhtml) Exception thrown during phase execution: javax.faces.event.PhaseEvent[source=com.sun.faces.lifecycle.LifecycleImpl@50e012]
Actions
13. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 3:44 PM (in response to sainath_nair)

Hey one more exception
Caused by javax.servlet.ServletException with message: "/CyGroupWelcome.xhtml @18,109 selectedTab="#{backingBean.editMode ? 'cyEdit' : 'cyGrid'}": Illegal Syntax for Set Operation"

What could be the reason ?
Actions
14. Re: Switching Tabs in tabpanel dynamically using AJAX

sainath_nair Oct 7, 2009 4:10 PM (in response to sainath_nair)

Hey Bernard,
Let me know if you find anything missing in the classes or facelets. :-)
Actions

1 2 Previous Next

Go to original post