I've been searching a lot to find a way to fire some JS function when a fragment loads. Unfortunately, I can't seem to find an event that I can use inside af:clientListener tag which would say, to put it in a literal sense,
Run this javascript function when the fragment loads
This makes me believe (though could be wrong) that there isn't one available. Is this true?
You can use an af:poll that fires only once.
Please see if you find this useful:
http://andrejusb.blogspot.co.uk/2015/03/automatic-adf-popup-opening-on-fragment.html
Related
I have the following structure
<my-app>
<my-modal> <!--
<my-form></my-form>
</my-modal>
</my-app>
my-modal is designed as a generic wrapper, which I use to wrap many different dialogues within my app. In it I listen for a location change, and render html '<slot></slot>'
My problem is that, although my-modal is behaving correctly by showing and hiding the form, the form itself is never re-rendered, and so is always displayed showing stale content. I am currently kludging something using IntersectionObserver to fire when visible, but this feels really hacky and is causing other issues.
Is there a way that my-modal can force its children to re-render, even though the only child it knows about is <slot></slot>. I don't want my-app to know anything about my-modal's behaviours.
Might not fit
I don't want my-app to know anything about my-modal's behaviours
but you could add a function requestFullUpdate to my-modal which then iterates over all children and does a requestUpdate for all of them. Could be done on open/close or so... or even in an interval :p
However, I have a feeling that this just cures a "side effect" from an unfitting structure... maybe try to look at it from a different perspective - maybe something like this? https://stackoverflow.com/a/56297264/3227915
I have a Xpage that takes too long to load. So the client ask me to do a loading indicator.
I searched and found XSP.startAjaxLoading(), that I put in onClientLoad event of the Custom Control.
But now I don't know where should I put XSP.endAjaxLoading() to make the loading screen go away.
I'tried to use in afterRenderResponse and beforeRenderResponse: view.postScript("XSP.endAjaxLoading()"), since this comand is CSJS, but it doesn't work.
Thanks in advance.
I think you want to put it in the onComplete event. That can be difficult to find. You typically need to use the outline control to find it.
I have a video demo on NotesIn9 that has an example on this.
http://www.notesin9.com/2016/02/19/notesin9-188-adding-a-please-wait-to-xpages/?unique=http%3A//www.notesin9.com/2016/02/19/notesin9-188-adding-a-please-wait-to-xpages/
Your attempt (view.postscript) works only with full/partial updates and does not work for page loading.
You have used onClientLoad - which is executed when your page is finished with loading. I guess you get ajax animation after a while and it won't stop.
You should make preload screen - very simple XPage which starts animation and does not care to turn it off. In onClientLoad event redirect to your slow XPage. That will discard the animation.
I'd highly recommend using the Standby Dialog XSnippet https://openntf.org/XSnippets.nsf/snippet.xsp?id=standby-dialog-custom-control. I use it as a standard in all XPages applications.
I used this answer as solution: https://stackoverflow.com/a/35481981/5339322
I've saw it a few days ago, what made me think twice is that using this i should know what is doing my XPages to delay. I ran some tests and discovered what, and it was a call to a method in the afterRestoreView event, then I migrated it to onClientLoad event and used the solution in the answer above cited.
But I'm afraid that I have to keep an eye on it, so if someone adds some code that delays in one of the another events of XPages I have to move it again, of course, if it's possible, if it's not, I'll figure it out something diferent.
Thanks for all the answers ans comments.
when we type into autoComplete, primefaces automatically highlighted first shown item. so when we press enter key that item will be selected. how can i change the behavior of enter key, so when it pressed, just entered text be submitted in backing bean property.
I know we can hit ESC button then continue but but user don't like it.
I am using primefaces 5.0 & jsf 2.1.11
What helped me to solve the same issue where the answers here and here. Basically, you have to override 2 different behaviours.
First one is the default selection of the first result, that can be achieved adding this to your autocomplete (as stated by the accepted answer in the first link, available in primefaces for versions 5.1.5, 5.0.14 and 5.2):
autoHighlight="false"
The second thing you want to override is the behaviour when Enter is pressed, as you want the form that contains the autocomplete to be submitted. For doing so, just add this code to either the containing form or the autocomplete:
onkeyup="if (event.keyCode == 13) {
document.getElementById('[searchFormId]:[submitButtonId]').click();
return false; }"
Change the ids between square brackets for your own ones and it's done.
PS: I know this is a rather old question but it still applies to the current version of primefaces (6.1 when this question was answered). And I also think it can help to have both changes combined in one answer.
Truth be told, this feels like a bug. Richfaces do that implicitly (submit on enter while suggesting). I haven't found an official fix so I did some research and turns out the simplest way is to override the JS function that resolves key presses. The whole autocomplete js is here. You just need to override the bindKeyEvents function so you declare it likewise:
PrimeFaces.widget.AutoComplete.prototype.bindKeyEvents = function () {
Then add the rest of the code for this specific function from the JS I mentioned before. I've omitted that code so it's more readable. Then you want to find a switch that resolves different keys that have some behavior mapped to them. And under the code:
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
Add something like:
if (highlightedItem.length == 0) {
document.getElementById("<your_form_id>").click();
_self.hide();
} else {
highlightedItem.click();
}
Also, make sure that you got forceSelection and the autohighlight off on the autocomplete component.
The problem in the JS is that even though you haven't selected any item from the suggestions it still triggers the event that tries to click the item... which doesn't even exist.
This is the simplest way as I said... you can also create your own autocomplete implementation and override the behavior there. But that's a lot of work and if you only need this one feature I suggest overriding the JS function.
In order to override the original JS with your custom one you need to make sure yours is loaded after the original one. To do that you can either use h:outputScript or simply just load the javascript like you're used to... but in the body (not the head).
Also there's probably a fancier way than having to specify the form id. But I just wasted too much time searching for a solution that I had to get it done real fast.
In am using YUI browser history manager for keeping track of Ajax navigations. I am registering history object like:
YAHOO.util.History.register("state",init, onStateChange);
Here onStateChange is getting called when I do
YAHOO.util.History.navigate("state",urlhash);
and when I press back button.
Is there any way to know if onStateChange is called on back button or by calling navigate?
If this event can be called by an external system sometimes (in this case the browser back button) and by your own code sometimes, you can differentiate the caller by making it a requirement to do something special when your own code calls the method. Wrapping the call to navigate() in your own helper method can help make sure you stay consitent with this.
In the YUI docs I see that register() can take an optional 4th parameter (among others) which is an arbitrary object that will get passed into your onStateChange handler function. One of the properties of this object could be a flag indicating that it was called from your code versus initiated by the browser, and in your navigate() wrapper always set that flag. Remember to set it back in your handler.
Note: I am not as familiar with YUI as ExtJS, maybe some guru that knows the API better can help, but this is a general strategy that can work. This answer makes an inelegant assumption that a call to navigate() will make that handler fire reliably before any other navigation has a chance to occur, which is probably a safe bet in the single-threaded javascript world.
Inside my "dom ready" function, I create a TabView on an HTML element and call tabview.getTab(0).blah(). Unfortunately every now and then I get an error that tabView.get("tabs") returned null in my javascript console (firefox).
YAHOO.util.Event.onDOMReady(function() {
tabview = new YAHOO.widget.TabView("content");
var tab0 = tabview.getTab(0);
...
tabview.getTab(0) is implemented as tabs.get("tabs")[0].
This happens sometimes but not every time. Does anybody have an explanation for why this happens sometimes? The DOMReady event occurs after the entire DOM is in place but before anything is displayed, right?
Speaking of which, sometimes I see flashing of data in some of the other tabs. That does not bode well I think for the nice, clean experience I was hoping for.
This is YUI 2.7.0/
OK - I believe the answer is, I was trying to use prototype and YUI at the same time. In theory I think that is possible but you need to pick one or the other when it comes to doing things on the "dom:loaded"/onDOMReady events, if you know what I mean.
So I don't know what was happening, but it was some sort of race, and once I picked a single mechanism for doing things when the dom was ready, everything is working fine.