Xpages: Calling partial refresh from client side code

Question

[Updated]

Responding to Frank's suggestion:

I can get the code to work [in general] in the client-side javascript - had to modify it a bit:

$("#grid").on("dblclick", "tr", function(e) {
        var grid = $("#grid").data("kendoGrid");
        var unid = grid.dataItem($(this)).unid;
        XSP.partialRefreshGet("#{id:dynamicCustomControl}",{params:{"controlName":"ccFormTicket.xsp", "key":unid}});
        });

So I am sending two parts, the controlName and also the key which is the UNID.

My initial code in the dynamic control was getting a viewScope variable, and not a parameter. I do not know how to grab the params in the code below...

[I may have fouled up Eric's formatting of my code. I forgot about how to do that. I will fix]

<xp:div
        styleClass="col-lg-10"
        id="content">
        <xe:dynamicContent
            id="dynamicCustomControl">
            <xp:this.facets></xp:this.facets>
            <xp:include
                id="customControlInluder">
                <xp:this.pageName>
                    <![CDATA[${javascript:viewScope.controlName|| "ccViewTickets.xsp"}]]>                   
                    <![CDATA[${javascript:param.controlName || "ccViewTickets.xsp"}]]>  
                </xp:this.pageName> 
            </xp:include>
        </xe:dynamicContent>
    </xp:div>

My application uses Kendo UI Grids for my views. The app uses a Xpage with a dynamic content control to load content (see below).

The button to create new form sets the viewScope variable to the custom control and does the partial refresh. This works just fine.

I need to do the same thing when editing an existing record, but also pass in a requestScope var "key" with the unid of the document.

In the client side javascript of the grid I can grab the unid of the element that was clicked with:

$("#grid").on("dblclick", "tr", function(e) {
    var grid = $("#grid").data("kendoGrid");
    var unid = grid.dataItem($(this)).unid;             
});

But I cannot figure out how to set the request parm and do the partial refresh.

Should I call an RPC here?

<xp:button
        id="button2"
        type="button"
        styleClass="btn btn-primary"
        disableTheme="true"
        value="Create OTM Ticket">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="dynamicCustomControl"
            onComplete="XSP.partialRefreshGet('#{id:dynamicCustomControl}')">
            <xp:this.action><![CDATA[#{javascript:var x = "ccFormTicket.xsp"
viewScope.controlName = x;
getComponent("dynamicCustomControl").show(null)}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>

Dynamic Content Control

<xp:div
    styleClass="col-lg-10"
    id="content">
    <xe:dynamicContent
        id="dynamicCustomControl">
        <xp:this.facets></xp:this.facets>
        <xp:include
            id="customControlInluder">
            <xp:this.pageName>
                        <![CDATA[${javascript:viewScope.controlName||"ccViewTickets.xsp"}]]>
            </xp:this.pageName>
        </xp:include>
    </xe:dynamicContent>
</xp:div>

Ferry Kranenburg Ferry Kranenburg · Accepted Answer · 2017-03-21T21:07:33

I think you could do something like this. Call the partial refresh from within your doubleclick event:

$("#grid").on("dblclick", "tr", function(e) {
   var grid = $("#grid").data("kendoGrid");
    var unid = grid.dataItem($(this)).unid;  
    XSP.partialRefreshGet('#{id:dynamicCustomControl}',params: {
      'controlName': unid
    })   
});

This will partial refresh the dynamic custom control and will pass the unid from the grid via a request param. On the serverside you could do something like the following code to use the request param (using the param object in XPages):

<xp:div
styleClass="col-lg-10"
id="content">
<xe:dynamicContent
    id="dynamicCustomControl">
    <xp:this.facets></xp:this.facets>
    <xp:include
        id="customControlInluder">
        <xp:this.pageName>
                    <![CDATA[${javascript:param.controlName || "ccViewTickets.xsp"}]]>
        </xp:this.pageName>
    </xp:include>
</xe:dynamicContent>

Xpages: Calling partial refresh from client side code

1 Answers