p:dialog onShow not firing

[RElliott]

I would like to set the focus on a specific field on my PrimeFaces Mobile (PFM) dialog when the dialog is displayed. I have used the following javascript function to perform this task in the past on non dialog forms.

Code: Select all

function setFocus(elementId) {
    document.getElementById(elementId).focus();
}

I display the dialog using a commandButton on my main form as shown below.

Code: Select all

<p:commandButton
    icon="ui-icon-search"
    styleClass="ui-nodisc-icon elis-button"
    onclick="PF('group-search-dialog').show();" />

I thought I would be able to call the setFocus javascript function using the onShow attribute as shown below:

Code: Select all

<p:dialog
    header="Enter Last Name Search"
    widgetVar="person-search-dialog"
    onShow="setFocus('j_idt5:person-search-form:last-name-input')"
    modal="true">

Unfortunately, PFM does not call setFocus when the dialog is displayed. Is this one of those things that works in PrimeFaces but not PFM?

[kukeltje]

Does a plain alert work?
onShow -> onshow?

[RElliott]

I have the following function in my javascript library.

Code: Select all

function logMessage(message) {
    console.log(message);
}

In order to debug, I modified my p:dialog as shown below and performed the following test:

• 1. Displayed Dialog
  2. Clicked on last-name inputText field
  3. Closed Dialog

The Chrome console only reported the "Clicked on last name field" message.
I then changed the onShow and onHide to onshow and onhide and repeated the test. Unfortunately, the results where the same in that the Chrome console only reported the "Clicked on last name field" message.

Code: Select all

<p:dialog
    header="Enter Last Name Search"
    widgetVar="person-search-dialog"
    onShow="logMessage('Person Search Dialog is visible.')"
    onHide="logMessage('Person Search Dialog is not visible.')"
    modal="true">
    <h:form id="person-search-form">
        <p:panelGrid
            columns="3"
            styleClass="elis-grid3">
            <p:outputLabel
                value="Last Name:"
                for="last-name" />
            <p:inputText
                id="last-name"
                value="#{elisUserCreater.lastName}"
                label="Last Name Search"
                onclick="logMessage('Clicked the last name field.')">
            </p:inputText>
            <p:commandButton
                icon="ui-icon-search"
                styleClass="ui-nodisc-icon elis-button"
                actionListener="#{elisUserCreater.updatePeople}"
                oncomplete="PF('person-search-dialog').hide(); PF('person-select-dialog').show();"
                process="@form"
                update="@form :#{p:component('people-table')}" />
        </p:panelGrid>
    </h:form>
</p:dialog>

Just to be sure, I change logMesssage to alert in the above code and repeated the test. Again the only event that fired was the click event on the last-name inputText field.

[kukeltje]

might be that the onshow/hide do not fire when the dialog javascript api is used. You can check that in dialog.js in the source