Is this a good way to do AJAX request in Rails 4? - ruby-on-rails

Question

I am mostly familiar with a full JavaScript stack and ever since I have been working in Ruby on Rails, I was never fully confident with the way I make XHR requests, hence, I want to validate my understanding. I looked at the following questions
Ajax request throws 500 error, but the request works
Processing after the request was completed
Rails 3: How to "redirect_to" in Ajax call?
but didn't quite answer my issue.
Here is what is happening from my understanding. In Rails we have our MVC, and the Controller is essentially where we control what the route will render. It can also be designed as an API, for doing things like CRUD.
Next, on our front end, for the sake of simplicity let's use jQuery. We want to make an AJAX request and handle the response.
$.ajax({
url: '/new-sandwich/'+food_id,
type: 'post',
data: { food_id: food_id}
})
.done(function() {
// if it works, refresh the page
})
.fail(function(e) {
// if it works alert the user and refresh the page
alert(e.responseText)
return location.reload();
})
Suppose the Controller for this is very thick, so the response takes up to a couple seconds.
After going through about 100 lines or so... the problem then happens with the response.
If it fails, it alerts the user and after refresh it still processes as if everything was okay. To fix that, I believe I have to add better validation at the top of the controller action.
Next, the problem is that since this a post request, I don't can't figure out where to REDIRECT? If the request is succesful, I want it refresh, but do I do that from the client or the server? If I don't add a render :nothing => true at the end of the POST Controller Action I get...
ActionView::MissingTemplate - Missing template sandwich/create_sandwich, application/create_sandwich
but if I do, then is there a point of doing it in the JavaScript?

Answer 1

Well, in my controller, I typically do something along the lines of:
class FooController < ApplicationController
def create
... do some stuff
render partial: 'some_partial', locals: {if: :needed}
end
end
And then in the javascript, something like:
$.ajax({
url: '/new-sandwich/'+food_id,
type: 'post',
data: { food_id: food_id}
})
.success(function(data) {
$('#someSelector').html(data)
})
.fail(function(e) {
// if it works alert the user and refresh the page
alert(e.responseText)
return location.reload();
})
So, the controller returns some HTML and the js inserts that HTML into the page in the location defined by $('#someSelector').
If my controller method really takes a lot of time, then I would typically do something along the lines of:
class FooController < ApplicationController
def create
render json: {job_id: FooCreateService.call(some: params[:thing])}, status: :ok
end
end
And then my ajax call might look something like:
$.ajax({
url: '/new-sandwich/'+food_id,
type: 'post',
data: { food_id: food_id}
})
.done(function(data) {
#.$jobId = data['job_id']
#showAWorkingOnItNotification()
#pollForResults()
})
.fail(function(e) {
// if it works alert the user and refresh the page
alert(e.responseText)
return location.reload();
})
My #pollForResults function would use #.$jobId to poll a background job service for completion, and then respond appropriately when the job is done (successfully or unsuccessfully).
It is, naturally, a bit more complicated than all of that. But, that's the direction I usually head.