Empty body when respond_with used in Rails 5

Question

I am trying to render a partial from a controller in rails 5 using ajax(on success) but the blank data is passed to ajax after the action renders a partial.

The Same code was working with rails4. I have also updated the responder gem too for rails5.

Controller:

 respond_with do |format|
    format.html do
      if request.xhr?
        @images = get_images
        session[:prev_images] = submitted_ids
        session[:prev_winner] = winner_id
        @prev_images = Lentil::Image.find(submitted_ids).sort_by{ |i| i.id }
        @prev_winner = session[:prev_winner]

        render :partial => "/lentil/thisorthat/battle_form", :locals => { :images => @images, :prev_images => @prev_images, :prev_winner => @prev_winner }, :layout => false, :status => :created
      end
  end

Ajax:

 $(document).on('ajax:success', function (evt, data, status, xhr) {
    // Insert new images into hidden div
    $('.battle-inner:eq(1)').replaceWith(data);

    $('.battle-inner:eq(1)').imagesLoaded()
        .done(function () {
             // Remove old images
            $('.battle-wrapper:eq(0)').remove();

            // Div with new images moves up in DOM, display
            $('.battle-wrapper:eq(0)').show();

            // Hide Spinner
            $('#spinner-overlay').hide();
    });

_battle_form:

<div class="grid battle-inner">
  <%= semantic_form_for :battle, :remote => true, :url => thisorthat_result_path do |form| %>
      <% @images.each do |image| %>
      <div class="battle-image-wrap grid__cell">
      </div>
      <% end %>
 <% end %>
</div>

Answer 1

Is your request processing as JS?

Try replacing format.html to format.js

Answer 2

It was an issue with jquery-ujs which is no more a dependency for rails>5.1. rails-ujs dependency needs to be used instead.

https://blog.bigbinary.com/2017/06/20/rails-5-1-has-dropped-dependency-on-jquery-from-the-default-stack.html

//To read data from response

.on('ajax:error', function(event) {
    var detail = event.detail;
    var data = detail[0], status = detail[1],  xhr = detail[2];
    // ...
});