mardi 28 juillet 2015

Rails: is twitter typeahead conflicts client side validation?

I am using client side validation(v3.0.13) gem in my rails(v3.0.20) app. Recently I added twitter's typeahead.js(v0.10.2) for auto suggest.

I have a model named Insurance and the column 'name' is mandatory. When I submit a form with these two js files loaded, I get javascript error Cannot read property 'presence' of undefined in browser console. After this error, other javascript code is failed to run, for example If I put a alert in form submit function, its not working.

Model

insurance.rb

    class Insurance < ActiveRecord::Base
        validates :name, :presence =>  { :message => "Must be filled" }
    end

form.html.erb

    <%= javascript_include_tag "rails.validations", "typeahead" %>
    <%= stylesheet_link_tag "typeahead"%>

    <%= form_for @insurance, :validate => true, :html => {:id => 'insurance_form', :class=>"form-horizontal"} do |f| %>
    <div class="control-group">
        <%= f.label :name, :class=>"control-label" %>
        <div class="controls">
            <%= f.text_field :name, :class =>"input-medium typeahead" %>
        </div>
    </div>
    ...
    <% end %>

And my javascript code

    var insurance_names = ["aaa", "bbb", "ccc"];

    var substringMatcher = function(strs) {
      return function findMatches(q, cb) {
        var matches, substringRegex;
        matches = [];
        substrRegex = new RegExp(q, 'i');
        $.each(strs, function(i, str) {
          if (substrRegex.test(str)) {
            matches.push({ value: str });
          }
        });     
        cb(matches);
      };
    };

    $('.typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'insurance_names',
      source: substringMatcher(insurance_names)
    }).on('typeahead:selected', function($e, datum){
        $(this).trigger('change');
    });

If I comment the model validation code and then submit the form, then there is no javascript error. And also without this typeahead.js client side validation is working fine.

Can anyone help me to solve this problem?

Aucun commentaire:

Enregistrer un commentaire