Trying to figure out Ruby on Rails remote: true callbacks

Question

So I've been googling on how to set them up, I ended up with this code in the end.

<script>

$('#reportform')
    .bind("ajax:success", function(data, status, xhr) {
        $('#reportalert').text('Done.');
    });
    .bind("ajax:error", function(xhr, status, error) {

        $('#reportalert').text('Failed.');

    });

</script>


<h2>Review Driver</h2>
<p>Fill out your review of the driver</p>   

<div class="hero-unit form-signin" id="reportformdiv">

    <%= form_for(@report, html: { id: "reportform" }, remote: true, update: 
    { success: "response", failure: "error"} ) do |t| %>
<p id="reportalert"></p>
    <%= t.text_field  :plant_site,    placeholder: "Plant Site" %>

    <%= t.text_field  :route_number,  placeholder: "Route Number" %>

    <%= t.text_field  :driver_name,   placeholder: "Driver name if available" %>

    <%= t.date_select :date_recorded, html: { class: "input-block-level" } %>

    <%= t.text_field  :action,        placeholder: "Action taken" %>

    <%= t.text_area   :report_body,   placeholder: "What you witnessed",
                                     style: "height: 300px;",
                                     class: "input-block-level" %>

    <%= t.submit     "File Report",  class: "btn btn-primary btn-large" %>

    <% end %>

</div>

But it is not working and I have no idea why, I'm sure I've done something wrong, I'm new to RoR and I love the fact that I can declare this remote: true in the form its self, once I figure out how to set the callbacks I'll be good to go :) Thanks in advance.

What does your brower's log console tells you when you try to submit the form? (Accessible in Google Chrome by pressing F12) — MrYoshiji, Mar 13 '13 at 19:56
You want to work it this way?? I have solution using `jquery` not with using `:remote => true`. I am pretty sure it will work like charm. Is it ok ?? — Rahul Tapali, Mar 13 '13 at 20:06

score 43 · Accepted Answer · edited Mar 10 '16 at 18:28

43

According to Rails' wiki, the code bellow should work:

<script>
  $(document).ready(function(){
    $('#reportform').on('ajax:success', function(e, data, status, xhr){
      $('#reportalert').text('Done.');
    }).on('ajax:error',function(e, xhr, status, error){
      $('#reportalert').text('Failed.');
    });
  });
</script>

A similar code worked for me in Rails 3.2.14 and jquery-rails 3.0.4

Hope it helps.

edited Mar 10 '16 at 18:28

cweston

11,297
19
82
107

answered Nov 20 '13 at 18:41

Victor BV

1,051
13
9

1

If anyone wants to know how to get a hold of the actual error messages, the response body is evidently contained in `e.detail`. – Jason Swett Jan 07 '19 at 16:55
If the target for the form is '_blank' and the response from the server is downloading a PDF, should these events still fire? My initial testing indicates no response. Anyway to catch this scenario when the file is returned to the client from the server? Or a way to fire call javascript function in client from server while also returning the pdf without a double-render issue? – Streamline Jul 03 '19 at 18:14
If you add an `ajax:success` handler and it doesn't appear to work, the issue could be that the Ajax request fails – this can happen even if it's a 200 response, e.g. if you don't return JSON. You can verify by adding an `ajax:error` handler as in the example above. – Henrik N Dec 13 '19 at 15:10

score 9 · Answer 2 · answered Aug 02 '19 at 08:53

9

Since Rails 5.1, response, status, and xhr must be extracted through event.detail see: https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers

This is one possible solution:

$(document).on('ajax:success', '#reportform', event => {
  const [response, status, xhr] = event.detail;
});

answered Aug 02 '19 at 08:53

Yi Feng Xie

4,378
1
26
29

1

Thanks for the heads up ! This is now stable: [https://guides.rubyonrails.org/working_with_javascript_in_rails.html] – gfd Dec 18 '19 at 22:33

score 4 · Answer 3 · edited Mar 10 '16 at 18:28

4

Turbolinks compatible

<script type="text/javascript">

    $(document).on('ajax:success', 'a[data-remote].watching', function(e, data, status, xhr){

    });

</script>

edited Mar 10 '16 at 18:28

cweston

11,297
19
82
107

answered Nov 26 '13 at 23:23

sparkle

7,530
22
69
131

score 3 · Answer 4 · answered Mar 13 '13 at 20:18

Try this:

Put your javascript code on document ready:

<script>
$(document).ready(function(){
  $('#reportform')
    .bind("ajax:success", function(data, status, xhr) {
        $('#reportalert').text('Done.');
    });
    .bind("ajax:error", function(xhr, status, error) {

        $('#reportalert').text('Failed.');

    });
})
</script>

score 0 · Answer 5 · answered Apr 14 '20 at 17:58

You don't have to use jQuery. Could do:

document.querySelector('#reportform')
    .addEventListener("ajax:success", function(data, status, xhr) {
        document.querySelector('#reportform').text('Done.');
    });
    .addEventListener("ajax:error", function(xhr, status, error) {
        document.querySelector('#reportform').text('Failed.');
    });

Trying to figure out Ruby on Rails remote: true callbacks

5 Answers5

Linked