Triggering a click through Jquery on ruby code

Question

So I'm trying to get my f.submit to be triggered when I click f.check_box. I don't know if you can use jquery to work on ruby... But basically this is a view of a to-do list with all the items on the page. When I click the checkbox to mark it off, I want it to be automatically submitted.

I thought I could assign a div tag on the f.check_box and the f.submit to trigger them... This is the first bit of JQuery I've working with.

<h1><%= @list.title %></h1>
     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <div>

    <h2><% @list.items.each do |item| %></h2>
    <%= item.content %>
      <%= form_for([@list, item]) do |f| %>
      <div id="target">
        <%= f.check_box :complete %>
      </div>
        <div id="handler">
          <%= f.submit %>
          <% end %>
          </div>
    <% end %>
     </div>
    <script>
      jQuery(document).ready(function() {

        jQuery("#target").click(function() {
          jQuery("#handler").click();
      });
     });

    </script>




    <% if policy(@list).update? %>
      <%= link_to "Edit List", edit_list_path, class: 'btn btn-success' %>
      <% end %>



     <div class="col-md-4">
       <% if policy(Item.new).create? %>
         <%= link_to "New Item", new_list_item_path(@list), class: 'btn btn-success' %>
       <% end %>

       <% if policy(@list).destroy? %>
          <%= link_to "Delete List", @list, method: :delete, class: 'btn btn-danger', data: { confirm: 'Are you sure you want to destroy this lovely list?'} %>
          <% end %>
     </div>
    </div>



    <%= render "items/form" %>




    <!-- 
    new_list_item_path

    /lists/5/items/new
     -->

argentum47 · Answer 1 · 2014-12-02T07:05:07.677

0

Um, try something like:

$("input[type=checked]").on("click", function() {
  if( $(this).is(':checked') ) { $('form').submit() }
}

And you might want to

<%= f.check_box :complete, html: { class: "check_complete"} %>

and

<%= f.submit, ".." id: "handler"%>

And then replace replace the input[type=checked] with .check_complete and maybe use the ("#handler").click(); instead of .submit()

edited Dec 02 '14 at 07:05

answered Dec 02 '14 at 04:55

argentum47

2,385
1
18
20

hmm.... tried both suggestions and still nothing. I had to leave my f.submit as it was, adding `id:handler` threw me a syntax error. so I still have it labeled as `
<%= f.submit %>`. @argentum47
– Bart Dangus Dec 02 '14 at 05:23
@BartDangus why would it throw a syntax error!! show the code!! It should be like <%= f.submit "Submit", id: "handler" %>, like here http://stackoverflow.com/questions/12488051/rails-how-to-keep-checkbox-and-label-on-same-line and U are using rails 4 or above? – argentum47 Dec 02 '14 at 07:07

score 0 · Accepted Answer · answered Dec 02 '14 at 07:45

div does not fire onclick event you need to set onchange method of checkbox which will submit the form.

Here is a code for that. You need to set different id for every submit-button and then you can submit that form using Jquery.

I set the onchange method of checkbox which submits that forms according to item id.

<h1><%= @list.title %></h1>
     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <div>
<%index=0%>
<h2><% @list.items.each do |item| %></h2>
<%= item.content %>
  <%= form_for([@list, item]) do |f| %>
    <%=f.check_box :complete,{:onchange=> "submit_form("+@list.items[index].id.to_s+");"}%>
      <%= f.submit :id=>@list.items[index].id%>
       <%index+=1%>
      <% end %>
<% end %>
 </div>





<% if policy(@list).update? %>
  <%= link_to "Edit List", edit_list_path, class: 'btn btn-success' %>
  <% end %>



 <div class="col-md-4">
   <% if policy(Item.new).create? %>
     <%= link_to "New Item", new_list_item_path(@list), class: 'btn btn-success' %>
   <% end %>

   <% if policy(@list).destroy? %>
      <%= link_to "Delete List", @list, method: :delete, class: 'btn btn-danger', data: { confirm: 'Are you sure you want to destroy this lovely list?'} %>
      <% end %>
 </div>
</div>



<%= render "items/form" %>



<script>
    function submit_form(id) {
         $('#'+id).click();
    }

</script>

Triggering a click through Jquery on ruby code

2 Answers2