rich:tabPanel ajax switching

[alonzing]

Hi,

I have rich:tabPanel with rich:tabPanel switchType="ajax". The reason is that one tab affects other content and there is validation pertab. The problem is that it takes few seconds to switch between tabs. If the user clicks tab and on the communication time, until the clicked tab rendered, he clicks again and again the tabs, aside from the fluid of messages and the load on the server, there are javascript errors and even after the new tab switched, some of the content is not rendered. So, my questions are:

1. How to prevent it?

2. Is there an option to work with switchType="client", yet run server side validation? (the client is much faster)

3. I used to pop modal dialog which locks the many switching clicks, the problem is that the validation errors appears on rich:messages and when

I hide the dialog, the messages disappear as well.

Any ideas?

Thanks,

Alon.

[lmk]

you cannot switch tabs if there exists a validation error, using client switchtype will allow switching tabs without server validation,

server switch type is similiar to ajax, but it's a http request not an ajax ones, ajax switchType is fatser.

[bkersten]

1. You can at least prevent duplicate responses using <rich:tab ignoreDupResponses="true"/>. But IMHO JS errors should actually not occur even if the tab is clicked more than once. Or do they occur in your custom code?

3. You could add a "custom overlay" instead of a popup, e.g.

<div id="screenblocker" style="display:none; background-color:black; opacity:0.5; z-index:1000; position:absolute; top:0px; left:0px; width=100%; height=100%;" />

Should be hidden initially ( display:none ) and displayed during tab changes, e.g.

<rich:tab ontableave="$('screenblocker').show();" ontabenter="$('screenblocker').hide();" />

Thus, u dont need an additional form within the popup and messages could be displayed on the main page.

(Care that prototype script is loaded before. Code is untested, but should give the idea).

[alonzing]

Thanks you!

Is there a way to prevent various JS errors which trown while toggling quickly between tabs?

The problem is that there when working with AJAX mode, some code regarding components which not exist anymore runs after the tabs changed. The errors are  because the components are not partof the DOM of the page and all of them because of accessing null elements.

If I change tabs normally and not quickly, the JS errors don't happen.

Thanks.

[ilya_shaikovsky]

But IMHO JS errors should actually not occur even if the tab is clicked more than once. Or do they occur in your custom code?

agree, please check where the errors risen using fireBug.

[alonzing]

Thanks.

The erros didn't happen on mycustom code.

Please see on the attached files, some of the errors.

Need to mention that I have file upload component and spinner component.

This is the stacktrace: (goes from up to down)

The problem is that  e is null

function(){for(var i=0;i<newscripts.length;i++){_this._evaluateScript(newscripts[i]);}

window.execScript(newscript);

new Richfaces.Spinner(

"problemEditorPanelForm:CVnumOfRepetitionPercent",{'min':'1','max':'500','delta':'5'} );

this.initialize.apply(this,arguments);

var edit=this._getDirectChildrenByTag(this.content,'INPUT')[0]

var allKids=e.childNodes

(Lsat row on this function):

function(e,tagName){var kids=new Array();var allKids=e.childNodes;for(var i=0;i<allKids.length;i++){if(allKids[i]&&allKids[i].tagName&&allKids[i].tagName.toUpperCase()==tagName.toUpperCase()){kids.push(allKids[i]);}}