Bootstrap 3 drop-down and Rails UJS conflict in IE

Question

I have a sign-up form that submits with remote: true and catches ajax:error to display validations. In IE8 this functionality is fine on the sign up page, but when the same form is used from a BS3 drop-down, it just follows the href on submit without using AJAX.

I have an <a> tag that uses remote: true to send AJAX requests from a drop-down and it works fine in IE8. The problem only seems to arise with form submits from drop-downs.

This is an obscure problem, but if anyone could help I think it'd help me understand binding JS events better. I added the drop-down code and the relevant JS.

From the Sign Up page.

<div class="dropdown">
  <a href="/signup?locale=en" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Sign Up</a>
  <div class="dropdown-menu signup-dropdown pull-right">

    <div id="signup-form-container">

    <form accept-charset="UTF-8" action="/signup?locale=en" class="new_user" data-remote="true" data-type="json" id="signup-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="lQcG6WXJO/mcQ/tly+mb+kcEpzY39hdCWhMQkB1VEqA=" /></div>

      ... #fields

      <input class="btn btn-default" name="commit" type="submit" value="Sign Up" />

    </form>
    </div>
  </div>
</div>

users.js

var usersReady = function() {
  var displaySignupResult = function(event, data, status, xhr) {
    //do login stuff
  };

  var signupError = function(event, xhr, status, error){
    //show errors
  };

  $(document).on('ajax:success', '#signup-form', displaySignupResult)
             .on('ajax:error'  , '#signup-form', signupError);
};

$(document).ready(usersReady);
$(document).on('page:load', usersReady);

Answer 1

Your problem is about js conflict. You can solve by listing js file in this format.

in your layout

<%= javascript_include_tag "application" %>

in the application.js

//= require jquery
//= require jquery_ujs
//= require purecss-dropdown
//= require_tree .

or try this.(but this is not a good practice)

config.assets.precompile += ['admin1.js', 'admin2.js', 'admin3.js']

Hope this will Help.