Search code examples
javascriptxpages

CSJS Not Updating Computed Field

I very seldom use CSJS, but in this case I'm trying to get it to update a computed field. While the field has the value updated so that I can get to it with an alert, I can't get it to display on the XPage. I've tried using an editable field with Read Only checked, but the data doesn't appear on the XPage with it either.

I'm invoking a CSJS script block and I know you need to refresh to get the change to display, but I've put a panel around the field and tried it with that and a div. Neither produces an error message, but nor does the value display.

I'm using XSP.partialRefreshGet("#{id:remaining}"); right after I set the value. I've tried it with .partialRefreshPost, which doesn't do anything, but then I read in Stephan Wissel's post "Meet the XSP object" that "...For POST the refreshId must point to a form..." and this XPage is not attached to a form. I have also tried using the parameter immediate:true.

I've read Teresa Monahan's article "Client Side JavaScript Libraries in XPages", Serdar Basegmez's "10 Mistakes You and Every XPages Developer Make", anything I can find on the web, as well as the "Mastering XPages" book. I know this shouldn't be that difficult, so I believe I'm just missing something (probably stupid).

Per the above, neither the XPage, nor the particular field is bound to any form. This is on the first tab of a tabbed table, and is just displaying a calculated value. The value does not need to be saved anywhere.

I am invoking the function in my agent by using onChange="Testing()" in dijit/form/ComboBox selections because I want the tiny boxes and again, I don't need the field values after the selections have been made.

Here is the simple text in the script block:

function Testing(){
  XSP.getElementById("#{id:remainingPts}").value = "100";
  var rewards = XSP.getElementById("#{id:numOfRewards1}").value;
  alert("rewards:  " + rewards);
  XSP.partialRefreshGet("#{id:remaining}");
}

And here is what the field looks like:

<xp:panel id="remaining">
   <xp:text escape="true" id="remainingPts" value="0">
   </xp:text>
</xp:panel>

What am I doing incorrectly?

Solution

  • I think xp:text is rendered as a <span> tag, in which case you need to set .innerHtml() instead of .value(). See How do I change the text of a span element in JavaScript. You won't need to refresh to see the change.