Databases
StackOverflow2013
Postsdbo
POPrimefaces components not rendering properly
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPrimefaces components not rendering properly
    primarykey
    data
    text
    <p>I'm working on a Spring3/JSF2/Primefaces3.5 application.</p> <p>The problem I'm facing is that some Primefaces components <strong>(p:autocomplete, p:calendar and p:selectOneMenu)</strong> 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.</p> <p>.xhtml file :</p> <pre><code>&lt;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"&gt; &lt;h:form id="mainForm"&gt; .... &lt;f:validateBean&gt; &lt;table class="listing form" cellpadding="0" cellspacing="0"&gt; ... (some p:inputText elements) ... &lt;tr class="bg"&gt; &lt;td class="first"&gt;&lt;strong&gt;Marque :&lt;/strong&gt;&lt;/td&gt; &lt;td class="last"&gt; &lt;p:autoComplete label="Marque" value="#{montureBean.marque}" completeMethod="#{montureBean.autocompleteMarque}" var="item" itemLabel="#{item.intitule}" itemValue="#{item}" converter="#{montureBean.marqueConverter}" dropdown="true"/&gt; &lt;p:commandLink onclick="dlgMarque.show()" immediate="true"&gt; &lt;img src="/images-main/add-icon.gif" border="0" alt="Ajouter Marque" class="img-action"/&gt; &lt;/p:commandLink&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="bg"&gt; &lt;td class="first"&gt;&lt;strong&gt;Matière :&lt;/strong&gt;&lt;/td&gt; &lt;td class="last"&gt; &lt;p:autoComplete label="Matière" value="#{montureBean.matiere}" completeMethod="#{montureBean.autocompleteMatiere}" var="item" itemLabel="#{item.intitule}" itemValue="#{item}" converter="#{montureBean.matiereConverter}" dropdown="true"/&gt; &lt;p:commandLink onclick="dlgMatiere.show()" immediate="true"&gt; &lt;img src="/images-main/add-icon.gif" border="0" alt="Ajouter Matière" class="img-action"/&gt; &lt;/p:commandLink&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/f:validateBean&gt; &lt;/h:form&gt; &lt;/ui:composition&gt; </code></pre> <p>Here is an example of generated code for p:autocomplete :</p> <p>Wrong rendering :</p> <pre><code> &lt;span aria-multiline="false" aria-disabled="false" role="textbox" id="mainForm:j_id_q_1i" class="ui-autocomplete"&gt; &lt;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"&gt; &lt;input id="mainForm:j_id_q_1i_hinput" name="mainForm:j_id_q_1i_hinput" autocomplete="off" value="0" type="hidden"&gt; &lt;button class="ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only" type="button"&gt; &lt;span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"&gt;&lt;/span&gt; &lt;span class="ui-button-text"&gt;&amp;nbsp;&lt;/span&gt; &lt;/button&gt; &lt;div id="mainForm:j_id_q_1i_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"&gt;&lt;/div&gt; &lt;/span&gt; </code></pre> <p>Correct rendering :</p> <pre><code> &lt;span id="mainForm:j_id_q_1i" class="ui-autocomplete"&gt; &lt;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="" /&gt; &lt;input id="mainForm:j_id_q_1i_hinput" name="mainForm:j_id_q_1i_hinput" type="hidden" autocomplete="off" value="0" /&gt; &lt;button class="ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only" type="button"&gt; &lt;span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"&gt;&lt;/span&gt; &lt;span class="ui-button-text"&gt;&amp;nbsp;&lt;/span&gt; &lt;/button&gt; &lt;div id="mainForm:j_id_q_1i_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"&gt;&lt;/div&gt; &lt;/span&gt; &lt;script id="mainForm:j_id_q_1i_s" type="text/javascript"&gt;&lt;!-- $(function(){PrimeFaces.cw('AutoComplete','widget_mainForm_j_id_q_1i',{id:'mainForm:j_id_q_1i'});}); //--&gt;&lt;/script&gt; </code></pre> <p>I noticed that : </p> <ul> <li>many attributes are assigned to the first span rather than the input,</li> <li>the two input elements are not closed in the wrong rendering <strong>></strong> in place of <strong>/></strong></li> <li>there is a <strong>javascript function</strong> that appears in the correct rendering that we can't see in the wrong case.</li> </ul> <p>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.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USfaissal
    1. USfaissal
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPrimefaces components not rendering properly
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you show xhtml page? Especially `DOCTYPE` definition.
      singulars
      1. POPrimefaces components not rendering properly
      1. USpartlov
    2. COThanks for your interest I updated my post
      singulars
      1. POPrimefaces components not rendering properly
      1. USfaissal
    3. COI still don't see `DOCTYPE` definition. Find it somewhere in top-level page as this is part of some template. If it doesn't exist put `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">` as first line of top-level `xhtml` file.
      singulars
      1. POPrimefaces components not rendering properly
      1. USpartlov
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload