How to correctly do a jquery request in application.js using Ajax call

Question

I'm trying to relocate table row into another <div> through checkbox and I hope to accomplish this using Ajax call. But things won't work for me. Nothing happens after I click, there is no simply response. What am I missing?

My Javascript code in application.js

$(document).on('ready page:load', function () {
    $('.check').on('change', function(){
    if ($(this).is(':checked')) {
    id = $(this).attr('data-id');
    user_id = $(this).attr('data-user-id');
    complete = true;
    path = '/users/' + user_id + '/tasks/' + id;
    var jqXHR = $.ajax({
                 method: 'put',
                 dataType: "application/json",
                 url: path,
                 data: { task: {complete: complete, id: id}  }
    });

    jqXHR.done(function(data){
         task = $(this).closest("tr");
         $('.complete-tasks').last().after(task);
    })
  };
})
})

view file _index.html

<h3>Tasks database</h3>

<table>

  <% @tasks.each do |task| %>
    <tr class='tasks' id="task_<%= task.id %>">

    #Some stuff

  <td>
    <input type="checkbox" class='check' data-id="<%= task.id %>" data-user-id="<%= current_user.id %>" data-complete="<%= task.complete %>" >
  </td>

    </tr>

  <% end %>

</table>

<h3>Completed</h3>

<div class="complete-tasks">
</div>

I'm referring to an update action in my tasks_controller.rb

 def update
    @task = Task.find(params[:id])

      respond_to do |format|
     if @task.update(task_params)
      format.json { head :no_content }
     else
      format.html { render action: 'edit' }
      format.json { head :no_content }
     end
   end
  end


 private

    def task_params
     params.require(:task).permit(:title, :due_date, :priority, :complete)
    end

end

rake routes

What does the javascript console say? Is there an error? Also try checking your log file before and after the click to see if the request hits Rails and if there's any errors there. — eirikir, Aug 01 '15 at 21:51
You should avoid using `$(this)` inside your done callback. See: http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working — mccannf, Aug 01 '15 at 22:13
@mccannf I'm very grateful. Supply an answer so I can accept it. — Alex Nikolsky, Aug 02 '15 at 06:31
@eirikir There weren't any errors in console. mccannf tip resolved my problem. — Alex Nikolsky, Aug 02 '15 at 06:35

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

Do not use $(this) inside an ajax callback like done. In your case it will not refer to the checkbox anymore but rather the jqXhr object.

See this question for details: $(this) inside of AJAX success not working

edited May 23 '17 at 12:22

Community

1
1

answered Aug 02 '15 at 19:41

mccannf

16,619
3
51
63

How to correctly do a jquery request in application.js using Ajax call

1 Answers1