XPages more fields at the click on a button issue with partial refresh

Based on Tim Tripcony's suggestion I have implemented a simple xpage below which allows me to extend no. of fields displayed when a user clicks on the "Add more" button. I have an issue with partial refresh not remembering the data when Add More button does a partial refresh and extends the no. of rows.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoForm="true">
    <xp:this.data>
        <xp:dominoDocument var="newDoc" formName="frmAddMore"></xp:dominoDocument>
    </xp:this.data>
    <xp:this.afterPageLoad><![CDATA[#{javascript:viewScope.rowCount = new java.lang.Integer(5);}]]></xp:this.afterPageLoad>
    <xp:div id="parentDiv">
        <xp:repeat indexVar="fieldSuffix" value="#{viewScope.rowCount}"
            rows="#{viewScope.rowCount}" var="row">
            <xp:div>
                <xp:inputText id="KeyNo">
                    <xp:this.value><![CDATA[#{newDoc["KeyNo_#{fieldSuffix}"]}]]></xp:this.value>
                </xp:inputText>
                <xp:inputText id="Qty">
                    <xp:this.value><![CDATA[#{newDoc["Quantity_#{fieldSuffix}"]}]]></xp:this.value>
                </xp:inputText>
            </xp:div>
        </xp:repeat>
        <xp:button value="Add More" id="btnAddMore"
            execMode="partial">
            <xp:eventHandler event="onclick" submit="true"
                execMode="partial" execId="parentDiv" refreshMode="partial" refreshId="parentDiv">
                <xp:this.action><![CDATA[#{javascript:viewScope.rowCount = new java.lang.Integer(viewScope.rowCount + 5);}]]></xp:this.action>
                <xp:this.script>
                    <xp:executeClientScript
                        script="dojo.window.scrollIntoView(dojo.byId('#{id:btnAddMore}').id);">
                    </xp:executeClientScript>
                </xp:this.script>
            </xp:eventHandler>
        </xp:button>
    </xp:div>
</xp:view>

What am I missing here?

I have also noticed that the dojo.window.scrollIntoView clientside JS function doesn't work? Any help would be much appreciated.

xpages

2012-04-03 23:15
by pipalia

In your code i cant see where the data is actualy saved on the document. So whenever the rowdata is refreshed it iterates over the fields and retrieves the data from. Because data is not saved you lost the data entered by the user.

Add a save simple action to the partialrefresh and it should work. Disable validation if youd like so validation is only done when the user clicks save button of some sort.

2012-04-04 05:05
by jjtbsomhorst

Thanks! I was under the impression that partial refresh doesn't lose existing values? So I would have to force a save during each partial refresh without the validation as you mentioned - pipalia 2012-04-04 06:42

How would I get validation to work on each line to validate whether it's a valid product as well as run other validation? I cannot really compute the ID for a input control, so how would this work using Error Message control - pipalia 2012-04-05 10:44

A partial refresh doesn't lose data if whats holding the data isn't being refreshed. The only difference between a prtial refresh and a full is that partial only happens to an area of the page, in this example your refreshing "parentDiv" which has all the controls in it, so parentDiv will be completly reloaded.

for example if you where to partial refresh the inputText "KeyNo" this one would lose its data but the input text "Qty" would not, because "Qty" is being touched by th refresh.

2012-04-04 07:27
by Simon McLoughlin