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

    Switching Tabs in tabpanel dynamically using AJAX

    Sainath Nair Newbie
      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
          Bernard Labno Master

          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>
          

          • 2. Re: Switching Tabs in tabpanel dynamically using AJAX
            Sainath Nair Newbie

            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");
            }
            }
            • 3. Re: Switching Tabs in tabpanel dynamically using AJAX
              Bernard Labno Master

              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 Newbie
                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"
                • 5. Re: Switching Tabs in tabpanel dynamically using AJAX
                  Bernard Labno Master

                  Are you sure you have CyGroupHome annotated with @Name(cyGroupHome) ? Also notice create=true in :


                  @In(create=true)
                  private CyGroupHome cyGroupHome;

                  • 6. Re: Switching Tabs in tabpanel dynamically using AJAX
                    Sainath Nair Newbie

                    Yes dear , I do have CyGroupHome annotated with @Name(cyGroupHome) .




                    • 7. Re: Switching Tabs in tabpanel dynamically using AJAX
                      Sainath Nair Newbie
                      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!
                      • 8. Re: Switching Tabs in tabpanel dynamically using AJAX
                        Bernard Labno Master

                        Post your classes and facelet again, it works for me.

                        • 9. Re: Switching Tabs in tabpanel dynamically using AJAX
                          Sainath Nair Newbie

                          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;
                              }
                          }
                          • 10. Re: Switching Tabs in tabpanel dynamically using AJAX
                            Bernard Labno Master

                            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 ?

                            • 11. Re: Switching Tabs in tabpanel dynamically using AJAX
                              Sainath Nair Newbie
                              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 :)
                              • 12. Re: Switching Tabs in tabpanel dynamically using AJAX
                                Sainath Nair Newbie
                                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]

                                • 13. Re: Switching Tabs in tabpanel dynamically using AJAX
                                  Sainath Nair Newbie
                                  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 ?
                                  • 14. Re: Switching Tabs in tabpanel dynamically using AJAX
                                    Sainath Nair Newbie

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

                                    1 2 Previous Next