The best place to *find* answers to programming/development questions, imo, however it's the *worst* place to *ask* questions (if your first question/comment doesn't get any up-rating/response, then u can't ask anymore questions--ridiculously unrealistic), but again, a great reference for *finding* answers.

My Music (Nickleus)

20121121

richfaces 3, rich:modalPanel, google chrome bug, Uncaught TypeError: Cannot read property 'action' of null framework.pack.js:2797

i was testing our application and it worked fine in firefox, but when i tested it inside the chrome web browser i got the following error (in the chrome debug console) when i clicked on a form button inside a rich:modalPanel:

Uncaught TypeError:
Cannot read property 'action' of null framework.pack.js:2797
A4J.Query framework.
pack.js:2797
A4J.AJAX.P
repareQuery framework.pack.js:2566
A4J.AJAX.S
ubmit framework.pack.js:2596
onclick
here are the contents of framework.pack.js, line 2797 (irrelevant to the solution, but just for info):
this._acti
onUrl=(this._form.action)?this._form.action:this._form


my original code looked like this:
<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:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j" markupType="xhtml"
    contentType="text/html" lang="no">
    ...
    <a4j:outputPanel id="detailPanelHolder">
        <a4j:outputPanel>
            <h:form id="detailsForm">
                ...
                <h:panelGrid>
                    <a4j:commandButton ajaxSingle="true"
                        value="#{msg['label.new.priceset']}"
                        reRender="addPanel"
                        oncomplete="#{rich:component('addPanel')}.show();"
                        action="#{...}"/>
                </h:panelGrid>
                ...
            </h:form>

            <rich:modalPanel id="addPanel">
                ...
                <h:form id="add">
                    ...
                    <h:panelGrid columns="3" styleClass="dataTable"
                        footerClass="centered">
                        ...
                        <f:facet name="footer">
                            <h:panelGroup>
                                <a4j:commandButton ajaxSingle="true"
                                    value="#{msg['label.new.step']}"
                                    reRender="addPanel" id="addPanelNStepBtn"
                                    action="#{...}"/>
                            </h:panelGroup>
                        </f:facet>
                    </h:panelGrid>
                </h:form>
            </rich:modalPanel>
            ...
        </a4j:outputPanel>
    </a4j:outputPanel>
</ui:composition>



i didn't write the code myself and maybe the problem was partially due to the particular tag nesting, idk.


the solution that worked for me:
create an h:panelGroup inside the modalpanel h:form and rerender that panelGroup instead of the whole modalpanel, like this (changes in bold):

<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:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j" markupType="xhtml"
    contentType="text/html" lang="no">
    ...
    <a4j:outputPanel id="detailPanelHolder">
        <a4j:outputPanel>
            <h:form id="detailsForm">
                ...
                <h:panelGrid>
                    <a4j:commandButton ajaxSingle="true"
                        value="#{msg['label.new.priceset']}"
                        reRender="addPricesetPanel"
                        oncomplete="#{rich:component('addPanel')}.show();"
                        action="#{...}"/>
                </h:panelGrid>
                ...
            </h:form>

            <rich:modalPanel id="addPanel">
                ...
                <h:form id="add">
                    <h:panelGrid id="addPricesetPanel">
                        ...
                        <h:panelGrid columns="3" styleClass="dataTable"
                            footerClass="centered">
                            ...
                            <f:facet name="footer">
                                <h:panelGroup>
                                    <a4j:commandButton ajaxSingle="true"
                                        value="#{msg['label.new.step']}"
                                        reRender="addPricesetPanel" id="addPanelNStepBtn"
                                        action="#{...}"/>
                                </h:panelGroup>
                            </f:facet>
                        </h:panelGrid>
                    </h:panelGrid>
                </h:form>
            </rich:modalPanel>
            ...
        </a4j:outputPanel>
    </a4j:outputPanel>
</ui:composition>

1 comment:

  1. Thank You very much! This actually solved my problem as well, as I had the exact same behaviour with a modal panel. If I had found this on Stack Overflow I would have +1 it.

    ReplyDelete