I would like to have a central place where I monitor ajax requests and in certain situations abort them.
The only thing I don't know to do is to actually abort the ajax request from one central function.
I Imagine that the solution would look something like this:
jsf.ajax.addOnEvent(function(data) {
if (data.status === 'begin') {
// abort the ajax request
}
});
But I might be mistaken.
Thanks!
This is not possible by the standard JSF JS API. Your best bet is to add an onclick or onchange handler on the calling JSF component which returns false if the desired condition is met to abort the ajax request.
<h:commandButton onclick="return mayFireAjax(this)">
<f:ajax />
</h:commandButton>
You can if necessary abstract this away with jQuery.on() (or jQuery.delegate() or jQuery.live() depending on the jQuery version used) on a common selector so that you don't need to repeat it on every desired component.
$(someSelector).on("click", function() {
return mayFireAjax(this);
});
If you have control the source, you can always attach a onClick to the UICommand component. But in some situation, you do not have access to source. For example, the ajax is provided by some third-party component. You do not want to mess up with their components.
First, I have a small js library.
var FxJSFBegin = "JSFBegin";
if (jsf) {
var originalRequest = jsf.ajax.request;
jsf.ajax.request = function(source, oevent, options) {
var event = $.Event(FxJSFBegin);
event.options = options;
event.originalEvent = oevent;
$(source).trigger(event);
if (event.isDefaultPrevented()) {
return;
} else {
originalRequest.apply(null, arguments);
}
};
}
This piece code proxies original JSF ajax call. It uses jQuery to fire a "JSFBegin" event. Integration code can listen this event using jQuery mechanism. Listener can cancel the jsf call using event.preventDefault().
Requirement:
jQuery
This piece code should be placed after jsf.js is loaded.
Using global="false" will help you prevent calling the ajax status for an ajax call. Please refer to the following link.
Different Ajax statuses for different components in PrimeFaces
Related
How can I override Drupal.ajax written in misc/ajax.js?
I need to check URL existence before firing an AJAX call.
Is there any other way/better way to achieve that without overriding this js?
Thanks
I don't know about Drupal.ajax but this Jquery Method is the way to go:
$(document).ajaxSend(function(event, jqxhr, settings){
if ( settings.url == "some urls" ) {//checks if related url should be checked or not.
//Do Something likeThis url checkingor what ever you want.
if(!UrlExists(settings.url)){
jqxhr.abort();
}
}
});
Be careful, This method is a global ajax event -- so this effectively can filter all ajax requests.
I want to have a function called for every ajaxComplete call regardless of the ajax call. I know I can set a default value using my spinner by saying ('#spinner').ajaxComplete(complete) however if I have an ajax request that implements it's own complete my default complete method is not called.
How can I make a central function get called when any ajax call has completed??
Attach your ajaxComplete to the document; the ajax event will bubble up:
$(document).ajaxComplete(function(e, xhr, settings) {
// Do whatever you need here.
});
Attach the ajaxComplete listener to the DOM. This allows us to monitor it for any
$(document).ajaxComplete(function(e,request, options){
//attach our listener for ajaxComplete to the DOM.
//whenever an ajax call is completed, the DOM will send this function
customAjaxCompleteFunction();
});
var customAjaxCompleteFunction = function(){
alert("Custom Function for Each ajax call on complete!");
}
I have an f:ajax tag inside an h:inputText tag, making ajax calls on keyup events :
<h:inputText id="searchinput" value="#{tvShowForm.name}">
<f:ajax event="keyup" render="results" listener="#{tvShowForm.search}" />
</h:inputText>
Each call takes enough time that the user has typed several characters before the first call is finished.
Is there a way to cancel the current ajax call (and the queued up ones), so that the last keyup event executes an ajax call immediately?
It sounds like you want to coalesce the events, for example this will wait
half a second before firing an ajax request, and any input typed at that
point will be included. But you won't fire an ajax request for each character
typed.
<h:inputText onkeyup="keyupHandler();"/>
...
<script>
var keystrokeTimeout;
keyupHandler = function(event) {
var minChars = 4;
var len = $(this).val().length;
if((len != 0) && (len < minChars)) {
return;
}
var ajaxRequest = function() {
jsf.ajax.request('results', null, {
execute: 'results',
render: 'results'
});
}
clearTimeout(keystrokeTimeout);
keystrokeTimeout = setTimeout(ajaxRequest, 500); // millisecs
}
</script>
Is this remotely like what you want to do?
EDIT: Another suggestion is that you check out the Richfaces 4 a4j:queue functionality.
This allows for combining events, for example in the keyup scenario if you've been
leaning on your keyboard, when the current ajax request completes only one further
request will be sent. It's also possible to specify a request delay and ignore stale
responses. The big mistake Richfaces doesn't make (that primefaces does make) is that
RF uses the same underlying queue as the JSF implementation, so you don't have the risk
of out-of-order processing.
I appreciate that if you're not already using this library it's not a small step to take.
How can I show some loading message when making request using <f:ajax>?
If you're not already using a 3rd party component library which could already have a ready-made component for that, such as PrimeFaces with <p:ajaxStatus>, then you can use the JSF-provided JavaScript jsf.ajax.addOnEvent() function (and eventually also jsf.ajax.addOnError()) to hook a function on ajax events.
Here's a basic kickoff example:
<script>
jsf.ajax.addOnEvent(function(data) {
var ajaxstatus = data.status; // Can be "begin", "complete" and "success"
var ajaxloader = document.getElementById("ajaxloader");
switch (ajaxstatus) {
case "begin": // This is called right before ajax request is been sent.
ajaxloader.style.display = 'block';
break;
case "complete": // This is called right after ajax response is received.
ajaxloader.style.display = 'none';
break;
case "success": // This is called when ajax response is successfully processed.
// NOOP.
break;
}
});
</script>
<img id="ajaxloader" src="ajaxloader.gif" style="display: none;" />
See also chapter 13.3.5.2 of the JSF 2.0 specification:
13.3.5.2 Monitoring Events For All Ajax Requests
The JavaScript API provides the jsf.ajax.addOnEvent function that can be used to register a JavaScript function
that will be notified when any Ajax request/response event occurs. Refer to Section 14.4 “Registering Callback
Functions” for more details. The jsf.ajax.addOnEvent function accepts a JavaScript function argument that will be
notified when events occur during any Ajax request/response event cycle. The implementation must
ensure the JavaScript function that is registered must be called in accordance with the events outlined in
Section TABLE 14-3 “Events”.
You can grab some cool ajax loader gifs for free from http://www.ajaxload.info, by the way.
richfaces has a very easy to use component that I use like this:
<a4j:status startText="" stopText="" onstart="showAjaxActive();" onstop="hideAjaxActive();"/>
I would like to implement a kind of information for my users about the progress status. I have found several components like:
Richfaces status or IceFaces onnection Status
So, I would like to add something like that to my page especially for ajax requests. What's the easiest way to implement it? I would not like to use one of those components, rather programming my own one but I can't imagine how and how much effort it takes :-)
I am thankfull for ideas...
The standard JSF implementation doesn't provide a ready-to-use component for this. The JSF 2.0 specification however outlines the following in chapter 13.3.5.2:
13.3.5.2 Monitoring Events For All Ajax Requests
The JavaScript API provides the jsf.ajax.addOnEvent function that can be used to register a JavaScript function
that will be notified when any Ajax request/response event occurs. Refer to Section 14.4 “Registering Callback
Functions” for more details. The jsf.ajax.addOnEvent function accepts a JavaScript function argument that will be
notified when events occur during any Ajax request/response event cycle. The implementation must
ensure the JavaScript function that is registered must be called in accordance with the events outlined in
Section TABLE 14-3 “Events”.
You can find here a blog of one of the Mojarra developers which contains basic examples. Here's an extract of relevance:
<h3> Status:</h3>
<textarea id="statusArea" cols="40" rows="10" readonly="readonly" />
A simple textarea, not even hooked
into the backend server data model.
Then in our javascript (for the demo,
in a separately loaded file, though it
could just as easily be in page) we
have:
var statusUpdate = function statusUpdate(data) {
var statusArea = document.getElementById("statusArea");
var text = statusArea.value;
text = text + "Name: "+data.source.id;
if (data.type === "event") {
text = text +" Event: "+data.name+"\n";
} else { // otherwise, it's an error
text = text + " Error: "+data.name+"\n";
}
statusArea.value = text;
};
// Setup the statusUpdate function to hear all events on the page
jsf.ajax.addOnEvent(statusUpdate);
jsf.ajax.addOnError(statusUpdate);