Question

I have a tabbed panel created using the jquery ui tabs and where each tab is loaded with ajax. On each of these tabs i have a number of nested forms. I’m using formtastic to create the form, and semantic_form_for to created the nested forms.

I have the client_side validation gem installed and working on my ‘normal’ forms. On the forms within the tabbed panels, it does nothing. I’m guessing that this might be because when the tab content is loaded with ajax the client_side_validation functions need to be bound to the inputs. Anyone have any experience of this? Even suggestions about where to begin debugging the problem would be much appreciated …

Thanks in advance

Answer 1

I instinctively didn’t like the idea of reloading the js files as suggested in the first answer, though the answer was helpful in pointing me in the right direction. Sure enough, a little way further along, the reimported files started to cause problems of their own so I did a bit more digging. To set up the tabs, I’m now using js like this:

    contacttabs.tabs({
            load: function(event, ui){
                   $('a.load_to_enquiries_tab').live("click", function() {
                        $('#enquiries').load(this.href, function() {
                              set_styles();
                              $(function() {
                                    $('form[data-validate]').validate();
                              })
                              return false;
                        });
                        return false;
                  });
});

The key lines are the ones in the callback which call validate() on the forms in the tab. This is a method in the client_side_validation validations.js file which binds the client side validation goodness to the form. This works for me now – hopefully it will help someone else too.