Hi Karam,
Here's some JS excerpts from our adminjsf.js file, which you can find in
the GlassFish source:
df.fireAjaxTransaction(refreshNode,{
execute: updateTreeAction.id,
inputs: updateTreeAction.id,
parameters: "updateTreeNode=" + refreshNodeId,
replaceElement:
admingui.nav.updateTreeNodeAjaxCallback,
immediate: false,
render: refreshNodeId
});
This call to fireAjaxTransaction overides the "replaceElement" behavior
and does this:
/**
* <p> This function is called in response to a DynamicFaces
request. It
* takes the return value and replaces the old content with the
* content from the Ajax response. It currently only replaces the
* children of the updated node. It does this b/c the updated node
* itself does not change in our current use cases, and because it
* makes maintaining highlighting easier. In the future this may
* change.</p>
*/
updateTreeNodeAjaxCallback: function(id, data, closure, xjson) {
// Get the html node to replace for the TreeNode...
var treeNode = admingui.nav.getTreeFrameElementById(id);
if (!treeNode) {
return;
}
// Get the parent node (can be used for TreeNode children also)
var parent = treeNode.parentNode;
// Create a temporary <div> so we can extract the 2 nodes we need...
var tmpDiv = document.createElement("div");
tmpDiv.innerHTML = data;
// Replace it!
var newNode = tmpDiv.childNodes[0];
newNode.className = treeNode.className;
newNode.style["display"] = treeNode.style["display"];
parent.replaceChild(newNode, treeNode);
// Get the html node to replace for the TreeNode children...
treeNode = admingui.nav.getTreeFrameElementById(id + "_children");
if (treeNode) {
// Get the new children...
newNode = tmpDiv.childNodes[0];
newNode.style["display"] = treeNode.style["display"];
newNode.className = treeNode.className;
admingui.nav.copyStyleAndClass(treeNode, newNode);
// replace it...
parent.replaceChild(newNode, treeNode);
}
else {
// I think it's always there...
alert('child tree nodes not found.');
}
}
In this particular case we change the replace behavior, but in your
case, you want to do the default behavior + add your own logic. I
believe if you look at the default JS, you can find a way to invoke or
to write your code in a way where you can leverage what it does.
However, the important point here is that you can invoke JS when you
first fire the Ajax transaction, and then when the request has completed
you can invoke more JS code (start animated gif, stop animated gif).
I hope this helps (b/c I don't have much more JS to show!). :)
Ken
Karam Singh wrote:
> Ken,
> It would be helpful if you could show some example and yes I am
> invoking fireAjaxTransaction.
>
> -Karam
>
> Ken Paulsen wrote:
>>
>> I haven't tried anything like that... but if you're invoking the
>> fireAjaxTransaction method yourself, you could show some animated gif
>> icon, and then stop showing it once the response has returned. To do
>> this, you'll have to handle the ajax callback yourself. If you need
>> more info, I might be able to find something to show how / where to
>> put your JS. Otherwise, the jsf-extensions email list and/or Ed
>> Burns would be the right contact.
>>
>> Ken
>>
>> Karam Singh wrote:
>>> Hi,
>>> Is there a way to show the ajax activity image (spinner image) when
>>> the ajax is fetching data? Some of these calls could take long time
>>> and I would like to give some indication to the user that its still
>>> getting the data. I have heard that protoype library has something
>>> like that. Has anyone used it? A small example will help.
>>>
>>> thanks
>>> Karam