I've been messing around with some JS and ajax in my PHP project and I am facing some problems. The ajax only seems to work when the page is refreshed after clicking or just refresh to click. I'm using jquery 3.2.1.
I was first using .live() but that is deprecated now and I read that .on() is an alternative so I am using that now.
This is my JS part:
$(".up_vote").on("click", function() {
var post_id = $(this).attr('postid');
$.ajax({
type: "POST",
data: {
'post_id': post_id,
'action': 'upvote'
},
url: '<?php echo $url; ?>/includes/functions.php',
dataType: 'json',
success: function(response) {
if (response.ResponseCode == 200) {
$('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
} else {
alert(response.Message);
}
}
});
});
$(".down_vote").on("click", function() {
var post_id = $(this).attr('postid');
$.ajax({
type: "POST",
data: {
'post_id': post_id,
'action': 'downvote'
},
url: '<?php echo $url; ?>/includes/functions.php',
dataType: 'json',
success: function(response) {
if (response.ResponseCode == 200) {
$('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
} else {
alert(response.Message);
}
}
});
});
$("#btnpost").click(function() {
var post = $("#post_feed").val();
if (post == "") {
alert("This can't be empty.");
return false;
} else {
$.ajax({
type: "POST",
data: {
'post_feed': post,
'action': 'post'
},
url: '<?php echo $url; ?>/includes/functions.php',
dataType: 'json',
success: function(response) {
if (response.ResponseCode == 200) {
$("#post_feed").val("");
$('#feed_div').load('<?php echo $url; ?>/index.php #feed_div');
} else {
alert(response.Message);
}
}
});
}
});
});
Is there anything I am missing or done wrong?
Hi I think you missing return false or e.preventDefault();
return false; make browser cancel post form to server.
add return false or e.preventDefault() after ajax function;
example
$("#btnpost").click(function(e) { ///e here
var post = $("#post_feed").val();
if (post == "") {
alert("This can't be empty.");
return false;
} else {
$.ajax({
type: "POST",
data: {
'post_feed': post,
'action': 'post'
},
url: '<?php echo $url; ?>/includes/functions.php',
dataType: 'json',
success: function(response) {
if (response.ResponseCode == 200) {
$("#post_feed").val("");
$('#feed_div').load('<?php echo $url; ?>/index.php #feed_div');
} else {
alert(response.Message);
}
}
});
}
e.preventDefault(); //Here
/// or
return false; /// Here
});
First make sure you're hitting the target, try this and see if the alert shows :
$(function() {
$(document).on('click', '.up_vote', function() {
alert('ok');
});
});
Click event is attached to existing elements on page load. The key word here is “existing”. When we load something with ajax we manipulate DOM. We are placing totally new element. So what we need to do is to attach that event after placing new content.
so to attach event everytime ajax is called we use .on
edit your code accordingly
$(document).on('click', '.up_vote', function() {
var post_id = $(this).attr('postid');
$.ajax({
type: "POST",
data: {
'post_id': post_id,
'action': 'upvote'
},
url: '<?php echo $url; ?>/includes/functions.php',
dataType: 'json',
success: function(response) {
if (response.ResponseCode == 200) {
$('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
} else {
alert(response.Message);
}
}
});
});
$(document).on('click', '.down_vote', function() {
var post_id = $(this).attr('postid');
$.ajax({
type: "POST",
data: {
'post_id': post_id,
'action': 'downvote'
},
url: '<?php echo $url; ?>/includes/functions.php',
dataType: 'json',
success: function(response) {
if (response.ResponseCode == 200) {
$('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*');
} else {
alert(response.Message);
}
}
});
});
$(document).on('click', '#btnpost', function() {
var post = $("#post_feed").val();
if (post == "") {
alert("This can't be empty.");
return false;
} else {
$.ajax({
type: "POST",
data: {
'post_feed': post,
'action': 'post'
},
url: '<?php echo $url; ?>/includes/functions.php',
dataType: 'json',
success: function(response) {
if (response.ResponseCode == 200) {
$("#post_feed").val("");
$('#feed_div').load('<?php echo $url; ?>/index.php #feed_div');
} else {
alert(response.Message);
}
}
});
}
});
});
You can try with below given code.
$(document).on("click",".up_vote",function() {
alert("click");
});