Remote: true not working after submit via Jquery

Question

Im submitting my form with checkboxes via Jquery with remote true but its not working. Its keeps rendering the html format in the controller and i can work out why.

Here is my submit button and form:

<%= button_to "Read sel", root_path, class: "btn btn-info btn-sm padlr", id: "notification-submit" %>

<%= form_tag read_selected_notifications_path, :authenticity_token => true, remote: true ,id: "notification-form" do %>
  <% @notifications.each do |x| %>
    <div class="notification-body flerowspb">
      <div class="flerowspb" style="width:80%">
        <div class="notif-check flecolcen">
          <%= check_box_tag "read_notif[]", value="#{x.id}" %>
        </div>
        <div class="notif-details ">
          <div class="notif-time flerowspb">
            <% if !x.viewed %>
               <span class="glow"> New  <%= x.notification_type.capitalize %></span>
            <% else %>
               <span><span class="text-grey"> New <%= x.notification_type.capitalize %></span></span>
             <% end %>
             <span class="text-grey font-small"> <%= time_ago_in_words(x.created_at) %> ago</span>
          </div>
          <div class="notif-body font-medium text-grey">
            <span class="text-blue"><%= link_to x.sender.username, profile_path(x.sender) %> </span>  <%= x.title %>  <br>
            Click <span class="text-blue"><%= link_to "Here", entry_path(x.entry_id, notification_id: x.id) %> </span> to view it
          </div>
        </div>
      </div>
      <div class="notif-image">
        <%= image_tag x.entry.image.small_thumb %>
      </div>
    </div>
  <% end %>
<% end %>

So there is no actual submit button for the form as i want the button above the form not below it like this,

I understand i have to add :authenticity_token => true as rails doesnt add this to form_tag with remote: true

Here is my controller:

def read_selected
  Notification.read_selected(current_user.id, params[:read_notif])
  respond_to do |format|
    format.html{
      flash[:success] = "Selected notifications marked as read"
      redirect_to notifications_path
    }
    format.js{
      render 'notifications/jserb/read_selected'
    }
  end
end

Here is the js code:

$(document).on('turbolinks:load', function(){
  if (window.location.href.match(/\/notifications/)) {
    $('#notification-submit').on('click', function(e){
      console.log('oisdjfilds');
      e.preventDefault();
      $('#notification-form').submit();
    });
  }
});

EDIT: I added in a submit button at the bottom of the form and it works as it should do, So it something to do with the way i'm submitting the form

Igor Drozdov Igor Drozdov · Accepted Answer · 2018-04-14T08:10:24

I assume you're using Rails 5, since there is such an inconsistency in its behavior. Please, check out the issue

As far as I understand the quick solution for your problem is going to be:

Get the form HTML element:

form = document.getElementById('notification-form');

or

form = $('#notification-form')[0]

And then fire Rails submit:

Rails.fire(form, 'submit');

or

form.dispatchEvent(new Event('submit', {bubbles: true}));

Remote: true not working after submit via Jquery

1 Answers