xpages - how to set a scope variable from client side javascript?

Question

I'm trying to set an XPages scope variable from Client side JavaScript. I have an XPage which contains several sections which are shown or hidden using Dojo. On this XPage I have a button which executes some server side JavaScript. Once the SSJS behind the button executes, the section of the XPage which is visible by default is again visible, rather than the section which was visible immediately prior to the button being clicked. I would like the section which was visible prior to the button being clicked to also be visible after the SSJS behind the button has executed.

To do this I have thought of using a scope variable - use client side JavaScript to calculate which section of the XPage which is currently visible, set this value in a scope variable and read the scope variable in the onClientLoad event of the XPage to again make this section visible (and hide all other sections). However, I have found no way of setting a scope variable from client side JavaScript. I have tried adding

var xyz = "#{javascript:viewScope.put('sectionDisplay','Section')}"

to the onClick client event of the button but this sets the scope variable regardless of whether the button is clicked or not.

Before XPages, I would have used the querystring to pass variable from one page to another. How can I now do this?

Answer 1

One other approach: perhaps you don't need the scope variable at all, if you just want to hide something, you can set it's style property to "display:none".

For example, you have this div: <xp:div id="mydiv">...</xp:div>

Then you can use the following CSJS in a button:

dojo.byId("#{id:mydiv}").style.display="none"

Answer 2

You cannot set the CSJS variable this way: If you add this code to your CSJS, it will be calculated before sent to the browser. That is why the variable is set regardless of a click onto the button.

But you can add some SSJS code to your button which sets the viewScope variable. You can send the value from the browser with a parameter as described here: http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_events_and_partial_or_full_refresh#Run+a+partial+update+from+client+javascript

EDIT:

You can access different parameters with the param object in SSJS. F.e. if you add the parameter value in your CSJS...

XSP.partialRefreshGet( id, {
    params: { 'value': 'some string'}
});

... you can access the parameter in SSJS like this:

param.get("value");

Answer 3

Depends on your use case. If you want to set it with partial/full refresh, you can simply put Hidden edit into XP, bind it to anyScope.variable_name and set its value with CSJS:

  var field = document.getElementById("#{id:hiddenInput1}");
  field.value = "new Value";

Every refresh will submit its value to model and will be available in scoped variable.

Another option is to use event handler anywhere with SSJS to set scoped variable based on hidden input value or submitted value, as stated in Sven's answer.

Answer 4

XSP.partialRefreshGet( id, {
    params: { 'value': 'some string'}
});

... you can access the parameter in SSJS like this:

param.get("value");

I am passing a UNID from a grid to a dialog box. I can get param.get('unid') but I can't get it set to the document datasource unid. So that the fields would populate with values from backend document. There are many fields so I'd like to somehow populate that datasource without having to write values in each field. How can I get the document datasource to recognize the param.unid? I am trying with a hidden input as you described but the value is not submitted either. Is that possible?

XSP.partialRefreshGet(dialogId,
{
    params: xspParams,
    onStart: function(){
        //dojo.style(loadingGifId,'display','block');
        XSP.getElementById("#{id:inputText1}").innerHTML = unid; //not working
        XSP.getElementById("#{id:inputText1}").value = unid; //not working either
    },
    onComplete: function(){
        dijit.byId(dialogId).show();
        //dojo.style(loadingGifId,'display','none');    
}});


<xp:panel id="dialog">
    <input id="inputText1"
        value="#{javascript:sessionScope.personUNID;}">
    </input>

    <xp:this.data>
        <xp:dominoDocument var="docPerson" action="editDocument"
            formName="fUserName">
            <xp:this.documentId><![CDATA[#{javascript:sessionScope.personUNID ;}]]></xp:this.documentId>
        </xp:dominoDocument>
    </xp:this.data>

    <xp:inputText id="cfParams"
        value="#{javascript:param.get('unid');}">
    </xp:inputText>
</xp:panel>