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 · Accepted Answer · 2018-04-14 08:10:24Z

1

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}));

answered Apr 14, 2018 at 8:10

Igor Drozdov

15.1k5 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

3limin4t0r Over a year ago

Alternatively you can fetch the form by name like this form = document.forms.notificationForm (assuming the form name is also "notification-form").

john seymour Over a year ago

I will have a look into this, as of now i have a hidden submit button and when i click the button up the top it Jquery.clicks the form submit button as a quick get around.

Collectives™ on Stack Overflow

Remote: true not working after submit via Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related