Refreshing dialog title

[honyk]

Hello Everyone,

I use the following code. The main idea is to update all dialog strings when the value of the language combo is changed. It works fine, except the dialog title. It is outside of the form so I must to specify its id directly in the render parameter. As you can see, this ID is different from the one specified (dialog-tile) as the final title id is overriden by some default value (ui-dialog-title) and my ID is used as a suffix. Although this final ID (ui-dialog-title-dialog-title) matches the ID in the document, it isn't updated. I don't know if it is problem of jsf.js library or Primefaces component or any bug in my source...

Code: Select all

    <p:dialog id="dialog-title" header="#{msg['pageTitle']}" widgetVar="settingsDialog" modal="true" height="200" resizable="false">
        <h:form>
            <h:outputText value="#{msg['intro']}" />
            <h:selectOneMenu value="#{language.localeCode}"
                             onchange="jsf.ajax.request(this, event, {render:'ui-dialog-title-dialog-title @form'}); return false;"
                             valueChangeListener="#{language.countryLocaleCodeChanged}">
                <f:selectItems value="#{language.countriesInMap}" />
            </h:selectOneMenu>
            <h:commandButton value="Submit" action="index.xhtml?faces-redirect=true&includeViewParams=true"/>
        </h:form>
    </p:dialog>

When this form is submitted and this dialog is opened again, that title is displayed correctly. It 'only' doesn't refresh immediately :-(

Thanks for any hint.
Regards,
Jan

[burferd]

Try moving the form outside the dialog.

Code: Select all

    <h:form>
        <p:dialog id="dialog-title" header="#{msg['pageTitle']}" widgetVar="settingsDialog" modal="true" height="200" resizable="false">
            <h:outputText value="#{msg['intro']}" />
            <h:selectOneMenu value="#{language.localeCode}"
                             onchange="jsf.ajax.request(this, event, {render:'ui-dialog-title-dialog-title @form'}); return false;"
                             valueChangeListener="#{language.countryLocaleCodeChanged}">
                <f:selectItems value="#{language.countriesInMap}" />
            </h:selectOneMenu>
            <h:commandButton value="Submit" action="index.xhtml?faces-redirect=true&includeViewParams=true"/>
        </p:dialog>
    </h:form>

[honyk]

I've tried that, but it behaves strange - dialog disappears just after any combobox change, but the page is still in disabled state (due to 'modality' of my dialog). But that script is performed as dialog texts are in the selected language after next run.

[honyk]

I've replaced that old-style onchange code:

Code: Select all

onchange="jsf.ajax.request(this, event, {render:'ui-dialog-title-dialog-title @form'}); return false;"

with the following one:

Code: Select all

<p:ajax update="ui-dialog-title-dialog-title @form" />

But no progress.

[smallya]

I had the same problem. Then I wrapped the dialog in a p:outputPanel and using Ajax updated the panel. That did the trick.

<p:commandLink actionListner=".." update"dialogPanel">

<p:outputPanel id="dialogPanel">
<p:dialog id="dialog-title" header="#{msg['pageTitle']}" widgetVar="settingsDialog" modal="true" height="200" resizable="false">
<h:form>
<h:outputText value="#{msg['intro']}" />
<h:selectOneMenu value="#{language.localeCode}"
onchange="jsf.ajax.request(this, event, {render:'ui-dialog-title-dialog-title @form'}); return false;"
valueChangeListener="#{language.countryLocaleCodeChanged}">
<f:selectItems value="#{language.countriesInMap}" />
</h:selectOneMenu>
<h:commandButton value="Submit" action="index.xhtml?faces-redirect=true&includeViewParams=true"/>
</h:form>
</p:dialog>
</p:outputPanel>

[honyk]

Thanks for this hint, but it is not applicable in my case as I need to trigger that update on a value change. Maybe there is a possibility to modify your code somehow, but I am not so experienced to do this.

I suspect that not refreshing is a bug and I'd prefer fixing it than look for any dirty workaround...

Jan

[callahan]

You could try the following:

- use p:ajax for the h:selectOneMenu as shown here: http://www.primefaces.org/showcase/ui/pprSelect.jsf
- update the dialogs content rather than the dialog itself with the same p:ajax (updating dialogs isn't a good idea as stated in other posts)
- give the p:ajax a listener that puts the new title in a callback parameter as shown here http://www.primefaces.org/showcase/ui/dialogLogin.jsf
- in the oncomplete Javascript handler for p:ajax the callback parameter will hold the new title and jQuery can be used to set the dialog title

I don't think there is a simpler way to do it!

[bumble.bee]

I've got this working in my app using a mix of AJAX and jQuery as callahan indicated:

Code: Select all

<p:dialog header="My Value: #{myBean.myValue}" id="myDlgId" widgetVar="myDlgWidgetVar">
    <h:form id="myForm">
        <h:selectOneMenu id="mySelector" value="#{myBean.myValue}">
            <f:selectItems value="#{myBean.myValueChoices}"/>
            <p:ajax event="valueChange" process="@this" update="@form" oncomplete="jQuery('#ui-dialog-title-myDlgId').text('My Value: ' + document.getElementById('myForm:mySelector').value);"/>
        </h:selectOneMenu>
    </h:form>
</p:dialog>

[honyk]

Thanks guys, namely bumble.bee, who shows me the example that I was able to understand
All the time I thought there must be a more straightforward way to achieve this, but I gave it up.
I finally got it to work, so thanks again for your patience with a newbie like me.

Jan

[healeyb]

this works... I'm not saying it's the best way, but work it does (at
the moment anyway!):

Code: Select all

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>
<h:outputScript library="primefaces" name="jquery/ui/jquery-ui.js" target="head"/>

<p:commandLink ...
  update="mapAjaxTarget"
  oncomplete="jQuery('#mapdialog').dialog
      ('option','title','#{var.location.name}'); dlgmap.show(); return false;">
</p:commandLink>

<p:dialog id="mapdialog" widgetVar="dlgmap" ...>
  <h:panelGroup id="mapAjaxTarget">
...

Brendan.