I have an JSF application with Primefaces 5.1 components and I have a problem regarding the Primefaces ajax calls.
On the view, there is a hidden <p:commandButton> that every x seconds it is triggered(by event="click") and a web-service call is done. Now, the problem is that when this ajax call is executing, the whole UI it gets blocked and the user can't interact with the application anymore.This is a huge problem for me since this call can take up to 1 second.
For example, if the user types something in an input field, and in the same time the ajax call is done, everything the user typed is displayed after the call is completed.
My question is the following: Does anyone experienced the same problem? If yes do you find a way of doing things as the ajax call won't block the UI? Thank you.
I must add that the commandButton component have an async attribute. I have set the attribute to true, but the problem persists.
Related
Is it possible to use AJAX to load a page, say pageB, into pageA. Where pageB uses AJAX to load some information into it from pageC?
The call on pageB doesn't seem to be made even though the call to pageB returns a ready state of 4.
Is it actually possible?
Thanks
I want to implement a "typeahead" type of functionality but for effiency reasons to avoid return a list of possibly thousands of entries, I only want to fire the request to the server when the user has entered at least three characters. I.E. on the 3rd keypress, I want to call my server side search via ajax.
I'm not looking for a full runnable example, just a sketch of how this might be possible, as I'm a bit stumped by it.
I do have a generic ajax handler js file in my app to render the ajax "spinner" so I thought I might be able to hook into event method for status="begin" and somehow abort the request if the input field has less than 3 characters but I don't see how that's possible.
I'm hoping a certain JSF guru might be able to point me in the right direction :)
I'm using standard reference JSF2, no 3rd party libraries...
How about adding a onkeyup="myFunction(event)" to your input
<input type="text" onkeyup="myFunction(event)">
and in js add the following
function myFunction(e){
if (e.target.value && e.target.value.length > 2) {
alert('do some ajax with the value: ' + e.target.value);
}
}
In jsf you can add some hidden input with f:ajax and trigger it from js with somethign like this document.getElementById("myButtonId").click();
Online example
If I have a controller method that sets flash.success("some.i18n.key"); and I render a page that is loaded via ajax that item does not get removed from flash. Even though I've rendered the content to the screen (html loaded into a div in the success handler of my ajax post) the next page I visit still has the success message in flash. Pages that work with a normal form post,non ajax) this issue does not happen. Any idea whats going on?
Further investigation seems like this might be some sort of race condition. When I do a normal post and the FLASH cookie is returned it expires immediately and on the next request it is not sent back to the server. In the case of the AJAX post and then a subsequent request the cookie IS sent back to the server.
flash values are kept for one redirect. If you call render in your controller at the end of your method, you do not issue a redirect, so values will be available for the next request. To avoid this you have the choice :
use renderArgs in your method to pass your value to the view
at the end of your method, do not call render but call another method of the controller, thus you will issue a redirect instead of a direct render.
Since play 2 they changed the flashing a bit, instead of 2 maps (incoming, outgoing) there is just one.
What I end up doing is calling:
#flash.clear()
Just after the flash messages are rendered (in the view). This way, you are sure they are rendered just once, regardless of weather you use direct render, or redirect.
I have an app that has several different types of form elements which all post data to the server with jQuery AJAX.
What I want to do is:
Show a loader during AJAX transmission
Prevent the user from submitting twice+ (clicking a lot)
This is easy to do on a one off basis for every type of form on the site (comments, file upload, etc). But I'm curious to learn if that is a more global way to handle this?
Something that's smart enough to say:
If a form is submitting to the server and waiting for a response, ignore all submits
Show a DISABLED class on the submitted / clicked item
Show a loading class on the class="spinner" which is closest to the submit item clicked
What do you think? Good idea? Done before?
Take a look at the jQuery Global Ajax Event Handlers.
In a nutshell, you can set events which occur on each and every AJAX request, hence the name Global Event Handlers. There are a few different events, I'll use ajaxStart() and ajaxComplete() in my code sample below.
The idea is that we show the loading, disable the form & button on the ajaxStart() event, then reenable the form and hide the loading element inside the ajaxComplete() event.
var $form = $("form");
$form.ajaxStart(function() {
// show loading
$("#loading", this).show();
// Add class of disabled to form element
$(this).addClass("disabled");
// Disable button
$("input[type=submit]", this).attr("disabled", true);
});
And the AJAX complete event
$form.ajaxComplete(function() {
// hide loading
$("#loading", this).hide();
// Remove disabled class
$(this).removeClass("disabled");
// Re-enable button
$("input[type=submit]", this).removeAttr("disabled");
});
You might need to attach to the ajaxError event as well in case an AJAX call fails since you might need to clean up some of the elements. Test it out and see what happens on a failed AJAX request.
P.S. If you're calling $.ajax or similar ($.getJSON), you can still set these events via $.ajaxStart and $.ajaxComplete since the AJAX isn't attached to any element. You'll need to rearrange the code a little though since you won't have access to $(this).
I believe you have to do 2 for sure and 3 to improve usability of your app. It is better to keep backend dumb but if you have a security issue you should handle that too.
So i'm implementing a feature where after a user has visited my site, and not signed in and not registered for over two minutes, an alert pops up and asks them to take a survey.
I agree, annoying, but it's a business requirement.
I thought about doing a Session Object, and then in the page_load of the header (since it's on every page) check if the current time is greater than the time in session.
However, this will only fire when the page loads. I kind of need it to pop up at exactly tw minutes.
So I looked into the ASP.NET AJAX timer, which seems to do the trick.
My question is how do you disable it? Because now it just keeps firing every 20 seconds which is what my current interval is.
I thought about maybe setting a cookie and if the cookie isn't present show it, otherwise don't.
Just wondering if anyone else had any insight into this.
Thanks guys!
The problem with the setTimeout() approach as shown by azamsharp is that it only works if the user stays on the same page during the two minutes.
If you have different pages, the you will probably have to implement a solution involving the asp.net session and client-side scripting, e.g:
store a DateTime in the session when the alert must be shown
(on every page) call a page-method from javascript (e.g. every 5 seconds) to check if the alert is due, and show it if it is due
put the javascript part (the call of the pagemethod) into a common master page and use this for each asp.net page
You can use the JavaScript windows.setTimeOut method which will fire exactly once after whatever time is specified.
window.setTimeOut(foo,2000);
The above will call the foo JavaScript function after 2 seconds.
Thanks,