ajax:成功不会触发ajax rails 4 app

时间:2016-07-20 04:57:19

标签: jquery ruby-on-rails ajax recaptcha

我在rails应用程序中有jQuery函数,我正在尝试进行ajax调用。

问题是它没有返回ajax响应,而是成功发送ajax调用。

我需要使用该函数绑定我的ajax调用,以便我能够显示响应。

jQuery代码:

$(document).ready(function () {
    $("#contact_us").bind("ajax:success", function (e, data, status, xhr) {
        if (data.success) {
            $("#alert_success").show();
            $(".CaptchaError").html(data.message);
        } else {
            $("#alert_failed").show();
            $(".CaptchaError").html(data.message);
        }
    });
});

Rails代码:

class MailController < ApplicationController
  prepend_before_action :check_captcha

  def contact_us
    full_name     = params['contact_full_name']
    last_name     = params['contact_last_name']
    phone         = params['contact_phone']
    website       = params['contact_website']
    email         = params['contact_email']
    message       = params['contact_message']
    ContactMailer.send_email(full_name, last_name, phone, website, email, message)
  end

  private
  def check_captcha
    unless verify_recaptcha
      return render json: {:success => false, :message => "You cant use this captcha code"}
    else
      contact_us
      return render json: {:success => true, :message => "Your email has been sent successfully"}
    end
  end
end

Rails表格:

<%=form_tag contact_us_mail_index_path, :id => "contact_us", 
:format => :json, :remote => true do %>

<%end%>

按键代码:

<button type="submit" class="btn btn-lg btn-default"><i class="fa
 fa-check"></i> SEND MESSAGE</button>

的application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require plugins/jquery/jquery-2.2.3.min.js
//= require scripts
//= require plugins/slider.revolution/js/jquery.themepunch.tools.min
//= require plugins/slider.revolution/js/jquery.themepunch.revolution.min
//= require view/demo.revolution_slider
//= require plugins/smoothscroll
//= require contact

的routes.rb

resources :mail, except: [:show,:new,:create,:edit,:update,:destroy] do
    collection do
      post :contact_us
    end
  end

2 个答案:

答案 0 :(得分:2)

经过多次尝试,我终于解决了问题。

问题与 turbolinks 有关。根据我的研究,问题出在 application.js 文件中。

我做了一些更改,发现 turbolinks js正在创建问题。

所以,我安装了名为jquery-turbolinks

的宝石

安装后,我的application.js就像:

//= require plugins/jquery/jquery-2.2.3.min
//= require jquery.turbolinks
//= require jquery_ujs
//= require scripts
//= require contact

我发布的@SpunkyLive answer答案确实给了我很多帮助,但这还不足以让我指导并修复代码。

答案 1 :(得分:1)

我认为你应该创建一个文件contact_us.js.erb

<强> contact_us.js.erb

if ("<% @success %>") 
  $("#alert_success").show();
else 
  $("#alert_failed").show();

$(".CaptchaError").html("<% @msg %>");

<强>表格

删除format: json

<%=form_tag contact_us_path, :id => "contact_us", :remote => true do %>

<%end%>

<强> HomeConrtoller

def contact_us
  respond_to do |format|
    if verify_recaptcha
      full_name     = params['contact_full_name']
      last_name     = params['contact_last_name']
      phone         = params['contact_phone']
      website       = params['contact_website']
      email         = params['contact_email']
      message       = params['contact_message']
      ContactMailer.send_email(full_name, last_name, phone, website, email, message)
      @success = true
      @msg = "Your email has been sent successfully"
      format.js 
    else
      @success = false
      @msg = "You cant use this captcha code"
      format.js
    end
  end
end

<强>路线

post '/contact_us' => 'home#contact_us', as: :contact_us

希望这会对你有所帮助。