How to refer to javascript variable from p:dialog header attribute

Question

I have a variable header_title in java script

<script type="text/javascript">
var dialog_label; 

function update_dialog_label(arg){  
   dialog_label = arg;  
}</script>

Now, here is how I want to use dialog_open

<p:dialog widgetVar="nodeDetail" width="520" header="{dialog_label}">

What is the right way to use dialog_label to set header ?

Thanks.

Answer 1

If you prefer to use a javascript var instead bean property:

jsf code:

<p:dialog id="infoDialog" widgetVar="infoDialog" header="Local title" width="400">
    something
</p:dialog>

<input type="button" value="showDialog" onclick="showDialog()"></input>

code A:

<script type="text/javascript">
var globalTitle = "Global title";

function showDialog(){  
    var header = $("#infoDialog".concat("_title"));
    header.text(globalTitle);
    infoDialog.show();
}
</script>

code B:

<script type="text/javascript">
var globalTitle = "Global title";

function showDialog(){  
    var header = document.getElementById("infoDialog".concat("_title"));
    header.innerHTML = globalTitle;
    infoDialog.show();
}
</script>

and the original title is ignored... you can update globalTitle...

Answer 2

By inspecting the generated code in the browser, I successfully modified the title of the <p:dialog> with the following javascript:

$('span#infoDialog_title.ui-dialog-title').html(globalTitle);

and to display the dialog :

PF('infoDialog').show();

Hope this helps!

Answer 3

I don't believe that you can bind attributes to variables in JavaScript as you have shown. However, if the p:dialog element is like other HTML elements, you may be able to achieve what you want by setting the header directly from JavaScript each time the dialog label is updated. First, give your dialog an ID:

<p:dialog id='dialog' widgetVar="nodeDetail" width="520" header="{dialog_label}">

Now, in your function update_dialog_label(arg) , add the following line at the very end:

nodeDetail.header = dialog_label;

Now, every time your update function is called, the dialog header will be updated. Hope that helps.

EDIT: I'm not familiar with PrimeFaces, but I googled this, and it may get on the right path: http://forum.primefaces.org/viewtopic.php?f=3&t=14538