带有h：commandButton的动态消息内容的确认对话框

Question

I am trying to create a confirmation dialog for a commandButton in JSF. The message I want to display is "Are you sure you want to deploy to #{deployBean.environmentName}?", where #{deployBean.environmentName} refers to the selected value of h:selectOneMenu.

I used plain JavaScript in the 'onClick' parameter of h:commandButton to do this. The XHTML code is as follows:

<h:commandButton id="deploy" 
value="Deploy" 
action="#{deployBean.deployButtonAction}" 
disabled="#{(!deployBean.checkDeploy and (deployBean.stageComplete or deployBean.stageRunning)) or (deployBean.stageStart)}" 
onclick="return confirm('Are you sure you want to deploy to #{deployBean.environmentName}?');" > 
    <f:ajax event="keyup" render="status output detail"/>
</h:commandButton>

But the environment name does not get displayed in the confirmation dialog box.

Please let me know what I'm missing in my code. Or please let me know if there is a better way to do this.

Answer 1

Hmmm, that won't work because the plain JavaScript bit you mentioned. =) You see, JavaScript does not know anything about that #{deployBean.environmentName} syntax -- this EL expression is evaluated in the server only once, before the page loads, and that's it.

Even if you do an AJAX update in your h:selectOneMenu trying to make sure the value in deployBean is set when the button is clicked, the onclick will be evaluated only in the client side. So, you can do what you want with plain JavaScript & DOM manipulation, maybe something like this:

onclick="return confirm('Are you sure you want to deploy to ' +
         document.getElementsByClassName('environment-name')[0].value + '?');"

And give your h:selectOneMenu a styleClass="environment-name" .

That should do what you want.

Of course, if you happen to use jQuery in your app, you can make it a bit shorter:

onclick="return confirm('Are you sure you want to deploy to ' +
         $('.environment-name').val() + '?');"