Prime Community Forum

Posted: **03 Jul 2012, 04:00**

Hi,

I have a problem with codeMirror

This is the web application structure:

My main JSF is separate to north (header) west and center, the west include the menu bar and center include all the other JSF's.
In one of the center "children" JSF's add dialog + codeMirror in order to view xml files from db.

The problem: while I am navigate between menus I can see that the codeMirror is working only after refreshing the page meaning at the first time opening the dialog I will get the xml in a text area and after refreshing the screen I would get the correct output format (with color's)

Some code example:

Code: Select all

 <p:panelGrid id="commandPanel" styleClass="buttonPanel" columns="1">
            <p:row>
                <p:commandButton id="hButton" 
                                 value="View ..." 
                                 icon="ui-icon-search"
                                 oncomplete="hWidgetVar.show()"
                                 update=":mainForm:hForm:hXml"
                                 style="float: left"/>
                <p:commandButton id="uButton" 
                                 value="View ..." 
                                 icon="ui-icon-search"
                                 oncomplete="uWidgetVar.show()"
                                 update=":mainForm:uForm:uXml"
                                 style="float: right"/>
            </p:row>
        </p:panelGrid>
        <f:verbatim><br/></f:verbatim>
        <p:dialog id="hDialog" 
                  widgetVar="hWidgetVar"
                  header="Detail" 
                  width="800"  
                  position="left"
                  appendToBody="true"
                  dynamic="true">
            <h:form id="hForm" prependId="false">
                <pe:codeMirror id="hXml"
                               mode="xml" 
                               readOnly="true" 
                               theme="eclipse" 
                               value="#{Bean.selectedObject.xml}" 
                               lineNumbers="false"
                               lineWrapping="false"/> 
            </h:form>
        </p:dialog>
        <p:dialog id="uDialog" 
                  header="Detail" 
                  widgetVar="uWidgetVar"  
                  width="800" 
                  hideEffect="clip"
                  position="right"
                  appendToBody="true"
                  dynamic="true"> 
            <h:form id="uForm" prependId="false">
                <pe:codeMirror id="uXml" 
                               mode="xml" 
                               readOnly="true" 
                               theme="eclipse" 
                               value="#{Bean.selectedObject.xml}"
                               lineNumbers="false"
                               lineWrapping="true"/>  
            </h:form>
        </p:dialog>

Any suggestion ?

Thanks

Posted: **12 Jul 2012, 07:35**

Hi!

I think you should update the form around your codeMirror component, not the codeMirror itself. Try this in your button updates:

Code: Select all

update=":mainForm:hForm"
...
 update=":mainForm:uForm"

Prime Community Forum

codeMirror is working only after refreshing the page.

codeMirror is working only after refreshing the page.

Re: codeMirror is working only after refreshing the page.