Question

我已经查看了之前的一些Stack Overflow问题，但无法弄清楚如何将其应用于我的特定情况。

特别是我看了很多解决方案，它们告诉你将表单设置为远程，并使用.js.erb文件和许多部分文件。但对于我想做的事情，这似乎过于复杂。

我的应用正在查询外部API。当第一个ajax调用成功时，它会触发另一个请求（通过页面上的另一个表单）。

但是在出错时，如何在页面顶部（不重新加载）将p标签中的简单红色错误消息简单地添加到问题中？

我的控制器没有以最好的方式设置，因为没有数据库而且它只是向API发出请求：

class ReservationsController < ApplicationController
  respond_to :html, :js

    def index
      if params[:partner_code] && params[:restaurant_location_id] && params[:session_id] && params[:dining_date_and_time] && params[:size] && params[:first_name] && params[:last_name] && params[:bookEmail]
        if params[:reservationId]     
        end
      end
    end

    def new
      @reservation = Reservation.new params[:partner_code], params[:restaurant_location_id], params[:session_id], params[:dining_date_and_time], params[:size], params[:first_name], params[:last_name], params[:bookEmail]
    end

    def temp_page
    @cancel = Cancel.new params[:reservationId]
    end

    # Is this needed?
    def guests     
    end

    private

    def reservation_params
      params.require(:reservation).permit(:partner_code, :restaurant_location_id, :session_id, :dining_date_and_time, :size, :first_name, :last_name, :bookEmail, :confirmation_number, :reservationId)
    end

end

我的ajax代码：

$(function() {

  $('#partner_code').closest('form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      // BELOW NOT NEEDED:
      //dataType: 'text',
      // contentType: 'application/x-www-form-urlencoded',
      data: $(this).serialize(),
      success: function() {
          submitCancellation();
        },
      error: function() {
          errorMessage();
      }
    });
  });

  function submitCancellation() {
      console.log("Triggered Submit Cancellation");
      $('#reservationId').val($('#reservationId').attr('value'));
      // submit second form            
      $('#reservationId').closest('form').submit();
  }

  function errorMessage() {
    $("#error_message).html
  }


});

我的视图有两个表单，在提交时会触发两个ajax调用：

<!-- FIRST FORM -->
<%= form_tag(new_reservation_path, method: :post) do %>   

  <div class="field">
    <%= text_field_tag :partner_code %>
  </div>

  <div class="field">    
   <%= text_field_tag :restaurant_location_id %>
  </div>

  <div class="field">    
    <%= text_field_tag :session_id %>
  </div>   

   <div class="date-field">    
    <%#= label_tag :dining_date_and_time %><br>
    <%= text_field_tag :dateSubmit%>
  </div>

   <div class="field">    
    <%#= label_tag :dining_date_and_time %><br>
    <%= text_field_tag :timeSubmit %>
  </div>

  <div class="field">    
    <%#= label_tag :size, 'Guests' %><br>
    <%= hidden_field_tag :size %>
  </div>

  <div class="field">
    <%#= label_tag :first_name %><br>
    <%= text_field_tag :first_name %>
  </div>
  <div class="field">
    <%#= label_tag :last_name %><br>
    <%= text_field_tag :last_name %>
  </div>  
  <div class="field">
    <%#= label_tag :email %><br>
    <%= text_field_tag :bookEmail %>
  </div>    

  <div class="actions">
    <%= submit_tag 'Continue', name: nil, id: "bookSubmit" %>
  </div>
  <% end %>

  <!-- SECOND FORM -->
    <%= form_tag(temp_page_reservations_path, method: :post) do %>
    <div class="field">
      <%= text_field_tag :reservationId %>
    </div>
    <% end %>

Answer 1

看起来你的代码几乎是完美的。这就是我所看到的：

function errorMessage() {
  $("#error_message").html("An error occurred");
  $("#error_message").css('color', 'red');
}

我在你的视图中没有看到div #error_message，所以请确保你在某处。

如何在Rails 4中显示Ajax错误的基本消息

1 个答案: