XPages Button unresponsive after 4 ajax calls - xpages

Maybe I'm going crazy, but I think this is an issue of XPages
I'm working with XPages with Domino 9.0.1 FP3.
It seems that when I do a page that does XPages 4 ajax calls to a xagent, one after the other all the buttons on the page become unresponsive.
Up to 3 ajax calls everything works ... doopo fourth buttons become unresponsive.
Seeing is believing!!!!**
-------------------------------------------------------------------------------
****This is my example page**:** testPage.xsp
-----------------------------------------------------------------------------
<? Xml version = "1.0" encoding = "UTF-8"?>
<Xp: view xmlns: xp = "http://www.ibm.com/xsp/core">
<Xp: button value = "Update edit box" id = "button1">
<Xp: EventHandler event = "onclick" submit = "false"
refreshMode = "partial" refreshId = "inputText1">
<xp:this.action><![CDATA[#{javascript:getComponent("inputText1").setValue(session.createDateTime(#Now()))}]]></xp:this.action>
</ Xp: EventHandler> </ xp: button>
<Xp: inputText id = "inputText1"> </ xp: inputText>
<Xp: br> </ xp: br> <xp: button value = "Call for Ajax 3 time (button Work)" id = "button3">
<Xp: EventHandler event = "onclick" submit = "false">
<Xp: this.script> <! [CDATA [for (i = 0; i <3; i ++) {
   dojo.xhr.get ({
  url: "http://app.quattroemme.it/home.nsf/testXagent.xsp"
  handleAs: "xml"
  load: function (data) {
  }
});
}]]> </ Xp: this.script>
</ Xp: EventHandler> </ xp: button>
<Xp: br> </ xp: br>
<Xp: br> </ xp: br>
<Xp: button value = "Call for Ajax 4 time (button unresponsive)" id = "button2">
<Xp: EventHandler event = "onclick" submit = "false">
<Xp: this.script> <! [CDATA [for (i = 0; i <4; i ++) {
   dojo.xhr.get ({
  url: "http://app.quattroemme.it/home.nsf/testXagent.xsp"
  handleAs: "xml"
  load: function (data) {
  }
});
}]]> </ Xp: this.script>
</ Xp: EventHandler> </ xp: button>
</ Xp: view>
--------------------------------------------------------------------------------
This is the simple xagent I call with ajax (testXagent.xsp)
--------------------------------------------------------------------------------
// The external context gives access to the servlet environment
var exCon = facesContext.getExternalContext();
// The writer is the closest you get to a PRINT statement
// If you need to output binary data, use the stream instead
var writer = facesContext.getResponseWriter();
// The servlet's response, check the J2EE documentation what you can do
var response = exCon.getResponse();
// In this example we want to deliver xml and make sure it doesn't get cached
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
// Here all your output will be written
writer.write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<christmas date\"24Dec\" />");
// We tell the writer we are through
writer.endDocument();
print ("XAGENT")
facesContext.responseComplete();

Ensure your XAgent's XPage is not set to store the state. That's done by going to the All Properties tab of the Properties panel and, in the Basics section, setting viewState to nostate. Otherwise a component tree for the XPage is stored server-side. There are a fixed number of component trees that can be stored and you can hit that by loading multiple window tabs or repeatedly loading XAgents where viewState has not been overridden. The result is an XPage which is non-responsive to partial refreshes. (Admittedly I always use a partial refresh to call an XAgent, so I'm not 100% sure this will also affect a dojo.xhr.get.)
Keeping a component tree stored server-side is normal behaviour in XPages and required in order for the XPage to be "stateful". Otherwise, the "next" button on a pager would only ever go to page 2, because it doesn't know what page the browser is currently on, only what the default is, i.e. Page 1.

Thanks Paul. I resolve my problem using viewState = nostate.
My problem appears from the use of ExtJs TreeGrid that opens nodes on demand
The TreeGrid uses two xagent that read data from the server and return json that ExtJs use for render tree. When I had to open all the tree TreeGrid automatically made a call to xagent for each node and the buttons have become unresponsive .... !!!!!!! now everything is OK

Related

Dynamic primefaces menuItem don't fire command

Environment:
Java 7
Jboss 5.2
Primefaces 6.2
The problem I get is that when I click on the menu item the command does not fire the themeSwitcherBean.changeToOld method. What is wrong?
MenuModel menu = new DefaultMenuModel();
Create Menu
...
for (Iterator<Menu> it = children.iterator(); it.hasNext(); ) {
Menu subMenu = (Menu) it.next();
String index = subMenu.getCodi();
String element = rootCodi + index;
DefaultMenuItem menuItem = new DefaultMenuItem(menuName);
menuItem.setId(element);
menuItem.setUrl(subMenu.getServletPath());
menuItem.setCommand("#{themeSwitcherBean.changeToNew}");
menuItem.setUpdate(":content");
rootNode.addElement(menuItem);
}
menu.addElement(rootNode);
...
Menu.xhtml
<h:form id="frmMenu">
<pu:menu model="#{sessionBean.menu}">
</h:form>
If you set an URL to a menuItem.url property it is rendered as a simple hyperlink using href.
Clicking on this results in the browser to navigate to the given URL and request it using GET rather than doing a POST request optionally using AJAX.
This finally will not update ":content" the AJAX way and not invoke your themeSwitcherBean.changeToNew action method.
In order to have your action method invoke you have to skip that line:
menuItem.setUrl(subMenu.getServletPath());
If you find you need to reload the entire page (which is likely when switching themes) instead of the element referenced using ":content" only, make your action method return that instruction as String:
public String changeToNew() {
// do something ...
// ...
String viewId = FacesContext.getCurrentInstance().getViewRoot().getViewId();
return viewId + "?faces-redirect=true&includeViewParams=true";
}
In this case you can disable AJAX on that menu item reducing the request/response/javaScript overhead a little bit:
menuItem.setAjax(false);

UWP/WinJS: show a html page in a pop-up window

I am working on a JavaScript based UWP app. Now I need to dynamically show a html page(with a url) in a pop-up window.
I did some search, there is a ContentDialog I can probably use:
var object = new WinJS.UI.ContentDialog(element, options);
but I cannot find any JavaScript sample code for it. I couldn't figure out what should I pass as "element" and how I put the html in ContentDialog.
Thanks in advance for any help.
The WinJS playground shows you how to use the ContentDialog: http://winjs.azurewebsites.net/#contentdialog
The element you pass is the Html element you want to initiate as the dialog.
<div id="myDialog">I am the going to be the dialog content.</div>
 
var element = document.getElementById('myDialog');
var options = {
title: 'Main instruction',
primaryCommandText: 'Ok',
secondaryCommandText: 'Cancel'
};
var dialog = new WinJS.UI.ContentDialog(element, options);
If you want to set the dialog content dynamically you can do so with
var webview = document.createElement('x-ms-webview');
webview.src = 'http://stackoverflow.com';
dialog.element.querySelector('.win-contentdialog-content').appendChild(webview);
dialog.show();

xpages computed onClick open forms

I'm trying and trying for some time to resolve a viewPanel functionality - var property set to rowData.
Depending on the form name, I want to open the docs. ( which are listed in my viewPanel ) in a normal way and into a <xe:dialog> control. I did found this question Xpages Dynamic dojo dialog control and I'm trying to make it works in my case. the docs which I want to be open in the <xe:dialog>, are also created inside the dialog. By this viewpanel, I want to show/open them using this viewPanel control.
Here is the code from the onClick column event:
var formName = rowData.getDocument().getItemValueString("Form");
var docUNID = rowData.getDocument().getUniversalID();
var href = facesContext.getExternalContext().getRequest().getContextPath();
var pe:NotesViewEntry = rowData
if ( formName == "fmCompanie") // in this case, it works OK.
{ href + "/doc.xsp?documentId=" + docUNID + "&action=openDocument"; }
else if ( formName == "fmPersContact" ) // hmm... Still trying...
{ viewScope.put("dlgDocUnid", pe.getUniversalID())
getComponent("exampleDialog").show(); }
So, by this event I'm trying to set a viewScope variable which uses the UNID for the datasource in my exampleDialog control.
Also: the dialog control ( which lays on the same custom control as the viewPanel) has the documentId:
<xp:this.data>
<xp:dominoDocument var="Pdoc" formName="fmPersContact"
ignoreRequestParams="true" scope="request">
<xp:this.documentId><![CDATA[#{javascript:viewScope.get("dlgDocUnid");}]]></xp:this.documentId>
</xp:dominoDocument>
</xp:this.data>
Still, when I'm trying to open a doc. ( using form == "fmPersContact") the dialog has all fields empty, even if the doc. is already fill with some field values.
I appreciate your help. Thanks for your time.
The data source in the dialog does not contain action attribute. Therefore it does not respect the documentId parameter and creating a new document within the dialog.
Add action="editDocument" attribute and it will work.
Also, check what you are refreshing with the onclick event. You should partially refresh an area that contains your data (e.g. dialog or the panel in your dialog, etc.)

How to get the value of Radiobutton Listitem using Javascript

I want to get the value of the selected item of a radiobutton List using javascript.
My code is:
<asp:RadioButtonList runat="server" ID="Radio" RepeatColumns="3" CssClass="textfont">
<asp:ListItem Value="1" Selected="True">First</asp:ListItem>
<asp:ListItem Value="2">Second</asp:ListItem>
<asp:ListItem Value="3">Third</asp:ListItem>
</asp:RadioButtonList>
And this is my Javascript code:
<script type="text/javascript">
function sendParameters() {
var Id = '<%=HiddenField1.Value%>';
var ddl1 = document.getElementById("Radio").checked;
</script>
How to proceed?
First of all please view the source of the resulting web page and post the resulting radio button html. This will make it easier to answer because then the question comes down to plain HTML and jQuery.
The Reason is asp often changes the name of the ID, unless you add ClientIDMode="Static" to your control.
Once that is done this should do it:
var chosenValue = $('input:radio[id="Radio"]:checked').val();
alert(chosenValue);

Getting the co-ordinates of a component

How to get the co-ordinates of a JSF component after onclick event ? I need to place an overlay just below an icon that was clicked.
Is there any such in-built facility provided by JSF rather than manually writing a javascript function for that ?
No, there isn't. The position is browser (client) dependent. In the client side there is also totally no means of JSF, it's all just plain HTML/CSS/JS. The location can only be extracted from the HTML DOM element. You'd have to pass it from JS to JSF or do the business job fully in JS instead of JSF.
As PrimeFaces ships with jQuery, your best way to retrieve the element position relative to the document is using jQuery.offset().
var $element = jQuery('#someid');
var offset = $element.offset();
var x = offset.left;
var y = offset.top;
// ...
In addition to BalusC's answer, here is an example, where a click on a component with id=placeholder (maybe a link or button) will open another component (id=menu) directly below the triggering component. If the mouse is moved away from the triggering component, the menu will disappear:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#placeholder").click(function(event) {
//get the position of the placeholder element
var pos = jQuery(this).offset();
var height = jQuery(this).height();
//show the menu directly below the placeholder
jQuery("#menu").css( { "left": pos.left + "px", "top": (pos.top + height) + "px" } );
jQuery("#menu").show();
});
// hide the menu on mouseout
jQuery("#placeholder").mouseout(function(event) {
jQuery("#menu").hide();
});
});
</script>
The component with id=menu can be a div or a jsf h:panelGroup or any other component. The style attribute with display: none will initially hide the component:
<h:panelGroup style="position: absolute; display: none;" id="menu">
<!-- content here -->
</h:panelGroup>
Make sure that the jQuery id selector gets the correct id of the component. E.g. if your elements are inside a form with id=form1, the jQuery call has to look something like this:
jQuery("#form1\\:placeholder").click(function(event)
Notice the double backslash.
I'd recommend using a JSF component library like RichFaces or IceFaces. Many of them have AJAX capabilities and JavaScript library integration, and therefore have components for doing that kind of thing.

Resources