I have downloaded Demos.nsf and try to learn select2 from http://www.bootstrap4xpages.com/bs4xp/demos.nsf/select2.xsp
Everything run well but I have found a problem select2 didn't trigger XPAGES server side event when return "No Matches found"
Here how to produce this problem :
I have input hidden and computed text that binding with document datasource
I have another button to partial update to that computed text
That input hidden used for select2 with scriptBlock
Run that xpages
Type name (e.g. patrick) and select that name
Click that button and computed text will display like selected name
Type keyword like "qqqqqqq" and select2 will results "No Matches Found"
Click that button again, and computed text will be "blank"
Redo number 6 dan 7 again, and computed text still be "blank" and didn't display "Patrick" name
How to solve this problem ?
Here my code :
<xp:inputHidden id="inputHidden1" value="#{document1.coba}"/>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
x$( "#{id:inputHidden1}" ).select2({
placeholder: "Find someone",
minimumInputLength: 2,
quietMillis: 300,
width: '300px',
allowClear : true,
ajax: {
url: "namesDataStore.xsp",
dataType: 'json',
data: function (term, page) {
return {
q: term, // search term
page_limit: 10
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
return data;
}
},
initSelection: function(element, callback) {
//sets a default value (if a value was selected previously)
var id = $(element).val();
//if a value was selected: perform an Ajax call to retrieve the text label
if (id !== "") {
$.ajax(
"namesDataStore.xsp", {
data: {
id: id
},
dataType: "json"
}).done(function(data) { callback(data); });
}
}
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:text escape="true" id="computedField1"
value="#{document1.coba}">
</xp:text>
<xp:button value="Refresh"
id="button2" styleClass="btn btn-success">
<i class="glyphicon glyphicon-ok " />
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="computedField1">
</xp:eventHandler>
</xp:button>
Related
I have some code, that if a user selects a "NO" answer on a certain field (Q1), it removes the answers of sub question related to Q1, and also hides them in the UI.
This works fine, and I do a partial refresh on the div containing all the questions. However, when I then click on the same question selecting answer "Yes" which then shows all the sub questions, so the user can answer them again, they still have the old values attributed.
When I remove the fields, the backend document reflects this correctly, but then when I click the question which then shows the fields again in the UI, they appear in the backend document again, with their original value. If I do a context.reloadPage() at the end of my code, everything works as expected, but this breaks other functionality and I only want a partial refresh. Any ideas? Thanks
try{
if (compositeData.onClickCode) {
compositeData.onClickCode.invoke( facesContext, null );
}
document1.save();
var fieldName:string = compositeData.fieldName;
//Blank all IFM fields if user selects no IFM *CHANGE FIELDS ARRAY TO GET FROM KEYWORD*
if (fieldName == "Q1") {
print("Yes Q1");
if(document1.getItemValueString(fieldName)=="No") {
print("NO IFMS");
var questionsIFM = ["Q1a", "Q1b", "Q1c", "Q3IFM", "Q3bIFM", "Q3cIFM", "Q3dIFM", "Q4", "Q4a" ,"Q5IFM", "Q6IFM", "Q6aIFM", "Q7IFM",
"Q7aIFM", "Q7bIFM", "Q8", "Q8a", "Q9IFM", "Q9aIFM", "Q9bIFM", "Q10IFM", "Q11IFM"];
var len = questionsIFM.length;
for (i = 0; i < len; i++) {
print("Field Name: " + questionsIFM[i]);
document1.removeItem(questionsIFM[i]);
}
document1.save();
//context.reloadPage();
}
}
var guidanceOptions:string = "";
if (compositeData.guidanceOptions) {
if(#IsMember(document1.getItemValueString(fieldName), compositeData.guidanceOptions)){
guidanceOptions = document1.getItemValueString(fieldName);
}
}
viewScope.guidance = compositeData.fieldName+guidanceOptions;
}catch(e){
openLogBean.addError(e,this.getParent());
}
Instead of changing the backend document you could update the datasource with doc.setValue('fieldName','')
Alternativly, you could change the scope of the datasource to "request", this forces the datasource to reload the backend document for every request.
EDIT:
Here is an example for updating the datasource directly (Button 'Clear') which always works and updating the component (Button 'Update').
If the button 'Reload' is clicked, changes to in the fields are "stored" in the component. The button 'Update' does a partial refresh (which hides the input field), so the value is lost.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument
var="document1"></xp:dominoDocument>
</xp:this.data>
<xp:div
id="refreshMe">
<xp:inputText
id="inputText1"
value="#{document1.foo}"></xp:inputText>
<xp:inputText
id="inputText2"
value="#{document1.bar}"
rendered="#{javascript:facesContext.isAjaxPartialRefresh() == false}">
</xp:inputText>
</xp:div>
<xp:button
value="Update"
id="buttonUpdate">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="partial"
refreshId="refreshMe">
</xp:eventHandler>
</xp:button>
<xp:button
value="Clear"
id="buttonClear">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="partial"
refreshId="refreshMe">
<xp:this.action><![CDATA[#{javascript:document1.setValue('foo', '');document1.setValue('bar', '')}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button
value="Reload"
id="buttonReload">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
</xp:eventHandler>
</xp:button>
</xp:view>
I might be late to this party, but I found a way to force a reload from the back-end document. All you have to do is change the id for the dataSource a little, by adding or removing a "0" prefix to the documentId. Something like this:
return (viewScope.idPrefix? "0":"") + param.documentId
and when you want to force a reload during a partial refresh, just set
viewScope.idPrefix= !viewScope.idPrefix;
Don't forget to set ignoreRequestParams to true.
I have a xpage that contains 4 edit boxes and a button, they are used to export the data in excel. I use session scope in those four edit boxes because I have store the value in order to generate the excel.
The design look looks like the following:
//1st edit box: get the user name, set it to default so the user does not need to type his/her name
<xp:inputText id="inputText1" value="#{sessionScope.User}">
<xp:this.defaultValue><![CDATA[#{javascript: #Name("[CN]",#UserName())}]]></xp:this.defaultValue>
</xp:inputText>
//2nd edit box: after get the user name in edit box 1, retrieve the user's department in this edit box
<xp:inputText id="inputText2"value="#{sessionScope.Department}">
<xp:this.defaultValue><![CDATA[#{javascript:#DbLookup(#DbName(),"UserView", (getComponent("inputText1").getValue()),2 )}]]></xp:this.defaultValue>
</xp:inputText>
//3rd edit box: get the start search date in YYYYMM format, user only can type numbers
<xp:inputText id="inputText3" value="#{sessionScope.startYYYYMM}">
<xp:eventHandler event="onkeypress" submit="false">
<xp:this.script><![CDATA[if (event.keyCode >= 48 && event.keyCode <= 57)
{
event.returnValue = true;
}
else
{
event.returnValue = false;
}]]></xp:this.script>
<xp:this.parameters>
<xp:parameter name="message1" value="value">
/xp:parameter>
</xp:this.parameters>
</xp:eventHandler>
</xp:inputText>
//4th editbox: get the endsearch date in YYYYMM format, user only can type numbers
<xp:inputText id="inputText4" value="#{sessionScope.startYYYYMM}">
<xp:eventHandler event="onkeypress" submit="false">
<xp:this.script><![CDATA[if (event.keyCode >= 48 && event.keyCode <= 57)
{
event.returnValue = true;
}
else
{
event.returnValue = false;
}]]></xp:this.script>
<xp:this.parameters>
<xp:parameter name="message1" value="value">
/xp:parameter>
</xp:this.parameters>
</xp:eventHandler>
</xp:inputText>
//a button to call another page to export the excel
<xp:button value="Export" id="button11">
<xp:eventHandler event="onclick" submit="true" immediate="false" save="false" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:context.redirectToPage("ExportExcel.xsp");}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
I run the code, it works fine. However here is what I would like to ask. In the first and the second edit box, if I set those edit boxes to Read-only. It seems lose the session scope variable and I run the code, the excel just contains the default header.
I find this post ReadOnly field in Xpage not submitted is very similar to my case, so I set the edit box to editable and try to apply this code from the post:
//for 1st editbox
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[function makeFieldReadOnly() {
document.getElementById("#{id:inputText1}").readOnly = true;
}
window.onload = makeFieldReadOnly;]]></xp:this.value>
</xp:scriptBlock>
//for 2nd edit box
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[function makeFieldReadOnly() {
document.getElementById("#{id:inputText2}").readOnly = true;
}
window.onload = makeFieldReadOnly;]]></xp:this.value>
</xp:scriptBlock>
The edit box still editable and the excel is not work properly (only display the default header).
So how can I make the edit box read-only and still have the session scope variable?
Grateful for your advice please. Thank you.
Reference:
ReadOnly field in Xpage not submitted
export data from panel
You can calculate the values for your two sessionScope variables in e.g. the beforeRenderResponse:
<xp:this.beforeRenderResponse><![CDATA[#{javascript:
sessionScope.User = #Name("[CN]",#UserName());
sessionScope.Department = #DbLookup(#DbName(),"UserView", (#Name("[CN]",#UserName()),2 )
}]]></xp:this.beforeRenderResponse>
You can then show the values of the sessionScope variables in computed text fields instead of input fields:
<xp:text escape="true" id="computedField1" value="#{sessionScope.User}" />
<xp:text escape="true" id="computedField2" value="#{sessionScope.Department}" />
I had this issue with 9.01 FP6
The best solution was to place the inputs in a xp:panel and then use the readonly attribute on the panel to make the field within it read only.
This worked well and was easy to implement
UPDATE
This is now what I have in my xpage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel id="ContainerPanel">
<xp:inputText id="typeAhead">
<xp:eventHandler event="onchange" submit="true"
refreshMode="norefresh">
<xp:this.action><![CDATA[#{javascript://code here to trap the click in the list of values
//displayed by the type ahead. Code redirects to another page
//the goal here would be to avoid the full/partial update and only use the CSJS
//code to trigger the button's partial/full refresh so we can avoid having the onchange code
//trigger a refresh when the user decides to click the button instead of clicking on a suggestion
//that is offered by the typeahead
//I thought of using the temporary field and use it to store the value selected in the type ahead list,
//so the code knows wheter we are running the CSJS from the type ahead list or from the button (the onchange
//of the type ahead will fill this field so we know wether to trigger the CSJS partial refresh }]]></xp:this.action>
<xp:this.script><![CDATA[var selectedValue = document.getElementById("#{id:typeAhead}").value;
var targetField = document.getElementById("#{id:temporaryField}");
alert("typeAhead CSJS onchange: " + selectedValue);
targetField.value = selectedValue;
//init the partial refresh here!!!]]></xp:this.script>
</xp:eventHandler>
<xp:typeAhead mode="partial" minChars="2">
<xp:this.valueList><![CDATA[aaaa
bbbb
cccc
dddd]]></xp:this.valueList>
</xp:typeAhead></xp:inputText>
<xp:button value="GO" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript://same call to the code called in the onchange event of the typeahead field
mySSJSFunction();}]]></xp:this.action>
</xp:eventHandler></xp:button>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:inputText id="temporaryField"></xp:inputText>
</xp:panel>
</xp:view>
Because the problem comes from the fact that the typeahead's onchange event is triggered even though the user just wants to type in something and go click on the button (therefore triggering the partial update of the event, so the code can call a SSJS function), I thought I'd get rid of the type ahead field's partial update and try to trigger it manually from CSJS.
I am trying to use a temporary field to store the value selected in the type ahead so I can figure out if I need to run the SSJS function right away (the user selected a value in the list) or just don't do nothing as the user just wants to go and click on the button.
Unfortunately, the code is at the office and I'm home right now, but the comments in the above code should give an idea of what I'm trying to achieve.
Not sure either if I should use XSP._partialRefresh(), XSP.PartialRefreshGet() and which control ID should I use (if it has any importance).
Hope it all makes sense... Just trying to give the user the possibility to select a value in the type ahead list, or type something in the field and click the search button, both cases calling the same SSJS function (using either the value selected in the type ahead list or what has been typed in the field).
FIRST POST
I have a page with a field and a button, just like the Google page. I have type ahead set up so it returns a list of documents title that correspond to the "search" term entered. Because I want the application to load a page when the user clicks on an item from the type ahead list, I added some code to the onChange event of the type ahead field. That works great, but...
Let's say a user wants to go ahead and click on the button anyways, because the list displayed by the type ahead field only show the top 10 search results, and the document he is looking for is not in that list, so he wants to trigger a "full search" by clicking on the search button. What happens is that the onchange code of the field is triggered before the onclick code of the button, and due to a fullrefresh on the type ahead field, this triggers a page refreshand the user needs to click a second time on the button to actually open the search page.
The question is quit esimple: how can I get the same behaviour as the Google page, opening up the page if I click on one of the suggestions, but also opening up a search page/search results page when clicking on the button?
Here is the code so far:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xp_1="http://www.ibm.com/xsp/coreex" dojoParseOnLoad="true">
<xp:this.resources>
<xp:script src="/xpSortedSearches.jss" clientSide="false"></xp:script>
<xp:script src="/xpadSearch.jss" clientSide="false"></xp:script>
<xp:dojoModulePath loaded="true"
url="/xsp/.ibmxspres/dojoroot/dojo/dojo.js">
</xp:dojoModulePath>
</xp:this.resources>
<xp:panel id="PanelSearch" style="text-align:right;">
<xp:inputText id="inputSearch"
style="width:225px;height:20px;font-size:10pt;font-family:sans-serif;padding-left:5.0px;padding-top:5.0px;padding-bottom:2.0px; border:1px solid gray;"
tabindex="0" disableClientSideValidation="false"
disableModifiedFlag="true">
<xp:this.attrs>
<xp:attr name="placeholder">
<xp:this.value><![CDATA[#{javascript:if(sessionScope.lang=="fr") {
"Entrez votre recherche ici ...";
} else {
"Enter your search query here...";
}}]]></xp:this.value>
</xp:attr>
</xp:this.attrs>
<xp:typeAhead mode="full" minChars="3" valueMarkup="true"
var="searchQuery" ignoreCase="true">
<xp:this.valueList><![CDATA[#{javascript://TODO Memory management???
getTypeAheadValuesFromSearchBar(getComponent("inputSearch").getValue());}]]></xp:this.valueList>
</xp:typeAhead>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var key:String = getComponent("inputSearch").getValue();
if(!!key) {
getDocFromSubject(key);
}
}]]></xp:this.action>
<xp:this.script><![CDATA[showStandBy();
return true;]]></xp:this.script>
</xp:eventHandler>
<xp:eventHandler event="onkeypress" submit="true"
refreshMode="complete">
<xp:this.script><![CDATA[//if we have a enter, launch the search
if (thisEvent.keyCode==13) {
var qryField = document.getElementById("#{id:inputSearch}");
if(doSearch(qryField)) {
showStandBy();
return true;
} else {
return false;
}
}else{
return false;
}]]></xp:this.script>
<xp:this.action><![CDATA[#{javascript:launchSearch();}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
<xp:button id="button1" icon="/search.png"
styleClass="searchButtonSmall">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.onStart>
StandbyDialog_Started();
</xp:this.onStart>
<xp:this.action><![CDATA[#{javascript:launchSearch()}]]>
</xp:this.action>
<xp:this.script><![CDATA[ var qryField = document.getElementById("#{id:inputSearch}");
if(doSearch(qryField)) {
showStandBy();
return true;
} else {
return false;
}]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:br />
</xp:panel>
<!--
This event handler makes sure the search box has the focus once the
page is loaded
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.onStart>
StandbyDialog_Started();
</xp:this.onStart>
<xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputSearch}");
if (edit) {
edit.focus();
}]]>
</xp:this.script>
</xp:eventHandler>
-->
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputSearch}");
if (edit) {
edit.focus();
}]]></xp:this.script>
</xp:eventHandler></xp:view>
I'm using a repeat control displaying names. The content is displayed proberly, but I needed a pager because there can be more than 30 entries.
As soon as I add a pager for this repeat control and press a button doing a partial refresh on the site I get a "division by zero" error.
Here's my repeat control:
<xp:repeat id="repeat1" rows="30" var="namesList" repeatControls="true" indexVar="rowIndex">
<xp:table>
<xp:tr>
<xp:td>
<xp:link escape="true" id="Employee">
<xp:this.text><![CDATA[#{javascript:namesList.getItemValueString("Employee")}]]></xp:this.text></xp:link>
</xp:td>
</xp:tr>
</xp:table>
<xp:this.value><![CDATA[#{javascript:try {
var wfDoc:NotesDocument = docApplication.getDocument(true);
var dcNoAnswer:NotesDocumentCollection = database.createDocumentCollection();
var count:Integer = 0;
//Gets all response documents, but only adds those to the document collection, without a valid
//response to the cycle
if (wfDoc.getResponses() != null) {
var dc:NotesDocumentCollection = wfDoc.getResponses();
var doc:NotesDocument = dc.getFirstDocument();
while (doc != null) {
if (doc.getItemValueString("Response") == "") {
dcNoAnswer.addDocument(doc);
}
doc = dc.getNextDocument();
}
dc.recycle();
}
docApplication.replaceItemValue("MissingResponsesCount", dcNoAnswer.getCount());
wfDoc.recycle();
return dcNoAnswer;
} catch(e) {
dBar.error("Show no response repeat control data: " + e);
}}]]></xp:this.value>
</xp:repeat>
And here's my pager:
<xp:pager layout="Previous Group Next" id="pager3" for="repeat1"></xp:pager>
As I said, doing a partial refresh on the site oder panel, I'll get this error:
I've been looking for an error for some time, but I can't see anything wrong here. Did anybody else have such a problem and maybe has a solution?
You have repeatControls="true" set. That means "create the controls once and never again", so you can't use a pager to navigate, as mentioned here. Remove repeatControls="true" and it will work.
If you look at the stack trace, it will fail on getStart().
Try adding alwaysCalculateLast="false" to your pager. The repeat control could have 0 values (because of dcNoAnswer) and maybe you have set xsp.repeat.allowZeroRowsPerPage=true in your xsp properties settings.
I add some time ago this question xpages passing the UNID to other field ... and for the moment it seems it worked.
After I created the <xe:dialog> structure ( which uses a single datasource: Pdoc ), I observed I can't get the correct UNID of the other datasource: Cdoc. This dialog is showed from the xpages having the datasource Cdoc.
On the main Xpage ( which has as the datasource: Cdoc) there is a computed field: ( txt_UNID is on a form having the formula #text(#uniquedocumentid) )
<xp:text escape="true" id="computedField3" value="#{Cdoc.txt_UNID}"></xp:text>
and a button which shows the dialog:
<xp:button value="Adding a Pdoc structure inside my dialog" id="button3"
styleClass="lotusFormButton" refreshMode="partial" rendered="#{javascript:currentDocument.isEditable()}">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="computedField3">
<xp:this.action><![CDATA[#{javascript: if ( Cdoc.isNewNote() ) { Cdoc.save();
Cdoc.setValue("computedField3",Cdoc.getDocument().getUniversalID());
getComponent('exampleDialog').show() }
else
{
Cdoc.setValue("computedField3",Cdoc.getDocument().getUniversalID());
getComponent('exampleDialog').show()}
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
The dialog is having the refreshOnShow set to true. Inside the dialog, there is a field ( binded to the Pdoc source ) where I want to display the UNID of Cdoc stored in the previous computed field from my main XPage:
<xp:inputText value="#{Pdoc.txt_CompanieUNID}"
id="inputText1" defaultValue="#{Cdoc.txt_UNID}">
</xp:inputText>
I think the problem is here ... Instead of #{Cdoc.txt_UNID}, I did tried adding getComponent("computedField3").getValue() as the default value for my above inputText, but I get an error, considering the fact, I suppose, the computedField3 isn't inside the dialog ?
What am I doing wrong?
Btw, the dialog contains numerous fields ( binded to Pdoc ) having the default value:
Cdoc.<field_name>
and it works OK. I don't know why in the case of the computedField3/txt_UNID it doesn't work.
Thanks for your time!
You are mixing up field name and component name. Do this in your button that shows the dialog to update the field txt_UNID with the expected value:
Cdoc.setValue("txt_UNID", Cdoc.getDocument().getUniversalID());