AJAX和Rails：发布到控制器失败

Question

I have a Rails model that has a simple boolean attribute. I am trying to update that attribute in the background when a user clicks a checkbox in a view. I believe that I have configured the AJAX and controller/router correctly, but when I do press a button, the error function for the AJAX post fires, rather than the success one.

I am not really sure where to go from here, there isn't really any useful information I can extract from the error.

config/routes.db

...
post "/task_toggle" => "tasks#toggle", :as => "task_toggle"
...

The tasks_controller does exist and has a method toggle.

This is the javascript at the end of the body. I am using taskNumber to get the ID for the model that needs to be toggled, and I have confirmed that it is indeed correct.

JavaScript/AJAX

<script type="text/javascript">
    $(document).on("click", ".check-task-btn", function() {

        var taskNumber = $(this).parent().attr("id").substring(4);

        $.ajax({
            url: "/task_toggle",
            type: "post",
            data: {task_id: taskNumber},
            dataType: "JSON",
            success: function() {
               window.alert("it worked");
            },
            error: function() {
                window.alert("no");
            }
        });
    });
</script>

When I press a checkbox that is marked with the check-task-btn class I get the message no printed.

Here is the controller just in case there is something noteworthy in here.

TasksController

def toggle
    task = Task.find(params[:task_id])
    task.finished = !task.finished
    task.save
    redirect_to root_path
end

Does anybody have any idea why my AJAX is failing?

Thank you

EDIT: So I just checked and it is actually applying changes to the DB, but I am still getting the alert printed from the error. Why would that be?

Answer 1

Further to @vinodadhikary's answer, the most likely problem is that your controller is not rendering the view correctly. I wanted to write an answer because I think you'll benefit from the " Network " tab of the developer tools part of Chrome / Firefox

---

Chrome Developer Tools

When you send an Ajax call, your system is basically performing an HTTP request on your behalf (with JS). In simple terms, your browser is essentially loading a URL without refreshing your page

Most people don't understand this, and presume AJAX is some mysterious technology. The reality is that the error you're getting is going to be the result of Rails having an error in the backend. To see what error, you just need to do this:

• Right-click & select "Inspect Element"
• In the tab which loads, select "Network"
• In the network tab, scroll down the left & find the Ajax request (will be in red at the bottom)
• Click it & load the "preview" sub-tab
• This should show the Rails error for the request

---

Controller Response

As mentioned by @vinodadhikary, the controller's response is likely the cause of the issue. The reason is because the respond_to tag is absent

respond_to allows your controller actions to handle different mime-types (JS / JSON / HTML) in different ways. You're currently blanketing all your requests like this:

def toggle
    task = Task.find(params[:task_id])
    task.finished = !task.finished
    task.save
    redirect_to root_path
end

This will handle every request in the same way (redirect to the root_path), but if you're sending a JSON or JS request, you'll be much better placed to handle the requests differently, like @vinodadhikary's answer:

def toggle
    task = Task.find(params[:task_id])
    task.finished = !task.finished
    task.save
    repsond_to do |format|
       format.html { redirect_to root_path }
       format.json
    end
end 

Answer 2

I believe the culprit is the redirect_to root_path here. Try responding to different formats as you've asked for json format in your ajax call.

Give this a try:

  def toggle
    task = Task.find(params[:task_id])
    task.finished = !task.finished

    if task.save
      respond_to do |format|
        format.html { redirect_to root_path }
        format.json 
      end
    else
      # return an error here accordingly
    end
  end