I have a Rails Recipe Manager project I am working on, now in the process of implementing jquery/ajax to show resources without a page refresh (course requirement, I cannot use remote=true)
So my issue now is with deleting comments, I am able to create comments just fine and delete them as well but only if i refresh the page after creating them. For some reason, my click event cannot be activated unless i refresh. Here is my code:
$(function createComment() {
$("#new_comment").on("submit", function(e) {
e.preventDefault();
const values = $(this).serialize()
$.post(this.action, values).success(function(response) {
$('div.comments_container').append('<div class="new_comment_' + `${response.id}` + '"> </div>')
$('div.new_comment_'+ `${response.id}`).append('<h3 class="cheading">' + ` ${response.user.name}` + ' gives' + ` ${response.rating}` + ' out of 5 stars! </h3>')
$('div.new_comment_'+ `${response.id}`).append('<p class="cdescription">' + `${response.description}` + '</p>')
$('div.new_comment_'+ `${response.id}`).append('<a class="ecomment" href="/recipes/' + `${response.recipe_id}` + '/comments/' + `${response.id}` + '/edit">Edit</a>' + " ")
$('div.new_comment_'+ `${response.id}`).append('<a class="dcomment" rel="nofollow" data-method="delete" href="/comments/' + `${response.id}` + '">Delete</a>')
});
$('form#new_comment')[0].reset();
});
});
$(function deleteComment() {
$('a.dcomment').on("click", function(e){
e.preventDefault();
var r = confirm("Delete this comment?");
if (r == true) {
$(this).parent().hide("slow");
}
else {
return false;
}
});
});
my full repo is at: https://github.com/Bartekswistak/fun_guy_chef/tree/jquery