Hi there. I have a jquery dialog box that pops up and takes user data through a form. Once the user is finished s/he clicks the 'ok' button. This dialog box has a few 'tabs' such that when 'ok' is clicked, we want to validate all the data given in each tab. If anything is invalid, we take the user to that tab and tell them what's wrong.

However, it takes 2 clicks of 'ok' to achieve this. Here is the offending jquery:

if(errors){
  // display the tab with the error            
  jQuery('#recording_tabs > div').each( function(i){
      alert('we are here');
      if(jQuery(this).find('*').not('label').hasClass('invalid')){
          jQuery('#recording_tabs').tabs('option','selected', i);
          return false;// prevent further processing
      }
  });
}

So what happens in the above code is that when we click 'ok' we get a 'we are here' alert for each div (tab) and then nothing happens. Clicking 'ok' again gives us the 'we are here' alert up until we are taken to the tab with the errors.

So obviously the first time round the inner if statement is false for each tab which probably means jQuery hasn't registered the 'invalid' classes in time. So I tried a blank each() statement just before the main one in the hope that it would fix the problem

jQuery('#recording_tabs > div').each( function(i){} );

But I got the same result.

Can anyone spot anything I am missing?