用客户端访问和设置服务器端变量的方式

Question

I have an XPage which uses client-side validation. If validation fails it gives the user an alert message and won't permit proccess server-side stuff. The problem I've encountered is being unable to "assign" server-side variables with client-side. For example, consider I have an xp input field like this:

<xp:inputText 
  styleClass="doc_field_textinput" id="input_part_title" type="text" size="40" 
  disableClientSideValidation="true" >
</xp:inputText>

And I use a button in order to validate and if validation succeeds - save this:

<xp:button id="save_part_btn" value="+Add this" style="float:right;">
             <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:

                    var estdoc:NotesDocument=database.getDocumentByUNID(doc_source.getDocument().getParentDocumentUNID())
                    var estPartdoc:NotesDocument=estdoc.getParentDatabase().createDocument()

                    estPartdoc.replaceItemValue('Form','Estimate_Cost_Part')
                    estPartdoc.replaceItemValue('Predoc',estdoc.getUniversalID())
                    estPartdoc.replaceItemValue('$OSN_IsSaved','1')

                    estPartdoc.replaceItemValue('Title', getComponent('input_part_title').getValue())

                    }]]>
            </xp:this.action>
                <xp:this.script><![CDATA[ 
                var result = "";
                var wholeResult = true;

                function isStringEmpty(string2Check) 
                {
                    return string2Check == "" || string2Check[0] == " ";
                }

                if(isStringEmpty(document.getElementById("#{id:input_part_title}").value)) 
                {
                    wholeResult = false;
                    result += 'The field cannot be empty!'
                }

                result = result.replace(/\n$/, "")

                if(!wholeResult) 
                {
                    alert(result)
                }

                return wholeResult;

                ]]>
                </xp:this.script>
             </xp:eventHandler>
</xp:button>

Unfortunatly, the input_part_title on the server-side is always null , under any circumstances, whereas document.getElementById("#{id:input_part_title}").value works so well, and really works the way it's expected. I wish I could add the same line of code to my Server-Side, but I can't because document is an unknown property on the server side. Is there any way I can somehow assign input_part_title to a value from client-side?

Answer 1

Best practice is to use the value property of the component to bind it to some server-side element, eg a field on a dominoDocument datasource or a viewScope variable. You can then reference.

An alternative is to use getComponent("input_part_title").getValue() .

Attaching a validator to the component will ensure validation occurs during the Process Validations phase on the server. If you have non-text input components (eg to take a number), that phase also runs converter checks and aborts accordingly. That will then abort processing, so your code in the button's eventHandler's action property won't run at all. It will also handle returning the error message to the browser (programmatically you'd need to look at facesContext.addMessage() as well as highlighting the component as being invalid ( getComponent.setValid(false) ). The validator handles all of that for you.