Sossenbinder Sossenbinder - 6 months ago 16x
Javascript Question

Update a dialog without closing it immediately?

I am currently trying to open a dialog via Javascript, and updating its elements before I show the dialog itself.

The trigger is coming from primefaces push, so I try to handle it all via JavaScript.

Basically the flow is like this:

<p:socket onMessage="onStart" channel="/votingStartChannel" />

The socket triggers following JavaScript:

function onStart(data)

Note that my dialog is called

The other function,
is triggering the following:

<p:remoteCommand name="votingDialogRefresh" update="votingDialogWindow" />

which 'should' update the dialog before it will be shown.

However, as soon as I start the flow, the dialog opens and closes immediately. I get to see it like for 3 seconds. Also, as far as I could see in this tiny timespan, there hasn't been any update, as all fields were still not filled with the expected values.

What am I doing wrong here?


Your technical problem is caused because <p:remoteCommand> performs an "fire and forget" asynchronous (ajax) request. Basically, after the ajax request is sent, the votingDialogRefresh() function call immediately returns and advances to PF('votingDialogWindow').show() which shows the dialog. But when the ajax response of <p:remoteCommand> later returns, it will update the entire dialog. Apparently, the default state of the dialog is "closed". So it will visually get closed immediately. The default state is by the way controllable by visible attribute; if you had used visible="#{facesContext.postback}", it would have appeared opened, this is only poor for user experience because the enduser would see the dialog's content getting updated/changed shortly after it's opened, which is confusing.

You should be opening the dialog when the ajax request is completed and the dialog is updated, not before firing the ajax request nor before update of dialog. You can achieve this by just moving the call into oncomplete of <p:remoteCommand>.

function onStart(data) {

    <p:remoteCommand name="votingDialogRefresh" update="votingDialogWindow" 
        oncomplete="PF('votingDialogWindow').show()" />