CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby-on-rails-4
laman
laman

Reputation: 562

Rails-jQuery Why do I have to click twice for jQuery effect to show?

I am using Rails 4.1.1 Why do I have to click twice for jQuery effect to show? I have been Googling but I cannot find any solutions, not sure if there's something wrong with my jQuery code or....

When I click "Submit" for the first time, the effect didn't appear but the POST action is already called, when I click for the second time, the effect appeared and the POST action is called.

Please check below my create.js.erb, users_controller.rb, new.html.erb

create.js.erb

function isValidEmailAddress(emailAddress) {
  var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
  return pattern.test(emailAddress);
};

$("form").submit(function( event ) {
  var email = $("input#user_email").val();
if (email == "") {
$("h1").text( "Email cannot be empty" ).show().fadeOut( 3000 );
return;
} else if (!isValidEmailAddress(email)) {
$("h1").text( "Email address is not valid" ).show().fadeOut( 3000 );
}else {
  $("h1").text( "Correct email address" ).show();
}
event.preventDefault();
});

new.html.erb

<%= form_for @user, remote: true do |f| %>
  <p>
    <%= f.text_field :email %>
  </p>

  <p>
    <%= f.submit :Submit %>
  </p>
<% end %>
<h1></h1>

  <% @users.each do |user| %>
    <tr>
      <li><%= user.email %></li>
    </tr>
  <% end %>

users_controller.rb

class UsersController < ApplicationController

  def new
    @users = User.all
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    respond_to do |format|
      format.html { redirect_to '/' }
      format.js
      end   
    @user.save
  end

private

  def user_params
    params.require(:user).permit(:email)
  end

end

Upvotes: 2

Views: 215

Answers (2)

TABISH KHAN
TABISH KHAN

Reputation: 1623

Turbo links might be causing this issue -try disabling turbo links in your app , that has worked for me In the past when I've had a similar problem

Upvotes: 2

Almaron
Almaron

Reputation: 4147

You're getting the process wrong. When you submit a remote form in Rails, the app sends an AJAX request to the create action and then evals the received js code (from your create.js.erb). So first time you click the button, nothing happens.

The js view is not the place to handle validations, you should put that somewhere in your assets/javascripts. The js view is a place for updating the html view of the page with the form (e.g. adding records to the list, showing received errors, reseting the form).

Upvotes: 1

Related Questions