Rails AJAX（JSON）响应重新加载页面

Question

In the controller a response to an AJAX Request is following:

@response = {resp: "ack"}
render json: @response

JS which handles AJAX is:

$('#some_btn').click(function() {    

    var valuesToSubmit = $('#some_form').serialize();
    var url = $('#some_form').attr('action');

    console.log("VALUE: " + valuesToSubmit);
    console.log("URL: " + search_url);

    $.ajax({
        type: 'POST',
        url: url, //sumbits it to the given url of the form
        data: valuesToSubmit,
        dataType: "JSON",
        success: function(data) {

            console.log("saved");
            console.log(data);

        }
    });

    return false;
});

But the problem is that I don't get console messages, instead the page reloads and I get json as text on a new page. How to prevent this "non-true-AJAX" behaviour?

Answer 1

So, I had almost the same problem. In my case, I was using the folliwing link to send the request:

<td>
  <%= link_to add_item_path(item), 
    class: 'ui icon button',
    id: "add-item-#{item.id}",
    method: :post do %>
      <%= fa_icon 'shopping-cart' %>
    <% end %>
 </td>

My js to send the ajax was:

  $(document).ready(function() {
    $("a:regex(id,add-item-[0-9]+)").click(function(event) {
      event.preventDefault();
      var link = $(this).attr("href");

      $.ajax({
        url: link,
        method: "POST",
        dataType: "json",
        success: function(data) {
          console.log(data);
          $('#notice-modal').modal('show');
        }
      });
    })
  });

and my rails controller action was:

  def add
    @item = Item.find(params[:item_id])
    current_cart << { item_id: @item.id, quantity: 1 }
    render json: {quantity: 1}
  end

So the problem was I using only event.preventDefault() but wasn't enought. For working fine, I need to use event.stopPropagation() . Like this:

  $("a:regex(id,add-item-[0-9]+)").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
    var link = $(this).attr("href");

    $.ajax({
      url: link,
      method: "GET",
      dataType: "json",
      success: function(data) {
        console.log(data);
        $('#notice-modal').modal('show');
      }
    });
  })

The event.stopPropagation() is needed because rails component (rails-ujs I think) sent the request elsewhere. You can also remove the method: :post , and will work fine.

Hope I helped!

Answer 2

Do you need to prevent the default form submit action?

$('#some_btn').click(function(event) {  
  event.preventDefault();

  //...
});

Answer 3

I had this problem myself. Turns out, I'd just forgotten to add "//= require jquery_ujs" to my application.js file. As soon as I added it, everything worked fine.