Ajax-updated pe:documentViewer renders twice and has irresponsive buttons

Question

I have primefaces datatable

<p:dataTable ...>
    <p:ajax event="rowSelect" update=":previewDataForm" oncomplete="$('.previewDataModal').modal();"
            immediate="true">
    </p:ajax>
</p:dataTable>

And modal in which I would like to display PDF (b tag is bootsfaces)

<b:modal id="previewDataModal" title="Preview" styleClass="orderPreviewModalPseudoClass">
    <h:form id="previewDataForm">
        <pe:documentViewer height="550" value="#{contentStreamHelperBean.pdfFromFileSystem}" rendered="#{previewMB.renderPreview}"/>
    </h:form>
</b:modal>

I have problem with displaying it in case on ajax call from dataTable. When I have attribute update=":previewDataForm" on rowSelect then PDF is displayed, but it's rendered twice and buttons in documentViewer are not responding. When I remove update=":previewDataForm" from rowSelect documentViewer is not rendered.

When I invoke this modal with commandButton, then everything works ok. Is there way how to render previewDataForm only once and then display it from ajax?

Thanks

Answer 1

The modal is rendered when the page is displayed first. In other words, it's rendered before the user has selected a row. I suggest you add a rendered= condition to the <h:form> tag to prevent the initial rendering of the PDF file. My guess is that the PDF file can't be rendered because no row has been selected (typically a NullPointerException), and that this leads to follow-up errors.