ICEsoft.org Forums: ICEfaces, ICEmobile, ICEpdf

Hi,

I am trying to make Ice.onAsynchronousReceive() method work and am not having any success. What I want to do is to be able to trigger a javascript callback method to execute when a particular ICEfaces component's AJAX request is completed. The documentation for the ICEfaces JavaScript API is fairly minimal, and I think I used the correct syntax in specifying:

Code:

Ice.onAsynchronousReceive('document:body', function() {alert('Just a test......')});

I checked in the generated HTML for my page and the <body> tag does have id="document:body", and it is the parent of the <iframe> that looks to be the AJAX bridge, so I think I'm following the documentation correctly. When I include the above code in my page, I get this js error:

Error: H.asElement() is null
Source File: http://localhost:8080/icefacesproject/xmlhttp/1252415933603/icefaces-d2d.js
Line: 36

What I really want to be able to do is to specify the javascript callback to run on a component-by-component basis (ie when the user clicks this ice:commandbutton and the response is received, run this js code). RichFaces includes an 'oncomplete' attribute for its components that satisfies this requirement.

It's not clear in the docs, but it looks like there isn't a similar capability in ICEfaces? The Ice.onAsynchronousReceive() only works at the page level since you can't pass an ice:commandbutton 'id' property in place of the 'document:body' that is in the example in the docs. Or perhaps you can, and I missed it?

Any advice out there on how to do this? I suppose there are the regular javascript onclick etc attributes that can be specified at the component level, but these are executed before the AJAX request is sent/received, and have no awareness of its state. I might try adding a sleep line in the javascript, but this is not ideal either.

Any advice on where I need to look to get my code working?

Much appreciated,
Micah

...The documentation for the ICEfaces JavaScript API is fairly minimal, and I think I used the correct syntax in specifying:
Code:
Ice.onAsynchronousReceive('document:body', function() {alert('Just a test......')});

Yes, the call to Ice.onAsynchronousReceive is correct.

I checked in the generated HTML for my page and the <body> tag does have id="document:body", and it is the parent of the <iframe> that looks to be the AJAX bridge, so I think I'm following the documentation correctly. When I include the above code in my page, I get this js error:
Code:
 Error: H.asElement() is null
 Source File: http://localhost:8080/icefacesproject/xmlhttp/1252415933603/icefaces-d2d.js
 Line: 36

That's weird. Are you sure you don't have typos in the code?!

...It's not clear in the docs, but it looks like there isn't a similar capability in ICEfaces?

No, not really.

The Ice.onAsynchronousReceive() only works at the page level since you can't pass an ice:commandbutton 'id' property in place of the 'document:body' that is in the example in the docs. Or perhaps you can, and I missed it?

No, you didn't miss it. The API is for wiring bridge level (not component level) event handlers.

Any advice out there on how to do this? I suppose there are the regular javascript onclick etc attributes that can be specified at the component level, but these are executed before the AJAX request is sent/received, and have no awareness of its state. I might try adding a sleep line in the javascript, but this is not ideal either.
Any advice on where I need to look to get my code working?

You could try capturing the ID of the element triggering the form submission using a component level event listener and the use Ice.onSendReceive to register the callbacks for send and receive.

Hi mircea,

You could try capturing the ID of the element triggering the form submission using a component level event listener and the use Ice.onSendReceive to register the callbacks for send and receive.

I got your suggestion of the component ID capture on the server side, that is working in my app, but I suppose in order to use that from JavaScript, you'd have to output that ID value to a hidden form field on the page, and read that from the javascript callback method supplied to Ice.onSendReceive().

I suppose that would work, but it would be nice to avoid those extra steps. Any plans to add that sort of capability to a future release?

Also, I'm pretty sure I don't have any typos in my original posting of the Ice.onAsynchronousReceive() call..... maybe onSendReceive() will give some better results without the

Code:

H.asElement() is null

error message.

Thanks a lot for your advice!

Micah

Hi Micah, Do you make the Ice.onAsynchronousReceive invoking work? Thanks.

No, it does not work.

I don't think I have any errors in my code, but regardless I get this error in the ICEfaces javascript for both Ice.onSendReceive() and Ice.onAsynchronousReceive() methods.

Code:

Error: H.asElement() is null
  Source File: http://localhost:8080/myapp/xmlhttp/1252415933603/icefaces-d2d.js
  Line: 36

The only thing I can think is that somehow I have a problem in how my AJAX bridge code relates to my <body> tag, but if I view source from my page this is what it looks like:

Code:

 <body id="document:body" onload="init()" onunload="">
 
 <iframe frameborder="0" id="history-frame:3WVnDkJnjXNn_fzOvdYPXA:1" name="history-frame:3WVnDkJnjXNn_fzOvdYPXA:1" src="/myapp/xmlhttp/blank" style="z-index: 10000; visibility: hidden; width: 0; height: 0; position: absolute; opacity: 0.22; filter: alpha(opacity=22);" title="Icefaces Redirect"></iframe>
 <script id="3WVnDkJnjXNn_fzOvdYPXA:1:configuration-script" type="text/javascript">window.disposeViewsURI = '/myapp/block/dispose-views';
 var container = '3WVnDkJnjXNn_fzOvdYPXA:1:configuration-script'.asElement().parentNode;
 container.bridge = new Ice.Community.Application({blockUI: false,session: '3WVnDkJnjXNn_fzOvdYPXA',view: 1,synchronous: false,connectionLostRedirectURI: null,sessionExpiredRedirectURI: null,serverErrorRetryTimeouts: [1000,2000,4000], connection: {context: {current: '/myapp/',async: '/myapp/'},timeout: 60000,heartbeat: {interval: 50000,timeout: 30000,retries: 3}},messages: {sessionExpired: 'User Session Expired',connectionLost: 'Network Connection Interrupted',serverError: 'Server Internal Error',description: 'To reconnect click the Reload button on the browser or click the button below',buttonText: 'Reload'}}, container);</script>

It looks like the embedded <iframe> created by ICEfaces must be the AJAX bridge code, so according to the documentation I should be specifying 'document:body' for the id parameter in Ice.onSendReceive and Ice.onAsynchronousReceive(), since the <body> tag is the parent of the bridge. What I used to test:

Code:

Ice.onAsynchronousReceive('document:body', function() {alert('Just a test......')});

It would be great to have more documentation on how to use these methods, and some examples beyond the one in the developer guide....

If anyone can suggest what could be causing this error, I'd really appreciate it. I found this post: http://www.icefaces.org/JForum/posts/list/0/12785.page , but in this case it was resolved by removing the id="documentBody" attribute from <body> tag. In my case, I am not specifying anything for id in my facelets source xhtml, and ICEfaces is automatically setting the value of 'document:body'

Maybe a bug in these javascript methods?

Thanks for any help on this! I'd really like to get these working as everything else in my development project is going well and I am positive on ICEfaces, but this functionality is unfortunately is a requirement for this project.

Micah

Hi

I use both Ice.onAsyncronousReceive() and Ice.onSendReceive() in my pages with out issues. Make sure your wait till the page is loaded before the method is executed or initialized.

Hi Venu_dvmr,

Could you please post some code snippets to show how to invoke them from ice tag, i.e. ice:commandLink or ice:selectBooleanCheckbox? Thanks a lot in advance.

venu_dvmr,

Works like a charm, thanks. I had added the Ice.onSendReceive from a javascript block at the top of the page and not in my <body onload > method. Oh well. Maybe this will help out someone else who that isn't obvious to like myself.

gus315,

My relevant code is basically as follows:

Code:

 <html><head>
 <script type="text/javascript"> 
 
         function icesubmittest() {
 		alert('ICEfaces submit....');
 	}
 	
 	function icereceivetest() {
 		alert('ICEfaces receive....');
 	}
 
         function init() {
 
            Ice.onSendReceive('document:body',icesubmittest,icereceivetest);
 
         }
 </script>
 </head>
 <body onload="init()"> 
 
 <f:view>
 <ice:form>
 
 ... ....
 <ice:commandbutton actionListener="#{mybean.method}" value="submit" />
 
 
 
 </ice:form>
 </f:view>
 </body>
 </html>

ICEfaces automatically assigns id='document:body'> to your <body> tag, and that must be passed to onSendReceive or any of the other methods.

I guess you could also add the Ice.onSendReceive() call to one of the js event handlers within your commandButton if you wanted to modify the ICEfaces JavaScript behavior depending on what the user clicks on. This is probably what I will use in my project.

hth,
Micah

Glad that It has worked out for you. The better approach is to use prototype js event observer to check if the page is loaded and ICE faces use prototype.

Code:

 <script>
   Event.observe(window, 'load', function(){
     Ice.onSendReceive('document:body', icesubmittest , icereceivetest );
   });
 </script>

Great! Thank you sooooo much, mwengren and venu_dvmr. It is very helpful for me to make jQuery work in ICEfaces. I really appreciate your kind help!!!

venu_dvmr,

Good suggestion.... that is probably more optimal. Just a followup question, what approach would you recommend if you want to customize the onAsynchronousReceive() method callback depending on what UI component the user clicks on?

Basically, what I want to do is have one callback js method executed when the user clicks a 'search' command button, but when the user selects or clicks on a table row in the resulting output datatable, a different callback is executed on response from that request.

It seems that the only way would be to add calls to the Ice.onAsynchronousReceive() on one of the js event handling attributes for each component whose callback behavior that you want to customize, so that way there is a specific callback per component. But there is a state management issue if you add a component without a call to Ice.onAsynchronousReceive(), it will repeat the callback from the last component the user clicked when the response comes back.

I need to think about it some more, but I'd appreciate any strategies for that you might know offhand. I'm still learning the ICEfaces environment.

Many thanks,
Micah

Hey Micah,

How did you go about this in the end?
Many thanks,
Karina

good day....

I need to know about Ice.onAsynchronousReceive() and how to use for handling the show/hide event binded to Ice:panelCollapsible and add a jQuery function to it.

To make the plugin work, this lines help a (inside <script> html tag):

(i assume plugin is added to the page via <script> tag)

Code:

 //validate if browser=IE...
  if(jQuery.browser.msie){
   jQuery(".fixed-select").selecteSizer();
 }

but putting this in icefaces it doesnt work.

Regards...
Malm