xpages validation on field having onChange script

0
votes

There is a required field:

 <xp:this.validators>
                            <xp:validateRequired
                                message="Required field. Please add some text.">
                            </xp:validateRequired>
 </xp:this.validators>

Also, the value from this field is copied ( using the onChange event ) to other fields:

     <xp:eventHandler event="onchange" submit="true"refreshMode="norefresh">
          <xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
        Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]>                                                                                   
         </xp:this.action>
   </xp:eventHandler>

An inconvenient issue appears when I just click the field to fill it: the validation message appears. Is because the field initially is empty and the code I added is into the onChange event?

I'd like to use this field as required before users can save the doc.

I tried set the values by CSJS, but without a result...

var string = XSP.getElementById("#{id:inputText1}").value
XSP.getElementById("#{id:txt_LocalitateS}").value = string
XSP.getElementById("#{id:txt_LocalitateP}").value = string

Also, let say I enter a value for inputText1 and later on I enter a new value... How can I update automatically the other 2 fields with the new value?

I tried something like this:

<xp:inputText id="inputText1" value="#{Cdoc.txt_LocalitateCompanie}"
                        style="height:20.0px;width:122.0px;font-weight:bold;font-size:10pt;font-family:verdana"
                        required="true">


                        <xp:this.validators>
                            <xp:validateRequired message="Completarea localitatii este obligatorie.">
                            </xp:validateRequired>
                        </xp:this.validators>
                        <xp:typeAhead mode="full" minChars="1" ignoreCase="true"
                            id="typeAhead1">
                            <xp:this.valueList><![CDATA[#{javascript:@DbLookup(@DbName(),"vwLocalitati",Cdoc.txt_LocalitateCompanie,1,"[PARTIALMATCH]");}]]></xp:this.valueList>
                        </xp:typeAhead>
                        <xp:eventHandler event="onchange" submit="true"
                            refreshMode="norefresh">
                            <xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]></xp:this.action>

                            <xp:this.script><![CDATA[XSP.partialRefreshGet("#{id:txt_LocalitateS}", {
    onComplete: function() {
        XSP.partialRefreshGet("#{id:txt_LocalitateP}", {
            onComplete: function(){ } 
        });
    }
});]]></xp:this.script>
                        </xp:eventHandler>
                    </xp:inputText>

Thanks in advance

2
xpagesxpages-ssjs
Would it be possible to set these fields in a custom querySave action? onChange events are generally a bad practice due to performance and user experience. – Greg
@Greg I took your suggestion into consideration, also. I saw a big disadvantage: these fields ( where I set the value ) are editable, and users desire is: immediately after they fill the 'required' field, those fields to be set with the respective values. It's almost like the 'refresh fields on keyword change' from Lotus Notes. – Florin M.
if you are using a combobox/similar listed control, it is not so dramatic to keep it in the onChange(). I would just want to test quickly if removing the onChange code solves the issue as that would be pretty easy to test. One possible solution of many to that, which of course is use case specific, would be to use an update button. Such a thing would also limit the danger of information that is already present being unwanted-ly deleted. – Greg
another option to look into would be moving the validation text to a hidden label, then move the validation logic to a manual function in the onChange() and show the label/computed field when needed. This is a bit of a hack, but it is an option if you need something done quickly. – Greg
thanks for your suggestion. I'm still trying to make it ok, I will take your advice and tips into consideration . I'm also open to other suggestions. – Florin M.

2 Answers

1
votes

Two things here. First, you should disable validators for onChange event, therefore it won't display the validation error.

Second, when you use a CSJS script together with a SSJS, it will fire the CSJS one and if it returns true, proceed with the SSJS. So if you want your CSJS code run after SSJS, you can place it into oncomplete.

If I understood your question correctly, the following code would solve it.

    <xp:inputText
        id="inputText1"
        value="#{Cdoc.txt_LocalitateCompanie}"
        style="height:20.0px;width:122.0px;font-weight:bold;font-size:10pt;font-family:verdana"
        required="true">
        <xp:this.validators>
            <xp:validateRequired
                message="Completarea localitatii este obligatorie.">
            </xp:validateRequired>
        </xp:this.validators>
        <xp:typeAhead
            mode="full"
            minChars="1"
            ignoreCase="true"
            id="typeAhead1">
            <xp:this.valueList><![CDATA[#{javascript:@DbLookup(@DbName(),"vwLocalitati",Cdoc.txt_LocalitateCompanie,1,"[PARTIALMATCH]");}]]></xp:this.valueList>
        </xp:typeAhead>
        <xp:eventHandler
            event="onchange"
            submit="true"
            refreshMode="norefresh"
            disableValidators="true">
            <xp:this.action><![CDATA[#{javascript:Cdoc.setValue("dlg_Localitate",Cdoc.getValue("txt_LocalitateCompanie"));
Cdoc.setValue("dlg_Localitate_1",Cdoc.getValue("txt_LocalitateCompanie"))}]]></xp:this.action>
            <xp:this.onComplete><![CDATA[if(dojo.byId("#{id:txt_LocalitateP}")) {
XSP.partialRefreshGet("#{id:txt_LocalitateP}", {
    onComplete: function() {
        XSP.partialRefreshGet("#{id:txt_LocalitateS}", {
            onComplete: function(){ } 
        });
    }
});
}]]></xp:this.onComplete>
        </xp:eventHandler>
    </xp:inputText>

UPDATE: In your case, the field you want to refresh is on the second tab with partialRefresh="true". It means that at the time of partialRefreshGet, the target fields might not exist in the DOM. I have added a check now.

0
votes

this is taken from my comments and put into an answer:

onChange events are generally frowned upon due to performance and user experience. If, however, the field is a listed control ie combobox it is not so dramatic. The following options/ideas are available

  1. Take out the onChange() to test whether that makes a difference. If so, move your code.
  2. Use an update button to change all the fields en masse also preventing information that is already inputted from being deleted unwanted-ly
  3. create your own validation method and show/hide a label manually (hack-y)
  4. Research how to manually put text into an errors control
  5. If the field is in a dialog box, move the onChange() to the open/close methods of the dialog

FURTHER EDIT An idea that I might suggest is using the xspDoc.getDocument(true) method to push all changes from the xpage to the background document. Something tells me that this might make a difference with the server reading the changes to the document and realizing that it is not empty.

ADDITIONAL IDEAS
I did not mention this because it is a bit more advanced, but should also get the job done assuming the refreshes are done. Even that is not that big of a deal. You could read all of your data from the document into a java bean. This bean is then the "data source" for your page and you bind all of your controls to the properties of this bean. You will then use EL to bind your controls to the bean. In the setters for those variables that trigger changes in other fields, change those values. So,

public PageBean(){
     //read connection information out of the URL and get the correct information out of the document
     //set all variables
     firstName=doc.getItemValueString("firstName");
}

private String firstName;
public String getFirstName(){
     return firstName;
}
public void setFirstName(String firstName){
     this.firstName = firstName;
     setLastName("Schmidt");
}
....

Once you register your bean with faces-config.xml, you can then use EL to access the data

#{PageBean.firstName}
#{PageBean.lastName}

Then you can get your document again in save and reset the values, save and release.