syntaxhighlighter CSS not working

Question

I add the syntaxhighlighter library to my project in order to view XML files.

For some reason when using the syntaxhighlighter outside the dialog then I can see the CSS style but not within the dialog.

This is not working:

<p:commandButton id="button" 
                         value="View" 
                         oncomplete="hdsWidgetVar.show()"
                         update=":mainForm:hdsForm"
                         disabled="#{object.disableButton}"
                         icon="ui-icon-search"
                         style="float: right"/>
    </p:row>
</p:panelGrid>
<f:verbatim><br/></f:verbatim>
<p:dialog id="hdsDialog" 
          widgetVar="hdsWidgetVar"
          header="HDS" 
          width="800"
          showEffect="clip"
          hideEffect="clip"
          position="left"
          appendTo="@(body)"
          dynamic="true" >
    <h:form id="hdsForm">
        <pre class="brush: xml">    
            <h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
        </pre>
    </h:form>

</p:dialog>

I cannot use dynamic="false" since I need to refresh the dialog text when user press the button.

Is there any workaround ?

Thanks

Answer 1

are you nesting forms?? using appendTo is a workaround to avoid nesting. i would not use it, if i can.

this should work, if you can separate forms:

<h:form>    
    <p:panelGrid>
        <p:row>
            <p:commandButton id="button" 
                value="View" 
                oncomplete="hdsWidgetVar.show()"
                process="@form"
                update="@this :hdsForm"
                disabled="#{object.disableButton}"
                icon="ui-icon-search"
                style="float: right"/>

        </p:row>
    </p:panelGrid>
</h:form>

<f:verbatim><br/></f:verbatim>

<p:dialog id="hdsDialog" 
          widgetVar="hdsWidgetVar"
          header="HDS" 
          width="800"
          showEffect="clip"
          hideEffect="clip"
          position="left"
          appendTo="@(body)"
          dynamic="true" >
    <h:form id="hdsForm">
        <pre class="brush: xml">    
            <h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
        </pre>
    </h:form>

</p:dialog>

if you can't, this should go:

<h:form>    
    <p:panelGrid id="panelGrid">
        <p:row>
            <p:commandButton id="button" 
                value="View" 
                oncomplete="hdsWidgetVar.show()"
                process="panelGrid"
                update="@this hdsForm"
                disabled="#{object.disableButton}"
                icon="ui-icon-search"
                style="float: right"/>

        </p:row>
    </p:panelGrid>

    <f:verbatim><br/></f:verbatim>

    <p:dialog id="hdsDialog" 
              widgetVar="hdsWidgetVar"
              header="HDS" 
              width="800"
              showEffect="clip"
              hideEffect="clip"
              position="left">
        <h:panelGroup id="hdsForm">
            <pre class="brush: xml">    
                <h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
            </pre>
        </h:panelGroup>

    </p:dialog>
</h:form>

but maybe it's not a problem related to dynamic. more likely it's lib-to-work-with-ajax related.

Answer 2

this will solve the problem:

  <p:commandButton id="button" 
            value="View" 
            oncomplete="SyntaxHighlighter.highlight();udmWidgetVar.show();"
            process="@form"
            update="@this :hdsForm"
            disabled="#{object.disableButton}"
            icon="ui-icon-search"
            style="float: right"/>

and:

 <p:dialog id="hdsDialog" 
          widgetVar="hdsWidgetVar"
          header="HDS" 
          width="800"
          showEffect="clip"
          hideEffect="clip"
          position="left"
          appendTo="@(body)"
          dynamic="false">
    <h:panelGroup id="hdsForm" >
        <pre class="brush: xml">    
            <h:outputText value="#{object.selectedObjectSet.hds}" escape="true" />
        </pre>
    </h:panelGroup>