Rails 表单在第一次点击时不会发送 ajax答案

【问题标题】：Rails form will not send ajax on first clickRails 表单在第一次点击时不会发送 ajax
【发布时间】：2013-09-16 19:47:09
【问题描述】：

我希望通过 jQuery/AJAX 在 Rails 上提交表单。我的表单不会在第一次点击时提交，而是在第二次点击时提交。我希望以这种方式运行 rails，因为我被告知我可以从服务器获得响应，让我知道事情已经成功。你能帮忙的话，我会很高兴。

表单验证.js

$(document).ready(function () {

  $('#sms_form').validate({ 

   rules: {
    phone_number: {
      required: true,
      digits: true,
      phoneUS: true,
      maxlength:10
    },
    text_message: {
      required: true,
      maxlength: 160
    },
    messages: {
      phone_number: {
        required:   "Enter a valid phone number",
        minlength: jQuery.format("Enter at least {10} characters"),
        remote:    jQuery.format("{0} is not a number")
      },
      text_message: {
        required: "text message cannot be blank"
      }
    }
  },
  submitHandler: function (form) {

    $('#sms_form').submit(function() {  
      $.ajax({
        type: 'POST',
        url: 'branch#call_sms', 
        complete: function() {
          $("#sms_status").append('<h3>Status: SENT</h3> </br>');
          $("#sms_status").append('<a href="#" id="sms_back_button" class="sms_button">back</a>');
          $("#sms_status").slideFadeToggle();
          $("#sms_form_box").slideFadeToggle();

          $('#sms_form').ajaxSubmit();
        },
        success: function() {
       // some code? 
        }
     })
      return false; // prevents normal behaviour
    });  
   } 
  });
});

这是表格*

<%= template_start -%>
<%- 
  @text_message =  "message"
%>

<a href="#" id="text-message" class="sms_button">sms text system</a>

<div class="sms pop">

<div class="close"></div>

<%= form_for :call_sms, url: {action: "call_sms"},  
              :method => :post, :remote => true, :html => {:id => 'sms_form'} do |f| %>  
  <div id='sms_form_box'>
    <p>
      <%= f.label 'phone_number', 'phone number' %>
      <%= text_field_tag :phone_number  %>
    </p>
    <p>
      <%= f.label 'message', 'text message' %>
       <%= text_area_tag :text_message, @text_message, :size => '36x8' %>
    </p>
    <p>
      <%= f.submit "send text message", :id =>'send_sms' %>
    </p>
  </div>

  <div id='sms_status'></div>
  <% end %>
  </div>
 <%= template_end -%>

这是控制器方法

def call_sms
   @text_number = params[:phone_number]
   @text_message     = params[:text_message].to_s
   @sms = ShortMessagingService.new
   @sms.send(@text_number, @text_message)       

   @sms_message = @sms.sent?

  respond_to do |format|
    format.js if request.xhr?
    format.html { render :nothing => true}
  end 
end

【问题讨论】：

你的javascript控制台有错误吗？可能和客户端验证有冲突？
附注：这个网址对我来说确实有点奇怪：你发帖到branch#call_sms --> 那是一个锚吗？我认为应该是branch/call_sms。您也可以只从表单中获取 url，因为 rails 会正确构建 url（除非您特别不想使用它）。

标签： jquery ruby-on-rails validation

【解决方案1】：

类似的事情也发生在我身上一次..

表单验证，我猜是在表单下方添加一个跨度来告诉您错误。像这样。

<span for="my_text_xxx" class="help-inline"></span>

因此，当我在文本区域中输入并尝试提交时，正在添加此跨度，并且由于表单中没有错误，因此该跨度不可见。由于这个原因，我的提交按钮有点向下移动。一旦我添加了一个margin-bottom: 10px or 20px;到我的表格..

我可以一键提交。这可能不是你的问题，只是说。 :)

【讨论】：

【解决方案2】：

我知道出了什么问题。我错误地包装了我的验证。此代码在第一次点击时提交。我有一个生成的后退按钮。但它现在会提交两次。

$(document).ready(function () {

  $('#sms_form').validate({ 

    submitHandler: function (form) {
      $.ajax({
        type: 'POST',
        debug: true,
         url: document.URL, 

         success: function() {
           $("#sms_status").append('<h3>Status: SENT</h3> </br>');
           $("#sms_status").append('<a href="#" id="sms_back_button" class="sms_button">back</a>');

          $("#sms_status").slideFadeToggle();
          $("#sms_form_box").slideFadeToggle();

          $('#sms_form').ajaxSubmit();
        }
      })

     return false; // prevents normal behaviour
   },

  rules: {
    phone_number: {
    required: true,
    digits: true,
    phoneUS: true,
    maxlength:10
  },
  text_message: {
    required: true,
    maxlength: 160
  },
  messages: {
    phone_number: {
        required:   "Enter a valid phone number",
        minlength: jQuery.format("Enter at least {10} characters"),
        remote:    jQuery.format("{0} is not a number")
    },
    text_message: {
      required: "text message cannot be blank"
     }
    }
   }
 });
});

【讨论】：