Waggoner_Keith Waggoner_Keith - 4 months ago 7
Ajax Question

Update PHP page without refreshing

I have a

div
which displays articles that contain anchor tags that are the "like" and "dislike" buttons. I want to update the
div
when some clicks like or dislike without having to refresh the entire page. Here is the
div
:

#Print out article and display information
echo "<article style='border: 2px solid #10466C;' class='topContent'>
<header>
<a class='article_title' href='article.php?article=$id'><h3>$title</h3></a>
</header>

<p class='date-author'>Date: $date <br /> Author: <span style='color: #10466C;'>$author </span> | Catagory: <a href='#'>$catagory</a> | Writer Level: $level<br />
Comments: ($cmt_total) </p>

<content>
<img class='article-image' src='$image' />

<div style = 'float: left; margin-left: 3%; width: 45%;'>
<div class='like_box'>
<a href='vote.php?vote=like&title=$title'><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
<p style='color: #fff;'>$like_username</p>
</div>

<div class='dislike_box'>
<a href='vote.php?vote=dislike&title=$title'><img src='img/dislike.png' class='vote'></a><p class='vote_text'>$dislike_num</p>
<p style='color: #EC2800;'>$dislike_username</p>
</div>

</div>

<div style='display: inline-block; margin-top: 10px;'>
$text<a href='article.php?article=$title'><b>read more</b></a>
</div>

</content>
<br />
<br />

</article> ";


}

If you look at the
div
s called "like_box" and "dislike_box" you can see inside the anchor tag that is liked to the PHP script. The PHP script looks like this:

<?php
require('connect.php');

session_start();

$vote = $_GET['vote'];

if(!isset($_SESSION['login_user'])){
header("location: member_submit.php");
}else{
$username = $_SESSION['login_user'];

if(strcmp($vote, "like") == 0){
$vote_num = 1;
}else{
$vote_num = 0;
}

$title = $_GET['title'];

$query = "SELECT * FROM vote WHERE username='$username' AND article_title='$title'";
$result = mysqli_query($con,$query);
$rows = mysqli_num_rows($result);
if($rows == 0){

$stmt = mysqli_prepare($con, "INSERT INTO vote (username,article_title,vote) VALUES (?, ?, ?)");

if ($stmt === false) {
trigger_error('Statement failed! ' . htmlspecialchars(mysqli_error($mysqli)), E_USER_ERROR);
}

$bind = mysqli_stmt_bind_param($stmt, "sss", $username, $title, $vote_num);

if ($bind === false) {
trigger_error('Bind param failed!', E_USER_ERROR);
}

$exec = mysqli_stmt_execute($stmt);

if ($exec === false) {
trigger_error('Statement execute failed! ' . htmlspecialchars(mysqli_stmt_error($stmt)), E_USER_ERROR);
}else{
if(isset($_GET['backpage'])){
$backpage = $_GET['backpage'];
if(strcmp($backpage,"article") == 0){
header("location: article.php?article=$title");
}else{
header("location: index.php");
}
}else{
header("location: index.php");
}
}
}else{
if(isset($_GET['backpage'])){
$backpage = $_GET['backpage'];
if(strcmp($backpage,"article") == 0){
header("location: article.php?article=$title");
}else{
header("location: index.php");
}
}else{
header("location: index.php");
}
}

}


?>

My question is how do I run that script without having to refresh the page and redirect using the header tags. Any help is appreciated and any extra information you may need I am willing to provide. I have tried many ways I know it will require AJAX or JavaScript it doesn't matter to me which one.

Thanks.

Stu Stu
Answer

On a more serious note, responding to the;

if anyone could maybe write out some pseudo-code or something that would show how to do this?

question (happy to help further, but I think this may help point you in the right direction as asked):

you need to set up a trigger that picks up the click;

<div class='dislike_box'>
    <a data-dislike="<?php echo $id; ?>">
         ...
    </a>
</div>

and then pick up on that with js;

document.querySelectorAll('a[data-dislike]').onclick = function() {
    // make an ajax call to your like/dislike script
    // and on success change the DOM somehow
};

Then in your (probably PHP) script that gets called when you make the // make an ajax call to your like/dislike script "call" you need to take in the variables (send via the ajax call and picked up in your script e.g. what's in the data-like/data-dislike attr or similar)

Then when you get these vars passed from the ajax call and pick them up in your PHP scripts you can perform the database update and return something (maybe JSON) that tells the client side script "how" to update the DOM, based on what you received from the ajax call.

Let me know if that makes no sense at all.