XPages - get value of a textarea inside a dialog

Question

I am trying unsuccessfully to get a handle on the text input into a textarea which is contained inside an xe:dialog. The xe:dialog "pops up" after a button on the XPage is pressed. Here is my code:

<xe:dialog id="InputDialog5">

<xe:this.title>"Input Dialog</xe:this.title>
<xp:panel>
<xp:inputTextarea id="InputTextBox5" value="#{document1.InputTextBox5}"
cols="60" rows="4"></xp:inputTextarea>
</xp:panel>
<xe:dialogButtonBar id="dialogButtonBar15">
<xp:button value="OK" id="button37">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="true">
<xp:this.action><![CDATA[#{javascript:
var request = facesContext.getExternalContext().getRequest();
var header = request.getHeader("Cookie");
var inputVal = @Middle(header,"InputTextBox5=",";")

setJobReferenceStatus(40,inputVal);
var redirect = "window.location='"+applicationScope.get("redirect")+"'";
facesContext.getViewRoot().postScript(redirect);}]]></xp:this.action>
<xp:this.script><![CDATA[
var inputvalue = document.getElementById("InputTextBox5").value;
alert("inputvalue = " + inputvalue);
dojo.cookie("InputTextBox5", inputvalue, { expires: 1 });
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xe:dialogButtonBar>
</xe:dialog>

My idea is to get the value of the textarea, add it to a dojo cookie, retrieve the cookie value using SSJS and then pass the value to an SSJS function. However the code fails already at the stage of getting the textarea value. The line "alert("inputvalue = " + inputvalue);" is not executed and the dialog box remains "frozen". Any idea on how I can resolve this problem?

Answer 1

In order to get a handle on the text field from client side Javascript you have to know the XPages generated client id. So do this instead to calculate the id inside your CSJS:

<xp:this.script><![CDATA[
  var inputvalue = document.getElementById("#{id:InputTextBox5}").value;
  alert("inputvalue = " + inputvalue);
  dojo.cookie("InputTextBox5", inputvalue, { expires: 1 });
]]></xp:this.script>

Answer 2

at a quick look I can already see two major obstacles:

a) document.getElementById(..) probably won't do (in fact I never really tried). I use XSP.getElementById(..) or dojo.byId(..) instead

b) your textarea will never ever have the same id at runtime that it has at design time. Just use your browser's sourcecode viewer, and you will see what I mean. Therefor we have to instructions to calculate the resulting ids for us like this:

dojo.byId("#{id:InputTextBox5}")

this then will be translated into the client object's final id so that your client side script code can find it.

Didn't look at the rest of your code, so I can't tell if there are more potential problems in there