I'm trying to use jsonRpcService to print a value on console. Just for testing.
But when i call the method i recieve this error on browser console:
POST http://localhost/Teste.nsf/Teste.xsp/RpcService?$$viewid=!ei0pdt23xx! 400 (Bad Request)
Error: Unable to load /Teste.nsf/Teste.xsp/RpcService?$$viewid=!ei0pdt23xx! status:400(…)
Unable to load /Teste.nsf/Teste.xsp/RpcService?$$viewid=!ei0pdt23xx! status:400
Error: Unable to load /Teste.nsf/Teste.xsp/RpcService?$$viewid=!ei0pdt23xx! status:400(…)
Error: Unable to load /Teste.nsf/Teste.xsp/RpcService?$$viewid=!ei0pdt23xx! status:400(…)
Here is the image of the error:
http://i.stack.imgur.com/T5ekl.jpg
I already searched a lot for one solution to this error but i got nothing.
This is the code that i'm using:
<xe:jsonRpcService id="jsonRpcService1" serviceName="metodos"
pathInfo="RpcService">
<xe:this.methods>
<xe:remoteMethod name="teste" script="print('teste')"></xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>
And this is the code that i'm using on console to call the function
metodos.teste()
Does anyone knows what i'm doing wrong?
Thanks
You have to return a value in your script and your client has to wait for answer with a callback function.
This is a working example:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:jsonRpcService
id="jsonRpcService1"
serviceName="metodos"
pathInfo="RpcService">
<xe:this.methods>
<xe:remoteMethod
name="teste"
script="return 'teste'">
</xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>
<xp:button
value="Test"
id="button1">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[
var deferred = metodos.teste();
deferred.addCallback(function(result) {
alert(result);
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xp:view>
When you click on button "Test" an alert box shows up with the message "teste".
You can add additional code before return 'teste' like your original print('teste'). The script just has to return something...
Related
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 have a custom control that contains 2 images: add and remove from favorites.
There is some code on the onCLick event of the image, and both images use a SSJS function to see if the current document is already in the favorites or not, in the visible property of each image.
All works well, execpt that I need to click twice on the image in order to see the changes in the UI. Both onClick events are set to FullUpdate (also tried partial update with the panel that contains the images).
I could move all the favorites logic into session scope variables, but I think this should work as is. I just don't understand why I need to click twice, as if the partial refresh doesn't do anything (though it is, as I see the reload Arrow in the browser!).
Can it be that the code takes too long to execute and the refresh doesn'T get the updated info???
Here's the custom control code:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.resources>
<xp:script src="/AppUtils.jss" clientSide="false"></xp:script>
</xp:this.resources>
<xp:image url="/favorites-add.png" id="image1"
alt="Add to Favorites" title="Add to Favorites">
<xp:this.rendered><![CDATA[#{javascript:!isInFavorites(document1.getDocument().getUniversalID(), userBean.canonicalName);
}]]></xp:this.rendered>
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:addToFavorites(document1.getDocument().getUniversalID(),userBean.canonicalName);}]]></xp:this.action>
</xp:eventHandler>
</xp:image>
<xp:image url="/favorites-remove.png" id="image2"
alt="Remove from Favorites" title="Remove from Favorites">
<xp:this.rendered><![CDATA[#{javascript:isInFavorites(document1.getDocument().getUniversalID(),userBean.canonicalName);
}]]></xp:this.rendered>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:removeFromFavorites(document1.getDocument().getUniversalID(),userBean.canonicalName);}]]></xp:this.action>
</xp:eventHandler>
</xp:image>
</xp:view>
And here's the SSJS:
function addToFavorites(unid, userName) {
var newDoc:NotesDocument = database.createDocument();
newDoc.appendItemValue("Form","Favorite");
newDoc.appendItemValue("UserName", userName);
newDoc.appendItemValue("DocUNID", unid);
newDoc.save();
return;
}
function removeFromFavorites(unid, userName) {
var notesView:NotesView = database.getView("(lkpFavorites)");
var keys = new java.util.Vector();
keys.addElement(userName);
keys.addElement(unid);
var coll:NotesDocumentCollection = notesView.getAllDocumentsByKey(keys, true);
if(coll.getCount()==1) {
coll.getFirstDocument().remove(true);
}
return;
}
function isInFavorites(unid, userName) {
var notesView:NotesView = database.getView("(lkpFavorites)");
var keys = new java.util.Vector();
keys.addElement(userName);
keys.addElement(unid);
var coll:NotesDocumentCollection = notesView.getAllDocumentsByKey(keys, true);
if(coll.getCount()>0) {
return true;
} else {
return false;
}
}
I'd suggest you to put an xp:link around your image to cast the event code instead of using the evennts of the image directly.
OK, not sure what happened there but I manually edited the custom control's source to see wheter I had empty eventHandler as suggested by Oliver, and it started to work as expected. I am totally unsure of what I changed: to my knowledge, all I did was to add extra "returns" in the source view, to make it more readable... Christmas gift I guess.
All is good now. Thanks to all :)
I have a xpage that use view.postscript like this:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:dojoModule name="dojox.widget.Toaster"></xp:dojoModule>
<xp:styleSheet href="/.ibmxspres/dojoroot/dojox/widget/Toaster/Toaster.css"></xp:styleSheet>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[var Toaster = function(id, msg, type, duration, pos) {
type = (type == null) ? "message" : type;
duration = (duration == null) ? "5000" : duration;
pos = (pos == null) ? "br-up" : pos;
var obj = dijit.byId(id);
obj.positionDirection = pos;
obj.setContent(msg, type, duration);
obj.show();
}]]></xp:this.value>
</xp:scriptBlock>
<xp:div id="toaster" themeId="toaster" dojoType="dojox.widget.Toaster"></xp:div>
<xp:button value="Toaster" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:view.postScript("Toaster('"+getComponent("toaster").getClientId(facesContext)+"', 'toaster message!')");}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:view>
But when I click button,the toaster can't show.Why?
And I need a way to show the toaster called by ssjs function.
Thanks a lot.
As #Frantisek Kossuth said, you're re-submitting the page. When your refreshMode is complete it will re-render the page based on the server values. If you want to make client side changes and reflect them in your UI, you can't do a refresh of complete. Doing a partial refresh of the page on an element that won't change (like button1) should update your UI without rebuilding the page.
Similarly, why do you need this to be done through SSJS? Why not just use Client actions in your button activation? If this isn't part of a larger function call that you're not including, simply change the event code from Server to Client and call the Toaster function that way. This would also allow you to not have to submit anything, leaving submit="false" in your eventHandler to avoid unnecessary functionality.
I would like to refresh a Repeat Control triggered by client side Javascript. To make it interesting, my datasource is a JDBC query which is why I didn't just do a partial refresh.
I've seen pages about using an XHR request to do this, but I don't see how to refresh the JDBC data to capture the new info.
I can refresh the repeat control with the old data, not the new.
I saw Repeat control refresh error
which talks about possibly requiring a timeout because the runtime isn't aware of the new data.
I've run the XHR after manually changing something in the DB and waiting a minute, still had the stale info.
Can I update the variable (jdbcPendingSummary) in the RPC call, if not can I call back to the server to trigger the refresh inside the CSJS function?
<xp:this.data>
<xe:jdbcQuery connectionName="testDB"
sqlQuery="EXEC ptoGetPendingRequests #{sessionScope.userID}"
var="jdbcPendingSummary" />
</xp:this.data>
<xe:jsonRpcService id="ptoRPC" serviceName="ptoRPC">
<xe:this.methods>
<xe:remoteMethod name="createNewRequest">
<xe:this.script><![CDATA[
javaBeanObject.ptoCreateRequest(#{sessionScope.userID}, startDate, endDate, comment, d1,....,d15);
// Can I update the datasource var here?
]]></xe:this.script>
<xe:this.arguments>
<xe:remoteMethodArg name="startDate" type="string"></xe:remoteMethodArg>
..........
<xe:remoteMethodArg name="d15" type="number"></xe:remoteMethodArg>
</xe:this.arguments>
</xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
function createNewRequest(startDateID, endDateID, commentID, hiddenDivID, requestID) {
ptoRPC.createNewRequest(dojo.byId(startDateID).value, dojo.byId(endDateID).value, ........).addCallback( function(response) {
// ????? Refreshes the Repeat Control, but has the stale data.
setTimeout(
function() {
XSP.partialRefreshGet(requestID, {onComplete: function(responseData) { } })
// Or how about updating the datasource var here?
}, 8000);
});
}
]]></xp:this.value>
</xp:scriptBlock>
While this may not be a perfect solution, adding scope="request" to the JDBC code below caused the variable to be refreshed when the AJAX call completed.
<xp:this.data>
<xe:jdbcQuery connectionName="testDB"
sqlQuery="EXEC ptoGetPendingRequests #{sessionScope.userID}"
var="jdbcPendingSummary" scope="request" />
</xp:this.data>
You could achieve that using refresh() method of specific data source. So if you have a panel with some JDBC Query datasource configured - then inside inner view panel you could reference and refresh data via such syntax:
getComponent('some_panel_id_containing_your_datasource').getData().get(0).refresh();
While you could have multiple datasources configured for a panel - referencing to them is starting from 0 index.
Code snippet to demonstrate that technique could be like this (could make more sense if query would use some computed parameter to present different data on refresh):
<xp:panel id="outerContainer">
<xp:this.data>
<xe:jdbcQuery var="jdbcQuery1"
connectionName="derby1">
<xe:this.sqlQuery><![CDATA[#{javascript:"select * from users";
}]]></xe:this.sqlQuery>
</xe:jdbcQuery>
</xp:this.data>
<xp:viewPanel rows="10" id="viewPanel1"
value="#{jdbcQuery1}" indexVar="idx">
<xp:viewColumn id="viewColumn1" columnName="id"
displayAs="link">
<xp:this.facets>
<xp:viewColumnHeader xp:key="header"
id="viewColumnHeader1" value="ID">
</xp:viewColumnHeader>
</xp:this.facets>
<xp:eventHandler event="onclick"
submit="true" refreshMode="partial" refreshId="outerContainer">
<xp:this.action><![CDATA[#{javascript:
getComponent('outerContainer').getData().get(0).refresh();
}]]>
</xp:this.action>
</xp:eventHandler>
</xp:viewColumn>
</xp:viewPanel>
</xp:panel>
I have an XPage which has just broken due to (what should have been) a small change.
If I run (where document1 is NotesXSPDocument datasource) :
document1.replaceItem("ItemName", false); //or true, or any variable/formula that results in a boolean
followed by:
document1.getDocument(true);
I end up with an error
[TypeError] Exception occurred calling method NotesXspDocument.getDocument(boolean) null
This is on a new document (so not saved yet, which I've not tested, but might make a difference), hence I can't just set the field on the underlying doc.
It doesn't seem to be an artifact of anything else in the page, as a basic test page confirms it. It doesn't happen with anything (I've found) other than a boolean.
Any advice, other than just change the data type? I guess that's what I'll end up doing (along with a bug report) but I'd like to know I'm not missing something first.
Thanks
------------Test XSP code------------
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"><xp:this.data>
<xp:dominoDocument var="document1" formName="Test" />
</xp:this.data><xp:span style="font-weight:bold">
Button 1 code:</xp:span><xp:br></xp:br>document1.replaceItemValue("Test",false);
<xp:br></xp:br>var doc:NotesDocument = document1.getDocument(true);
<xp:br></xp:br>print(doc.toString());<xp:br></xp:br>
<xp:button value="Test 1" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:document1.replaceItemValue("Test",false);
var doc:NotesDocument = document1.getDocument(true);
print(doc.toString());}]]></xp:this.action>
</xp:eventHandler></xp:button>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br><xp:span style="font-weight:bold">
Button</xp:span><xp:span style="font-weight:bold"> 2</xp:span><xp:span style="font-weight:bold"> Code:</xp:span><xp:span style="font-weight:bold"></xp:span> <xp:br></xp:br>document1.replaceItemValue("Test","Test);<xp:br></xp:br>var doc:NotesDocument = document1.getDocument(true);
<xp:br></xp:br>print(doc.toString());<xp:br></xp:br><xp:button value="Test 2" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:document1.replaceItemValue("Test","Test");
var doc:NotesDocument = document1.getDocument(true);
print(doc.toString());}]]></xp:this.action>
</xp:eventHandler></xp:button></xp:view>
If you have a look in the stack trace you will see the following:
....
NotesException: Unknown or unsupported object type in Vector
lotus.domino.local.Document.NreplaceItemValue(Native Method)
lotus.domino.local.Document.replaceItemValue(Unknown Source)
com.ibm.xsp.model.domino.wrapped.DominoDocument.applyChangesToDoc(DominoDocument.java:1698)
com.ibm.xsp.model.domino.wrapped.DominoDocument.applyChanges(DominoDocument.java:1649)
com.ibm.xsp.model.domino.wrapped.DominoDocument.getDocument(DominoDocument.java:544)
com.ibm.xsp.script.WrapperDominoEx$fct_DominoDocument.call(WrapperDominoEx.java:254)
....
The problem is that you use the replaceItemValue method with an unsupported data type.
Here is a list of all allowed data types:
String Text
Integer Number
Double Number
DateTime Date-time item
java.util.Vector with String, Integer, Double, or DateTime elements Multi-value text, number, or date-time item
Item Same data type as the Item
The error is raised in the moment the backend document is synchronized with the datasource document. That's why it fails while calling document1.getDocument(true).
Hope this helps
Sven
EDIT:
Why are you setting the value to false?