Is there a simple way to make a Text area validation before trying to save a doc.?
I tried something like this, but still not working for me:
<xe:djTextarea id="djTextarea5" multipleTrim="true"
multipleSeparator="#{javascript:'\n'}"
style="width:200px;border-style:none;font-weight:bold" cols="30"
value="#{Cdoc.nms_Responsabil}" showReadonlyAsDisabled="true">
<xe:this.validators>
<xp:validateLength minimum="2"
message="This field is required.">
</xp:validateLength>
</xe:this.validators>
<xp:eventHandler event="onChange" submit="false">
<xe:this.script><![CDATA[
if (document.getElementById("#{id:djTextarea5}").value) {
document.getElementById("#{id:button1}").style.display = 'inline';
} else {
document.getElementById("#{id:button1}").style.display = 'none';
}]]></xe:this.script>
</xp:eventHandler>
</xe:djTextarea>
Thanks for your time.
You can not use validator to validate empty value. It comes from JSF 1.2 specification: validator is not fired when value is empty. Therefore you must combine both: validator and required property.
Validators do not trigger unless the field is also a required field. Once you add a validateRequired validator as well, it should work fine.
Related
This is a high level question but does have specific answers.
I have a requirement where I need to perform an action two times, and update the user with a message before trying the action a second time. I also want to update the user prior to the first action.
Here is the timeline/sequence of events:
User presses button
Display message "operation starting"
Perform operation
If successful, show "operation successful", if operation fails
show "operation failed - retrying"
Retry Operation
If successful, show "operation successful", if operation fails show "please try again later".
When I coded this in my java method, the only thing that displayed was the final message. I tried using Thread.sleep(1500); to give the message a chance to display, but ONLY the final message will ever be displayed.
I then tried using SSJS to accomplish this task, but the result is the same. I think I understand why this is happening.
My question is: Is it even possible to do multiple partial refreshes like this. What is the best approach that I can take to accomplish this requirement. What workarounds or hacks can anyone think of.
If you are wanting to just try twice, you could create an rpc control that does the functionality you want, then call it with a call back
var deferred = service.doSomethingCool();
deferred.addCallback(function(data) {
if (data.status == 'error') {
//set UI Label Fail
var insideDeferred = service.doSomethingCool();
insideDeferred.addCallback(function(data) {
if (data.status == 'error') {
//set UI Label Fail
}
else {
//set UI Label Success
}
}
}
}
This should work for you assuming you have an RPC control named service and method called "doSomethingCool"
I tried Mark's post for a progress bar once. http://linqed.eu/?p=174 Didn't get it to work but didn't go deep into the effort. The solution is probably in there.
What you want should be doable of course. I would think at the least you use CSJS to do the heavy lifting really. Have CSJS call SSJS probably via RPC or XAgent and that does all the work of first and secondary message.
I'm just light on the actual details of making that work. :)
Yes, it's possible. We can do back and forth client side and server side operations n number of times in a single button click.
Create a button with CSJS code for alert.
Write SSJS code for your operation.
Now the trick is depends on whether your operation is partial or complete refresh.
If partial refresh, use oncomplete / onfailure event in eventhandler to write CSJS code to perform button click operation. Use a hidden input field to store number of retry and to determine at what count the retry has to stop.
If full refresh, oncomplete event does not triggered. Write your CSJS code on clientload event. In this case, Create a hidden input field and bind it to a view scope variable. Use it to store the success or failure in SSJS code and retrieve the value in CSJS code to check and retry.
I have included a sample code with buttons however it can be implemented in many different ways.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="label1">
<xp:this.script><![CDATA[alert("operation starting");]]></xp:this.script>
<xp:this.action><![CDATA[#{javascript:viewScope.status = "first operation completed";
print(getComponent("fail").getValue());}]]></xp:this.action>
<xp:this.onComplete><![CDATA[alert("first operation completed. starting second");
document.getElementById("#{id:ihRetry}").value = "False";
document.getElementById("#{id:button2}").click();]]></xp:this.onComplete>
<xp:this.onError><![CDATA[if ( document.getElementById("#{id:ihRetry}").value == "False" ) {
alert("first operation failed. retry again");
document.getElementById("#{id:ihRetry}").value = "True";
document.getElementById("#{id:button1}").click();
} else {
alert("first operation failed again. starting second");
document.getElementById("#{id:ihRetry}").value = "False";
document.getElementById("#{id:button2}").click();
}]]></xp:this.onError>
</xp:eventHandler>
</xp:button>
<xp:button value="Label" id="button2" style="display:none">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="label1">
<xp:this.action><![CDATA[#{javascript:viewScope.status = "second operation completed";}]]></xp:this.action>
<xp:this.onComplete><![CDATA[alert("second operation completed. starting third");
document.getElementById("#{id:ihRetry}").value = "False";
document.getElementById("#{id:button3}").click();]]></xp:this.onComplete>
<xp:this.onError><![CDATA[if ( document.getElementById("#{id:ihRetry}").value == "False" ) {
alert("second operation failed. retry again");
document.getElementById("#{id:ihRetry}").value = "True";
document.getElementById("#{id:button2}").click();
} else {
alert("second operation failed again. starting third");
document.getElementById("#{id:ihRetry}").value = "False";
document.getElementById("#{id:button3}").click();
}]]></xp:this.onError>
</xp:eventHandler>
</xp:button>
<xp:button value="Label" id="button3" style="display:none">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="label1">
<xp:this.action><![CDATA[#{javascript:viewScope.status = "third operation completed";}]]></xp:this.action>
<xp:this.onComplete><![CDATA[alert("third operation completed.");
document.getElementById("#{id:ihRetry}").value = "False";]]></xp:this.onComplete>
<xp:this.onError><![CDATA[if ( document.getElementById("#{id:ihRetry}").value == "False" ) {
alert("third operation failed. retry again");
document.getElementById("#{id:ihRetry}").value = "True";
document.getElementById("#{id:button3}").click();
} else {
alert("third operation failed again. end");
document.getElementById("#{id:ihRetry}").value = "False";
}]]></xp:this.onError>
</xp:eventHandler>
</xp:button>
<xp:inputHidden id="ihRetry">
<xp:this.value><![CDATA["False"]]></xp:this.value>
</xp:inputHidden>
<xp:label value="#{viewScope.status}" id="label1"></xp:label>
</xp:view>
I have several phone number fields that use jquery masking to format the input. See the code below. The fields work great until a combo box change above refreshes a panel that contains those fields. Once the refresh happens my masking stops working.
Any idea why and how to prevent this from happening?
<xp:scriptBlock id="scriptBlock7">
<xp:this.value><![CDATA[
jQuery(function($){
x$("#{id:dayPhone1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );
x$("#{id:eveningPhone1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );
x$("#{id:cellular1}").mask("(999) 999-9999? x 9999999", {placeholder : " " } );
});
]]></xp:this.value>
</xp:scriptBlock>
The jQuery is only run one time. It manipulates the DOM to give the mask effect. Once you run a partial refresh the original DOM is returned to the user and the mask is no longer in effect.
When the partial refresh happens the jQuery code does not know to apply itself back to the mask again. You have a number of choices, but the best is probably:
In the onComplete event of the partial refresh you can call the mask code again to reapply the "Mask". What I don't know is if the mask code will reset the fields or honor the values therein. I that is the case then take a look at the plugin code and see what options you have.
<xp:button value="Label" id="button1" styleClass="startLoginProcess" style="display:none">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="somethingHere"
onComplete="applyMaskCodeAgainHere">
</xp:eventHandler>
</xp:button>
To improve the code above because it looks like you are applying the same mask I suggest using a class selector and simplifying your code to look more like this:
<xp:scriptBlock id="scriptBlock7">
<xp:this.value><![CDATA[
jQuery(function($){
$('.phoneMask').mask("(999) 999-9999? x 9999999", {placeholder : " " } );
});
]]></xp:this.value>
</xp:scriptBlock>
put a styleClass="phoneMask" on your field :)
Is your scriptBlock also on the panel that is being refreshed? It needs to be in order for the the mask to be reapplied to the fields after the refresh.
You can remove the mask and reset it...
$(`#${id:dayPhone1}`).val(newPhoneValue).unmask().mask('(00) 00000-0000', {clearIfNotMatch: true});
This worked for me and should solve your problem!
TLDR: .unmask() before .mask()
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
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.
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
Take out the onChange() to test whether that makes a difference. If so, move your code.
Use an update button to change all the fields en masse also preventing information that is already inputted from being deleted unwanted-ly
create your own validation method and show/hide a label manually (hack-y)
Research how to manually put text into an errors control
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.
I have an xpage with 5 fields on it. Each field has code in the onBlur event to refresh the values of the ComboBoxes below it. I now have to add a bunch more fields to this application and I don't want to write the refresh code for each field. Rather, I would like to create a function that takes a parameter of which field I'm in and do the refresh with a loop.
I can't seem to get this to work. Below is the code I'm using in the onBlur event. I don't know the semantics of putting this code in a script library that can access each combobox and call the refresh code in a loop.
Any ideas?
<xp:comboBox id="vendorAppAdvSkills1">
<xp:selectItem itemLabel="-Select a Category-"
itemValue="-Select a Category-"></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:getComponent( "vendorAppSkills1" ).getValue();}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onblur" submit="false">
<xp:this.script><![CDATA[
XSP.partialRefreshPost("#{id:panelVendorAppSkills2}",
{
onComplete: function()
{
XSP.partialRefreshPost("#{id:panelVendorAppSkills3}",
{
onComplete: function()
{
XSP.partialRefreshPost("#{id:panelVendorAppSkills4}",
{
onComplete: function()
{
XSP.partialRefreshPost("#{id:panelVendorAppSkills5}",
{
onComplete: function()
{
XSP.partialRefreshPost("#{id:panelNextFinish}",
{
} )
}
} )
}
} )
}
} )
}
} );]]></xp:this.script>
</xp:eventHandler>
</xp:comboBox>
Do you have validation on your XPage? If so, validation will be preventing any of the partial refreshes running.
If possible just set the refresh ID of the eventHandler to an area that encompasses all combo boxes. That would just call one partial refresh from the browser to the server.
With your current code you're calling 5 partial refreshes, each time posting the whole content of the browser across to the server, each time updating the whole page, but just pushing back an individual component. Performance is not going to be good, so the single refresh area is better practice (as well as being easier to code!).
As best practice, unless you're preventing validation, also ensure the refresh area includes a Display Errors control. Otherwise your users (including you when testing) will not know if validation has failed.
I write a xpages.
detail： There are two combobox A,B. I use #Dbcolumn on combobox A to get option data from notesview and I will throw the choice I get from A to get second data for B.
the problem is： it work well on my localserver, but get no result on the server.
I'll be very appreciate for any suggestion, thanks you!!
code is on server side as follow：
var fd_AppChoice:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("fd_AppChoice");
var AppChoice=#Trim(fd_AppChoice.getValue());
var temp=new Array();
temp=#DbLookup("","(A)",AppChoice,2);
return temp;
That code doesn't look right - you don't have the server. And defining a variable doesn't fix its data type, so var temp=new Array(); is irrelevant. I also would rather bind the fd_AppChoice to a scope variable e.g. viewScope.appChoice, then your code get easier. Try this:
var appChoice = #Trim(viewScope.appChoice); // Use getComponent.getValue if you have to
var server = #DbName();
// if different server or nsf have = ["myserver","mydb.nsf"] or [#DbName()[0],"my.nsf"]
var result = #DbLookup(server,"(A)",appChoice,2);
return result || ["Sorry nothing here"]
That should work
I can't quite confirm this: in my case it works like a charm on my test server (didn't even try locally). Here's my code:
comboBox #1 reads its values from a categorized view of the same database:
<xp:comboBox id="comboBox1" value="#{viewScope.combo1}">
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript:#DbColumn(#DbName(), "myView", 1);}]]>
</xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="panelC2">
</xp:eventHandler>
</xp:comboBox>
Observe that the combo's onchange event performs a partial update on a panel which is a container for comboBox #2 (could it be that this is missing in your case?)
To get through with this, here's the remainder: combo#2 gets its values array using a #DbLookup which is filtered by the value selected in combo#1, which now is stored in a viewScope variable (how couldn't I agree with Stephan here: using a scope-var make things much easier!):
<xp:panel id="panelC2">
<xp:comboBox id="comboBox2" value="#{viewScope.combo2}">
<xp:selectItems>
<xp:this.value>
<![CDATA[#{javascript:#DbLookup(#DbName(), "myView", viewScope.combo1, 5);}]]>
</xp:this.value>
</xp:selectItems>
</xp:comboBox>
</xp:panel>