CODEWITHSUNDEEP
ruby-on-railsajax
Dan Rubio
Dan Rubio

Reputation: 4887

How can I implement AJAX to remove an entry?

I am trying to remove an entry from my Rails app using AJAX. I'm new to AJAX and I'm a little bit stuck because of two things.

  1. I don't think if my url field is correct. I grab a specific entry using $this from jquery but I am not sure as to whether I use "this" for task_path(variable). I need to pass a specific task for deletion but is this the correct way to implement this?

  2. I didn't use anything that required .currentTarget(); Usually in all the AJAX examples I've seen, .currentTarget() was used to grab info from a form and then was manipulated in the .ajax call. I don't have a form. Do I need to implement .currentTarget for the delete action?

Here is my ajax.js file:

$(function() {
$(this).on('delete', function(event) {
event.preventDefault();

  $.ajax({
    type: 'DELETE',
    url: task_path(@task),
    dataType: 'json',
    success: function(response) {
      $(this).remove();
    },
  });
 });
});

def destroy
  @task = Task.find(params[:id])
  @task.destroy
  respond_to do |format|
  format.html { redirect_to root_path, notice: "Task Successfully Removed, Good job!"}
  format.json { render root_path, notice: "Task Successfully Removed, Good job!" }
  end
end

This has really been racking my brain. Thanks for any help.

---------------EDIT----------------

I've tried to do the recommended changes and I've come up with this set of code. I think that I'm getting close but I'm not quite there yet.

$(function() {
$(this).on('delete', function(event) {
event.preventDefault();

var id = $(this).attr("href");
var data_info = $(this);

  $.ajax({
    type: 'DELETE',
    url: id + "destroy",
    dataType: 'json',
    data: data_info,
    success: function(response) {
      $(this).remove();
    },
  });
  });
});

Upvotes: 0

Views: 59

Answers (2)

Omid Kamangar
Omid Kamangar

Reputation: 5778

You should store id in data- attribute, not in href. For example you could have data-id=<%= task.id %> (assuming you are using erb). Then get that id and use it in your js file.

And for the url, you can use js-routes, which gives you Rails routes in Javascript. So, your Javascript would be something ike this:

$(function() {
    $(this).on('delete', function(event) {
        event.preventDefault();

    var id = $(this).attr("data-id");
    var data_info = $(this);

    $.ajax({
      type: 'DELETE',
      url: Routes.task_path(id),
      dataType: 'json',
      data: data_info,
      success: function(response) {
        $(this).remove();
      },
    });
  });
});

This should give you a clue.

Upvotes: 1

ABMagil
ABMagil

Reputation: 5595

It looks like you're mixing client-side and server-side logic in your url field. If I understand your situation, you're trying to run that .js file with url: task_path(@task). Since that file lives in the browser, it has no idea how to translate task_path into an actual path. You'll need to either

  1. Use the actual path ('/tasks/$(this.id)/destroy') with some means of getting of correct id for the URL (could do with data-attributes in the HTML, for instance).
  2. Convert the file to a .js.haml file and render/serve it when you need it. This is not considered best practice.

Other than that, the ajax call looks like the correct jQuery.

Upvotes: 0

Related Questions