Query SQL without page refresh using Ajax
Goal: SQL query without page refresh using Ajax.
I have Like / Dislike buttons that function perfectly as a form and submit input, however the form refreshes the page.
I don't know how to make an Ajax call that connects my "liker.php" (below) to work on my main page with a button or class div / id button.
$.ajax({
type: "POST",
url: "liker.php",
data: ???
success: ???
...............
I've read several tutorials and looked for answers, but I'm still stumped.
liker.php
//LIKE FIELD
if (isset($_POST['like'.$id])) {
if (!in_array("$id", $like_explode)) {
if (!in_array("$id", $dislike_explode)) {
mysqli_query($db, "UPDATE likes SET pid_like=CONCAT(pid_like,',$id') WHERE user_id='$user_id'");
mysqli_query($db, "UPDATE comments SET likes=(likes+1) WHERE id='$id'");
}
else
{
$new_dislike_string = str_replace(",$id", '', $dislike_string);
mysqli_query($db, "UPDATE likes SET pid_dislike='$new_dislike_string' WHERE user_id='$user_id'");
mysqli_query($db, "UPDATE likes SET pid_like=CONCAT(pid_like,',$id') WHERE user_id='$user_id'");
mysqli_query($db, "UPDATE comments SET likes=(likes+1) WHERE id='$id'");
mysqli_query($db, "UPDATE comments SET dislikes=(dislikes-1) WHERE id='$id'");
}
}
}
//DISLIKE FIELD
if (isset($_POST['dislike'.$id])) {
if (!in_array("$id", $dislike_explode)) {
if (!in_array("$id", $like_explode)) {
mysqli_query($db, "UPDATE likes SET pid_dislike=CONCAT(pid_dislike,',$id') WHERE user_id='$user_id'");
mysqli_query($db, "UPDATE comments SET likes=(dislikes+1) WHERE id='$id'");
}
else
{
$new_like_string = str_replace(",$id", '', $like_string);
mysqli_query($db, "UPDATE likes SET pid_like='$new_like_string' WHERE user_id='$user_id'");
mysqli_query($db, "UPDATE likes SET pid_dislike=CONCAT(pid_dislike,',$id') WHERE user_id='$user_id'");
mysqli_query($db, "UPDATE comments SET dislikes=(dislikes+1) WHERE id='$id'");
mysqli_query($db, "UPDATE comments SET likes=(likes-1) WHERE id='$id'");
}
}
}
//LIKE-DISLIKE FIELD END
source to share
I will explain to you how to use ajax with jquery. I don't understand how this works with $ _POST variables, but I hope it helps you.
First use the class to know when an element like / dislike is clicked. Second, use the name to see if it is Like or Dislike.
Example for:
<a href="ID" class="classForLikeOrDislike" name="like">Like</span>
Dislike:
<a href="ID" class="classForLikeOrDislike" name="dislike">Dislike</span>
El ajax
$(".classForLikeOrDislike").click(function(){
// Get the varible ID, to send to your php
var id = $(this).attr('href');
// Get the varible name, to send like or dislike
var l = $(this).attr('name');
$.post({url: "liker.php", {id: id}, success: function(result){
// do some code here
// here yo can see 'result' response of liker.php
// console.log(result);
}});
});
* Update range change tag with anchor tag with href.
UPDATE to answer the "CLICK ONLY" question above
The event variable is what should be passed to your anonymous function.
<script>
function chk(event)
{
// Prevent trigger submit and reload page
event.preventDefault();
var name=document.getElementById('clicker');
$.ajax({
type:"post",
url: "clicky.php",
data: {clicker:1} , <--- here goes the data that you want to send to your php file, in this case SEND $_POST['clicker'] with value 1
cache: false,
success: <-- When is success your request, whats you want to make (other code) maybe print 'OK'
});
}
</script>
<?php
if(isset($_POST['clicker']))
{
mysqli_query($db,"UPDATE items SET this='that' WHERE number='1'")
}
?>
source to share
Try something like this:
$("#likeButtonID").click( function()
{
$.ajax({
type: "POST",
url: "liker.php",
data: { like: $(this).val(); },
success: function(result) {
alert('Ajax Success Ran');
}
});
});
Or, if you have a lot of similar buttons on the page, you can do a jquery loop over each one.
source to share
WebMethod
allow to act like ajax call like webservice, no response is processed, class in json / xml format is saved (or nothing, just perform actions on server)
in AspNet is pretty simple, try this if help PHP equivalent to Authorized ASP.NET WebMethod (AJAX)?
considers
source to share