is it possible to call a Dialog component in typeAhead functionality?
What i want to do is If the user enter a word which does not come up with typeAhead function then a dialog should appear on the screen.
Please find my code below (my dialog is in custom control)
Regards
Cumhur Ata
<?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:dialog id="dialogConfirmation">
<div class="modal-body">
<p>You have entered a word which is not in the list</p>
<p class="text-warning">Please add/or cancel<small> </small></p>
</div>
<xe:dialogButtonBar id="dialogButtonBar1">
<xp:button value="Hayır" id="btnConfirmYes">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogConfirmation}')]]></xp:this.script>
</xp:eventHandler></xp:button>
<xp:button value="Evet" id="btnConfirmNo" styleClass="btn-primary">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:openNewFrm(sessionScope.extDbPath,sessionScope.expDbPage)}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xe:dialogButtonBar>
<xe:this.title><![CDATA[#{javascript:var c = "Warning";return c;}]]></xe:this.title></xe:dialog></xp:view>
You can hijack the result of the typeahead and call your dialog if it's empty by using this snippet:
https://openntf.org/XSnippets.nsf/snippet.xsp?id=typeahead-onstartoncomplete-event
I don't have Domino Designer at hand right now so I can't try this out. So this is just guessing:
I don't think that you can use the standard Edit Box control's type ahead feature for something like that; instead you could program this yourself using the control's "onkeyup" event, mimicking the standard type ahead. the idea is that a classic type-ahead operates as a filter to a list of possible entries, just like a "getElementsByKey" method that is fired upon each key stroke. So with every event you check what's in the Edit Box so far, compare it to your list, then display the filtered result to the user in a pop-up (you may want to use a dojo tooltip here).
If the result is null you can bring up your dialog instead.
Related
I have a document that contains a rating custom control (xInvolve, which is excellent!). In this application, administrators want the ability to delete certain ratings for a certain document or all of them (bad ratings on purpose, new version of the document, corrections made to the document ...).
I am showing up the ratings in a view, in a dialog box (the extension Library dialog box, not a Dojo one). In that dialog box, I have a "Delete All" button. That button calls a SSJS function that deletes the rating documents for the document that is currently opened, but I want to refresh the panel that displays the rating, as it should now be empty.
So far, I was able to close the dialog box, but I can't seem to get the panel to refresh. Here's the code for the "Delete All" button:
<xp:button value="Delete All" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:confirm
message="Are you sure you want to proceed?">
</xp:confirm>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:deleteAllRatings(pageDocument.getDocument().getUniversalID());
var c = getComponent("dialogPageRatings");
c.hide("PanelHeader")}]]></xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
The PanelHeader is the panel where the xRating control is inserted.
Should I try putting code in the onClose event of the dialog box? I tried but I didn't get more luck.
Thanks
So you can use client side code to achieve this. This is what we do:
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:var strClientCode = "$('#editDeliveryAddressDialog').modal('hide'); window.location.reload();"
view.postScript(strClientCode);}]]></xp:this.script>
</xp:executeScript>
Hope it helps.
Ben,
Here is a solution using the RPC control. This control allows you to call server code directly from clientside javascript. I have frequently used it to call java methods, but haven't used it to call a SSJS function in a library. I make the assumption that it would work the same.
<xe:jsonRpcService id="jsonRpcService1" serviceName="myRPC"
pathInfo="rpc">
<xe:this.methods>
<xe:remoteMethod name="callDeleteAllRatings">
<xe:this.script><![CDATA[deleteAllRatings(universalID)}]]></xe:this.script>
<xe:this.arguments>
<xe:remoteMethodArg name="universalID" type="string" />
</xe:this.arguments>
</xe:remoteMethod>
</xe:this.methods>
</xe:jsonRpcService>
You would not be able to use getComponent in the RPC, so you would need to pass the UNID. You could pass this to the clientside using a <xp:hiddenInput> when you launch the window. You would close the window in the same manner that you do now (I think).
To call the method of the service, you would use myRPC.callDeleteAllRatings("Open ATM", ""); Again, you call the RPC from clientside.
IMO, once you learn what the RPC can do for you, you wonder how you made due without it.
As Mark suggested in a comment above, you should be able to use the onHide property. For example if you wanted to refresh a panel with serverSide id panel1
<xe:dialog id="dialog1" title="Example Dialog"
onHide=" XSP.partialRefreshGet('#{id:panel1}'); ">
This is working for me
Can you not just do a partial refresh? I do that with a simple dialog like so...
<xp:button value="Save and Close" id="button2" styleClass="btn btn-primary">
<xp:eventHandler event="onclick"
submit="true" refreshMode="partial"
refreshId="panelRefresh"
disableValidators="true"
onComplete="$('#myModal').modal('hide');">
<xp:this.action><![CDATA[#{javascript:var value:string=getComponent("inputText1").value;
document1.replaceItemValue("modalTest",value)}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
The scenario:
Clicking on a link, I'm accessing an xpage, let say: start.xsp.
I've added the following script to this .xsp:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
XSP.addOnLoad(function(){
XSP.openDialog("#{id:dialogSearch}")
});
]]></xp:this.value>
</xp:scriptBlock>
So, every time this .xsp is loaded, a dialog is showing up. The problem is the current start.xsp is being refreshed/loaded many times, considering the fact that the xpage have numerous fields/controls on it. It is uncomfortable every time this start.xsp is loaded / refreshed the dialog to show up.
Is it possible to show the dialog after the start.xsp is loaded but ONLY when the above link was clicked? I do want firstly to go to that xpage and after this to show the respective dialog.
Thanks for your time.
Set a session scope variable in your link
<xp:link
escape="true"
text="Link"
id="link1">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
sessionScope.showDialogSearch = "yes";
context.redirectToPage("start.xsp")
}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
Add a rendered attribute to your start.xsp's xp:scriptBlock
<xp:this.rendered><![CDATA[#{javascript:
var show = sessionScope.showDialogSearch;
sessionScope.remove("showDialogSearch");
return show
}]]></xp:this.rendered>
This way dialog is only be shown if start.xsp was executed from your link and only once because it gets deleted at first use in rendered attribute.
Here is what I have :
Lotus database (8.5.3) with jQuery and jQueryUI included
form1 is a form with just one field.
It is set to
"On open - Automatically enable Edit mode"
"On Open - Display XPage instead : xpage1"
"On Web Access - Display XPage instead : xpage1"
xpage1 is an xpage. It contains :
An inputBox linked to the field in form1
A button that calls a small script, just alert("some text")
A jQuery script is included on the page. It's a draggable Panel. It's all there is to it. Just a panel that you can drag on the page.
view1 is a view displaying documents based on form1
Now my problem :
If launch the Xpage in my browser (Chrome or IE), it behaves normaly : I can see my alert when I click on the button, I can drag my panel on the page, I can fill my field, I can save the document.
When I open it later, however, the Xpage opens and display the field data, but my scripts don't work : impossible to save the document, move the panel, display the alert.
If I launch the Xpage in my Lotus client, it works !
If I remove my jQuery reference and my movable panel, the other scripts work.
Did I forget something ? Is it some kind of known problem?
Here is my Xpage source, for reference :
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<!-- THIS WHERE I MAKE JQUERY AVAILABLE -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<!-- THIS IS MY DATA BINDING -->
<xp:this.data>
<xp:dominoDocument var="ds1" formName="form1"></xp:dominoDocument>
</xp:this.data>
<!-- THIS IS MY FIELD -->
<xp:br></xp:br>
Field1 : <xp:inputText id="field1" value="#{ds1.field1}"></xp:inputText>
<xp:br></xp:br><xp:br></xp:br>
<!-- THIS IS MY PROMPT BUTTON -->
<xp:button value="Alert" id="button2">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[alert("Waring!")]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br><xp:br></xp:br>
<!-- THIS IS MY MOVABLE PANEL -->
<xp:panel id="myPan01"
style="height:120px;width:120px;background-color:rgb(0,64,128)">
<xp:this.attrs>
<xp:attr name="class" value="dragItem"></xp:attr>
</xp:this.attrs>
<xp:div style="text-align:center">
<xp:span style="font-weight:bold;color:rgb(255,255,255)">
</xp:span>
</xp:div>
<xp:div style="text-align:center">
<xp:span style="font-weight:bold;color:rgb(255,255,255)">
Move Me!
</xp:span>
</xp:div>
</xp:panel>
<script>
XSP.addOnLoad(function(){ $(".dragItem").draggable({ grid: [
40,40 ]}); })
</script>
<xp:br></xp:br>
<!-- THIS IS MY SAVE BUTTON -->
<xp:button value="Save" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true">
</xp:eventHandler>
<!-- THIS IS THE END... -->
</xp:button>
</xp:view>
You're including jquery via a standard HTML <script> tag, this may lead to problems since this will be placed in the HTML body instead of the header.
Use the XPage's resource's property. Add some client side JavaScript library with in the XPage ressources properties, then go to the source of the XPage, locate the xp tag that includes the JavaScript library and change it's URL so that your jquery resource is included.
I'm not 100% sure that this solves your problem, but since your code looks good otherwise it's worth a try.
When a user clicks on a tab of a tabbed table, I want to be able to set the focus tot the first field on that tab.
Each tab seems to only have one event mouse onclick. So I tried placing the following code in one of that tab's onclick events.
var f = dojo.byId('#{id:NotInvitedMsg}');
if (f != null)
f.focus();
But when I click on the tab nothing happens. And I mean nothing. The tab can no longer be selected and the script is never executed.
Any way around this?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:tabbedPanel id="tabbedPanel1">
<xp:tabPanel label="New Tab" id="tabPanel1">
<xp:panel>
<xp:inputText id="inputText1"></xp:inputText>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputText1}");
if (edit) {
edit.focus()
}]]></xp:this.script>
</xp:eventHandler>
</xp:panel>
</xp:tabPanel>
<xp:tabPanel label="New Tab2" id="tabPanel2">
<xp:panel>
<xp:inputText id="inputText2"></xp:inputText>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var edit = dojo.byId("#{id:inputText2}");
if (edit) {
edit.focus()
}]]></xp:this.script>
</xp:eventHandler>
</xp:panel>
</xp:tabPanel>
</xp:tabbedPanel>
</xp:view>
This is working code (tested on Chrome and IE9). It uses simple trick I saw few days ago (and I want to apologize to original author, I couldn't manage to find the original post): to create onClientLoad event at XP/CC level, and to move event handler in source view into the panel body. Works like charm...
Try the HTML5 Autofocus attribute:
<xp:inputText id="field1" value="#{document.Field1}">
<xp:this.attrs>
<xp:attr name="autofocus" value="autofocus"></xp:attr>
</xp:this.attrs>
</xp:inputText>
One caveat: The autofocus attribute is supported in all major browsers, except Internet Explorer.
This might not be exactly what you´re looking for, but maybe it can be of some help..
Link -> How can I set focus to Edit Box inside repeat control?
I'm working on an XPage for mobile users for an existing application. I want to use the mobile controls from the ExtLib for this.
I've build an XPage with a SinglePageApp and some AppPages on it. Now I want to build an AppPage with a search menu, a simple inputText and a button to start the search.
The inputText is bind to a sessionScope variable. I want to use the variable in a second appPage to get the search value and show a filtered/searched view.
The problem is the button. I'm not sure how to build this button to move to the other appPage. This is my last attempt, which fails with a runtime error.
Any idea how to get this running or what's wrong ?
Kind regards
Ingo
<xe:appPage id="appPage34" pageName="searchPage" preload="true" resetContent="true">
<xe:djxmHeading id="djxmHeading34" label="Search..." back="Home" moveTo="home">
</xe:djxmHeading>
<xp:inputText id="searchInput" value="#{sessionScope.searchValue}">
</xp:inputText>
<xp:button value="Search" id="button1" refreshMode="complete" type="submit">
<xp:eventHandler event="onclick" submit="true">
<xp:this.action>
<xe:moveTo targetPage="#searchResult"></xe:moveTo>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xe:appPage>
What does the runtime error say?
If you can not get to the XPages log files on the server directly, then use XPages Log File Reader from OpenNTF to get easy access to the log files from a browser.
Does it work if you use "searchResult" as the value for targetPage (assuming the appPage is called "searchResult")?
I've now come to a solution with a static line item instead of a button, since I couldn't get the button working. I think it has something to do with the way the single page application handles the access to mobile pages.
The search page looks like this :
<xe:appPage id="appPage34" pageName="searchPage" preload="true" resetContent="true">
<xe:djxmHeading id="djxmHeading34" label="Search..." back="Home" moveTo="home">
</xe:djxmHeading>
<xp:inputText id="searchInput" value="#{sessionScope.searchValue}">
<xp:eventHandler event="onblur" submit="true" refreshMode="complete">
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:var svalue = getComponent("searchInput").getValue(); sessionScope.put("searchValue",svalue);}]]></xp:this.script>
</xp:executeScript>
</xp:this.action>
</xp:eventHandler>
</xp:inputText>
<xp:br></xp:br>
<xp:br></xp:br>
<xe:djxmLineItem id="djxmLineItem41" label="Start Search..." moveTo="#searchResult">
</xe:djxmLineItem>
</xe:appPage>
In the mobile page for showing the search result I simply get the value of the sessionScope variable, issue a full text search with the value and use the resulting document collection in a repeat control.
I still would rather use a button because the static line item is not really what a user expects as a gui element to start the search. But at least this is working.