5 Replies Latest reply on Dec 10, 2015 5:28 AM by markus_n

    rich:tabPanel rendered as (non-clickable) plaintext

    markus_n

      Hi,

       

      I'm currently migrating a legacy project from RichFaces 3.1.6 to 4. My current problem is a rich:tabPanel that does not work. "Not work" means: The headers appear, but have no decoration and are not clickable. The active tab is random (mostly, but not always the first tab) and can not be changed.

      I've stripped down the code to minimum in order to not use any conflicting or old attributes (Yes, I've read the migration guide).

      This is my code:

       

      This is the rendered HTML for tab1:

        tab1  tab1  tab1

       

      I don't know what I'm dowing wrong. But I hope I missed just a small detail :-)

      Theere is a similar problem in this project with rich:dataScroller. I also hope it has a similar cause and I'm able to resolve it using the solution of this problem.

       

      Thanks and Regards,

      Markus

        • 1. Re: rich:tabPanel rendered as (non-clickable) plaintext
          markus_n

          Ooops, my source and rendered HTML disappeared when I clicked "Post" ...

           

          So here is the source:

           

          <h:form enctype="multipart/form-data" id="myTabPanelForm">

          <div id="ContentTab">

            <rich:tabPanel id="myTabPanel" activeItem="#{myUIBean.selectedTab}">

              <rich:tab id="tab1" header="#{bundle.tab1label}">

                <ui:include src="tab1content.xhtml"/>

              </rich:tab>

              <rich:tab id="tab2" header="#{bundle.tab2label}">

                <ui:include src="tab2content.xhtml"/>

              </rich:tab>

              ... a few more ...

            </rich:tabPanel>

          </div>

          </h:form>

           

          And this is the output:

           

          <td id="myTabPanelForm:tab1:header:inactive" class="rf-tab-hdr rf-tab-hdr-inact rf-tab-hdr-top" style="">

            <span class="rf-tab-lbl">tab1</span>

          </td>

          <td id="myTabPanelForm:tab1:header:active" class="rf-tab-hdr rf-tab-hdr-act rf-tab-hdr-top" style="display : none">

            <span class="rf-tab-lbl">tab1</span>

          </td>

          <td id="myTabPanelForm:tab1:header:disabled" class="rf-tab-hdr rf-tab-hdr-dis rf-tab-hdr-top" style="display : none">

            <span class="rf-tab-lbl">tab1</span>

          </td>

          • 2. Re: rich:tabPanel rendered as (non-clickable) plaintext
            michpetrov

            Markus Näher wrote:

             

            Ooops, my source and rendered HTML disappeared when I clicked "Post" ...

            It's weird, I can see it when I go to edit mode but yeah, it's not visible in the post.

             

            Anyway, you're missing resources (i.e. CSS and JavaScript that make it all pretty and clickable), you need to put <h:head> on your page. (This is probably the #1 issue when it comes to something not working)

            • 3. Re: rich:tabPanel rendered as (non-clickable) plaintext
              markus_n

              Hi Michal,

              Thanks for your reply. You're right, the output is missing the RichFaces resources. I've just checked the page source.

               

              But the missing <h:head> being the reason for it appears also weird to me. I did not change the overall page structure during my migration job, and the tabPane worked with 3.1.6. But I'll check this tomorrow. Local time is 19:00 now, time to go home :-)

               

              In between, I'd like to ask if the <h:head> was not so important or even unnecessary in 3.1.6 ?

               

              Thanks,

              Markus

              • 4. Re: rich:tabPanel rendered as (non-clickable) plaintext
                michpetrov

                You're switching from JSF 1.2 to JSF 2.x, there's a number of substantial changes between the two (h:head was introduced in JSF 2.0). I'm not familiar with how the resources were handled in RF 3 but in 4.x we're letting JSF handle it.

                • 5. Re: rich:tabPanel rendered as (non-clickable) plaintext
                  markus_n

                  Hi Michal,

                  I have checked my pages now. You are right, there was no <h:head>, only <head>. Now the tabPane as well as the dataScroller work again.

                   

                  Thank you very much.