开发者

jquery tabs and client side validation gem

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 aj开发者_开发技巧ax 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


Try adding this to the tab that has the validation problems

<%= javascript_include_tag "rails.validations" %>  
<%= form_for @yourform, :validate => true do |f|%>
#Your code here
<% end %>

Edit:

<%= javascript_include_tag 'jquery-1.6.2.min' %>
<%= javascript_include_tag 'jquery-ui-1.8.14.custom.min' %>
<%= javascript_include_tag 'jquery_ujs', 'application' %>
<%= javascript_include_tag "rails.validations" %>  
<%= form_for @company, :validate => true do |f|%>
  <div class="field">
    <b>Company Name:<b><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :address %><br />
    <%= f.text_field :address %>
  </div>
  <div class="field">
    <%= f.label :telephone %><br />
    <%= f.text_field :telephone %>
  </div>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.text_field :email %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜