Ruby on Rails ajax DELETE request is not reaching backend

Question

I have an ajax request that isnt reaching my backend function. The request gives a status of 200 and steps into the success but it never hits my backend controller method. In my response I get this:

Turbolinks.clearCache() Turbolinks.visit("http://localhost:3000/session/new", {"action":"replace"})

I dont get any errors in my Dev console. Any thoughts on how to solve this?

Rails version is 6, Turbolinks version is 5.0.1

This is my route in my routes.rb file

  resources :analyses_groups, :controller => "analyses/groups" do
    delete "remove_mitigation_mapping", on: :collection;
    post "add_mitigation_mapping", on: :collection;
  end

My ajax call is in my index.html.erb file

    $(document).ready(function() {
    
      $("button.delete_mapping_item").on('click', removeMapping);

    });
    
    var removeMapping = function (event) {
              event.stopPropagation();
            
              var button        = $(this);
              var mapping_type  = button.data("mapping_type");
              var mapping_index = button.data("mapping_index");
              var mapping_name  = button.parents("span").text();
            
              if (confirm("Are you sure you want to remove " + mapping_name + "from " + mapping_type + "?")) {
                $("#shade").show();
            
                // Get mitigation_matrix_id
                var row                  = $(this).parents("tr").parents("tr")[0]
                var mitigation_matrix_id = $(row).find(".mitigation_matrix_id").text()
            
                // Set up params for URL
                var param_hash = {
                  "mitigation_matrix_id": mitigation_matrix_id,
                  "mapping_type": mapping_type,
                  "mapping_index": mapping_index,
                }
            
                $.ajax({
                    url: "/analyses_groups/remove_mitigation_mapping" + '?' + $.param(param_hash),
                    type: "DELETE",
                    success: function(data) {
                        console.log("success");
                        console.log(data);
                      button.closest("tr").remove();
                      $("#shade").hide();
                    },
                    error: function(data) {
                      $("#shade").hide();
                    }
                });
              }
            }

user_1608226 · Answer

I've found this kind of ajax to be a major pain to get right due to Rail's auth token and several other messy to resolve issues that need to be handled just right to make it work.

I usually find it's faster/easier to just add a hidden form with a hidden submit button. Slightly more messy, but far less things that you need to get right to have it work, so I typically use this during prototyping and when I need it to work right the first time.

Basically just add a display:none form with hidden fields for mitigation_matrix_id, mapping_type and mapping_index. Set them via JS, then use JS to click the hidden submit button. For the JS response, you can just use setup a action.js.erb file to handle it. The form should be an ajax form so use remote: true, local: false (this works on a wide variety of rails apps, though strictly speaking you only need one of the two for a given version of rails).

Note: There is also a specialized Rails.ajax method that can be used too, but that also has a few things that you need to handle right for it to work right.

user_11414277 · Answer

In my response I get this:

Turbolinks.clearCache() >Turbolinks.visit("http://localhost:3000/session/new", {"action":"replace"})

From the above observation, it seems like TurboLinks is intercepting your request and trying to do its thing in the response,

From the ajax call you posted,

success: function(data) {
    console.log("success");
    console.log(data);
    button.closest("tr").remove();
    $("#shade").hide();
 },

I can safely guess that you are expecting a json response,

Here is what you can try,

add the dataType field in the ajax options as json, as below:

$.ajax({
  url: "/analyses_groups/remove_mitigation_mapping" + '?' + $.param(param_hash),
  type: "DELETE",
  dataType: 'json',//added the expected response type
  success: function(data) {
    console.log("success");
    console.log(data);
    button.closest("tr").remove();
    $("#shade").hide();
  },
  error: function(data) {
    $("#shade").hide();
  }
});

Also, in the controller code, if you havent, please respond with a json response and do not use redirect_to, or do not respond with html or js file.

Ruby on Rails ajax DELETE request is not reaching backend

2 Answers