CODEWITHSUNDEEP
javascriptjqueryajax
Sean Magyar
Sean Magyar

Reputation: 2380

Variable doesn't get set properly

When a user clicks on the delete button on the index page. The modal pops up and with the first function the URL path gets passed to the taskdestroylink attribute of the delete button in the modal. Until now everything works fine. Everytime I click on the link the attribute gets set properly.

The second function is sending the AJAX request to the server. On page reload the first request works fine, but the second one keeps the route of the first one. So var href gets set properly for the first time, but if I try to delete another task the href value still belong to the first one. It's weird since as I mentioned the taskdestroylink attribute shows the new value in the DOM.

So what's the problem with var href = $(this).data("taskdestroylink");? Why doesn't it set the new value?

Modal get's opened by clicking this link:

<li>
  <a href="#" data-toggle="modal" role="button" data-target="#delete-task-modal" class="open-delete-task-modal" data-taskdeletelink="<%= user_task_path(current_user, task) %>">Delete Task</a>
</li>

Modal:

<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" id="deletetaskclose">Close</button>
  <a href="#" id="delete-task-link" type="button" class="btn btn-danger" data-taskdestroylink >Delete Task</a> 
</div>

JS:

$(document).on('click', '.open-delete-task-modal', function (event) {
  var taskDeleteLink = $(this).data("taskdeletelink");
  $('#delete-task-link').attr("data-taskdestroylink", taskDeleteLink);
});

$(document).on('click', '#delete-task-link', function (event) {
  var href = $(this).data("taskdestroylink");
  alert(href);
  $.ajax({
    type: "DELETE",
    url: href,
    dataType: "script"
  });
});

Upvotes: 1

Views: 59

Answers (1)

epascarello
epascarello

Reputation: 207511

It is a bad idea to mix data() and attr() so pick one and stick with it.

Change

.attr("data-taskdestroylink", taskDeleteLink);

to

.data("taskdestroylink", taskDeleteLink);

data() uses its own internal storage and not the actual attributes.

Upvotes: 2

Related Questions