1

I am trying to display an error message to the user saying a booking cannot be cancelled if something goes wrong.

On success ajax intercepts the normal form behaviour with remote: true and renders a partial (incidentally within an existing partial), but I can't bind an 'ajax:error' event to my form in my js.erb file.

I've tried lots and lots of different things and syntax variations to try to get it to work. (I am quite new to javascript/jQuery so it could be something basic as js.erb doesn't show errors in the console). This was my latest attempt:

cancel_success.js.erb:

$('#cancel-message').html("<%= j (render 'cancel_success') %>");
$('#cancel-message').slideDown(350);
$('#search-show-container').hide()

$('#reservationId').closest('form').on('ajax:error', function(xhr, status, error) {
  $("#cancel_error_text").html("Sorry, we can't cancel your booking at the moment, please try calling the restaurant:");
});

My form view:

<p id="cancel_error_text"></p>

<div id="search-show-container">

<%= form_tag(cancel_success_searches_path, remote: true) do %>
    <%#= label_tag 'Reservation ID' %>
    <%= text_field_tag :reservationId %>   
    <%= submit_tag 'Cancel Booking', name: nil %>
    <% end %>
</div>
neo5_50
  • 466
  • 1
  • 5
  • 19

1 Answers1

0

Ok, this might not be the complete badass answer you're looking for. But I wanted to try and get you started.

I think you need to switch where you put your ajax:success and ajax:error code. Right now you've got it in your cancel_success.js.erb file, which runs after your controller action. I think you need to put that code a the following file: app/assets/javascripts/cancel_success.js

$(document).ready(function() {
  $('#reservationId').closest('form').on('ajax:error', function(xhr, status, error) {
    $("#cancel_error_text").html("Sorry, we can't cancel your booking at the moment, please try calling the restaurant:");
  });
});

More information here

thedanotto
  • 6,895
  • 5
  • 45
  • 43
  • After forcing the code to fail for so long, now I've found a new bug and can't get the form to work at all! (After it was working before!) – neo5_50 Aug 12 '15 at 16:54
  • In the console this is returning correctly: $('#reservationId').val() "35727488" which is required for a valid request to API but it is throwing 500 error every time. Sorry, probably too many moving parts here – neo5_50 Aug 12 '15 at 16:57
  • Does this help you? http://stackoverflow.com/questions/9305890/how-to-fail-ajax-request-in-rails – thedanotto Aug 12 '15 at 17:05
  • Got that bit working now as it was a problem API side. Will let you know soon how I get on with your solution, need a fresh mind! – neo5_50 Aug 12 '15 at 17:05
  • Hi @thedanotto, thanks for your code snippet, just tried to run it and it didn't work, same lack of outcome as before. In my experience if you set the form to remote: true, the other related, separate, regular javascript files don't work. – neo5_50 Aug 12 '15 at 18:20
  • It doesn't work with pure Ajax either, I suspect because it is in a partial already, the mark-up doesn't change from the original root "parent" page (even though inspect element shows the reservationId element is indeed there) – neo5_50 Aug 12 '15 at 18:35