Serjuice Serjuice - 3 months ago 11
jQuery Question

Node js and jQuery/Ajax (Like/Unlike)

I am working on my practicing/playing project (just started with jQ and Ajax) and problem is that I can't get my like/unlike button working (mark/unmark called in my app).

This is my code (some node js stuff also, button I think that's not the problem because it works as expected (I can save "marked stuff" in my database etc)):

$('a.mark_button').on('click', function(event) { //marking a topic
event.preventDefault();
$(this).html('Unmark').removeClass('mark_button').addClass('unmark_button');

$.ajax({
url: '/mark',
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({ id:$(this).attr('id') }),
complete: function() {
console.log('Process completed!');
},
success: function() {
console.log('Successfully');
},
error: function() {
console.log('Failed');
}
});
});

$('a.unmark_button').on('click', function(event) { //unmarking a topic
event.preventDefault();
$(this).html('Mark').removeClass('unmark_button').addClass('mark_button');

$.ajax({
url: '/unmark',
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({ id: $(this).attr('id') }),
complete: function() {
console.log('Process completed');
},
success: function() {
console.log('Succesfully');
},
error: function() {
console.log('Failed');
}
});
});


So in details, my button works when you first time click on it, for example there's button "MARK" and when you click on it it should do ajax stuff (post it to my server etc, which is fine (first time)) also it should change the button class so it can behave like a "UNMARK" button (similar to facebook like/unlike system) and so I can unmark it if I accidently marked it. But it just does not work, button style changes, in inspector I can see that class is successfully changed to "unmark_message" too, but that new "unmark" button is not working at all. When I click on it nothing is happening, it just won't trigger the ajax action again.

Same stuff happens if you change roles (mark to unmark button).

Answer

You have two functions here. One function marks a button, the other function unmarks a button.

The problem with your code is that it only attaches one of those two functions to each button, meaning that each button only has the ability to either be marked (if it was originally unmarked) or unmarked (if it was originally marked).

You want to attach both functions to each button, and call the appropriate handler depending on the state of the button.

$('a.mark_button, a.unmark_button').on('click', function(e) {
  var $target = $(e.target);
  if ($target.hasClass('mark_button')) {
    onMarkedButtonClick($target);
  } else if ($target.hasClass('unmark_button')) {
    onUnmarkedButtonClick($target);
  }
});

In the above example, the onMarkedButtonClick and onUnmarkedButtonClick functions would call the click handlers you originally wrote.

Here's a JSFiddle that demonstrates basic marking/unmarking.

https://jsfiddle.net/reid_horton/hwkfjx6a/