I want to hide a div when a form is sent using Ajax. The problem is that I’ve got around a hundred divs that are all called helpfulxxx (the xxx is the unique handler for each div). The problem is I’m not sure how to change just that div.
Also, it looks like you might be using id’s wrong. All id’s should be unique on the page. There should only be 1 element with the id="rate-yes" and 1 with id="rate-no". If there are multiple elements, they should be classes. You can do a click event based on the class.
eg:
<button class="rate-yes">Yes</button>
<script>
$('.rate-yes').click(function(e) {
// do stuff
});
</script>
I’m sure it’s generated content, but this looks generic enough to do this.
Anyway, to your question. Use the this keyword.
$(".rate-yes").click(function(e) {
// "this" here corresponds to the button that was clicked
// set to a "self" variable because it is a keyword and will lose scope later on
var self = this;
// *note* self is not a keyword, just a variable name. you could name it "bob" if you'd like
$.ajax({
async: false,
type: "POST",
url: "/rate.php?rate=good",
data: $(self).serialize(), // self instead of the class
success: function(data) {
// wrap self in the jquery object $() to use jquery functions like .val()
// just concat the value of the button to the id name
$('#helpful' + $(self).val()).fadeOut("fast", function() {
$(this).before("<div class='rate'><strong>Thank you</strong></div>");
});
}
});
});
I’m really sorry to be a pain but when I load more comments this stops working. I’ve tried to fix it myself but am not sure how to. I tried to change $(“.rate-no”).click(function(e) { to $(“.rate-no”).on(“click”,function(e) { but that didn’t work
I’m sure you’ve moved on by now because this is a month and a half old, but I didn’t notice this. Sorry. Discourse only notifies someone if you click the little reply under their post, or quote them, or mention them (best way).
The call to the database works so the code is being executed but the #helpful div isn’t being hidden and the .rate one isn’t being shown so somebody could click to rate it multiple times.
This is what I’ve got:
$(document).on(‘click’, ‘.rate-yes’, function(e) {
var self = this;
Because you’re not hiding #helpful until the response from the server comes back. Do that at the beginning. Don’t worry about a successful response unless you need the data.
Because if your code works, then the response should be good almost every time, so that means you should only need to handle the errors. The user doesn’t actually care if the response is good, that’s what’s supposed to happen. So why make them wait?
$(document).on('click', '.rate-yes', function(e) {
var self = this;
$('#helpful').fadeOut('fast', function() {
$(this).before("<div class='rate'><strong>Thank you</strong></div>");
});
$.ajax({
async: false,
type: "POST",
url: "/rate.php?rate=good&id=" + $(self).val(),
data: $(self).serialize(), // self instead of the class
error: function(data) {
// handle the error here
}
});
});
I changed the code but it still isn’t working for the comments that are loaded after the page is loaded.
So at the moment it works for the first 10 comments, but the others that are loaded using ajax the ‘thank you’ text isn’t being shown (although the code is being executed).