CODEWITHSUNDEEP
javascriptjsfautocompleteprimefacesrendering
faissal
faissal

Reputation: 261

Primefaces components not rendering properly

I'm working on a Spring3/JSF2/Primefaces3.5 application.

The problem I'm facing is that some Primefaces components (p:autocomplete, p:calendar and p:selectOneMenu) are not rendering properly in the browser. The problem occurs randomly in many pages. If I reload the page (via F5 key for example) the problem is corrected and the component is rendered as it should.

.xhtml file :

<ui:composition  
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:p="http://primefaces.org/ui">

    <h:form id="mainForm">

    ....


    <f:validateBean>
        <table class="listing form" cellpadding="0" cellspacing="0">
                ...
                (some p:inputText elements)
                ...

            <tr class="bg">
                <td class="first"><strong>Marque :</strong></td>
                <td class="last">
                    <p:autoComplete
                        label="Marque"
                        value="#{montureBean.marque}"
                        completeMethod="#{montureBean.autocompleteMarque}"
                        var="item"
                        itemLabel="#{item.intitule}"
                        itemValue="#{item}"
                        converter="#{montureBean.marqueConverter}"
                        dropdown="true"/>

                    <p:commandLink onclick="dlgMarque.show()"  immediate="true">
                        <img src="/images-main/add-icon.gif" border="0" alt="Ajouter Marque" class="img-action"/>
                    </p:commandLink>
                </td>
            </tr>                                    
            <tr class="bg">
                <td class="first"><strong>Matière :</strong></td>
                <td class="last">
                    <p:autoComplete
                        label="Matière"
                        value="#{montureBean.matiere}"
                        completeMethod="#{montureBean.autocompleteMatiere}"
                        var="item"
                        itemLabel="#{item.intitule}"
                        itemValue="#{item}"
                        converter="#{montureBean.matiereConverter}"
                        dropdown="true"/>

                    <p:commandLink onclick="dlgMatiere.show()"  immediate="true">
                        <img src="/images-main/add-icon.gif" border="0" alt="Ajouter Matière" class="img-action"/>
                    </p:commandLink>
                </td>
            </tr>                                    

        </table>
    </f:validateBean>

    </h:form>
</ui:composition>

Here is an example of generated code for p:autocomplete :

Wrong rendering :

    <span aria-multiline="false" aria-disabled="false" role="textbox" id="mainForm:j_id_q_1i" class="ui-autocomplete">
        <input id="mainForm:j_id_q_1i_input" name="mainForm:j_id_q_1i_input" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-left" autocomplete="off" value="" type="text">
        <input id="mainForm:j_id_q_1i_hinput" name="mainForm:j_id_q_1i_hinput" autocomplete="off" value="0" type="hidden">
        <button class="ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only" type="button">
            <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
            <span class="ui-button-text">&nbsp;</span>
        </button>
        <div id="mainForm:j_id_q_1i_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div>
    </span>

Correct rendering :

        <span id="mainForm:j_id_q_1i" class="ui-autocomplete">
            <input id="mainForm:j_id_q_1i_input" name="mainForm:j_id_q_1i_input" type="text" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-left" autocomplete="off" value="" />
            <input id="mainForm:j_id_q_1i_hinput" name="mainForm:j_id_q_1i_hinput" type="hidden" autocomplete="off" value="0" />
            <button class="ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only" type="button">
                <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
                <span class="ui-button-text">&nbsp;</span>
            </button>
            <div id="mainForm:j_id_q_1i_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div>
        </span>
        <script id="mainForm:j_id_q_1i_s" type="text/javascript"><!--
            $(function(){PrimeFaces.cw('AutoComplete','widget_mainForm_j_id_q_1i',{id:'mainForm:j_id_q_1i'});});
        //--></script>

I noticed that :

Is it a bug or something wrong I did. NB : I'm using p:layout for page organisation and f:validation to validate input elements.

Upvotes: 1

Views: 4556

Answers (1)

faissal
faissal

Reputation: 261

Finally SOLVED!

It was really hard to find out what is wrong with my project as it was happening randomly and affecting many pages.

The problem is that I’m using a “p:panel” updated using the src attribute of “ui:include” like this :

<p:panel id="mainPanel">
    <ui:include src="#{menuBean.mainContentPage}.xhtml" />
</p:panel>

The menu element just sets the value of “mainContentPage” with the name of the content file (ex. addClient.xhtml, addStore.xhtml ) to show and updates the “mainPanel” via ajax update.

Every .xhtml content file has its own form and components.

The mistake I was making is that all forms in different files had the same id. 

  <h:form id="mainForm">
          ….commandlinks and components….
  </h:form>

I thought it wasn’t really important to give a different name to every form, because the panel is updated with the new content. Unfortunately, the system keeps the form name somewhere and the rendering of the components is compromised.

I changed the id of all forms in my .xhtml files and all works fine.

BIG advice to everyone: USE DIFFERENT ID FOR EVERY FORM IN YOUR JSF PROJET.

Upvotes: 3

Related Questions