Update PHP page without refreshing

Question

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 divs called "like_box" and "dislike_box" you can see inside the anchor tag that is liked to the PHP script.

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.

#javascript #ajax, you've answered the question yourself. What have you tried so far? — Stu, Jul 19 '16 at 19:14
[Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! [Don't believe it?](http://stackoverflow.com/q/38297105/1011527) — Jay Blanchard, Jul 19 '16 at 19:17
@JayBlanchard always +1 for little Bobby tables :) -1 for not the original link :( http://xkcd.com/327/ — Stu, Jul 19 '16 at 19:18
yea this is my only script without a prepare statemtent. Working on that now actually.... — Waggoner_Keith, Jul 19 '16 at 19:18
They give attribution and an explanation @Stu ¯\\_(ツ)_/¯ — Jay Blanchard, Jul 19 '16 at 19:19
Yea the statement is actually prepared and binded now... Appreciate it just didn't update the question because its not really relevant to this issue — Waggoner_Keith, Jul 19 '16 at 19:21
@JayBlanchard ok, have my comment +1 fake internet point lol if not just for the emoticon *high five* + (╯°□°）╯︵ ┻━┻) — Stu, Jul 19 '16 at 19:23
I'm not asking anyone to write code for me I understand that isn't what this site is all about but if anyone could maybe write out some pseudo-code or something that would show how to do this? I would be really appreciative! — Waggoner_Keith, Jul 19 '16 at 19:25
@Waggoner_Keith totally - maybe edit your question and you'll get less minus votes, that's the attitude :) ... and then we'll stop making bobby tables and table flips jokes... I'm pretty sure — Stu, Jul 19 '16 at 19:26

Stu · Accepted Answer · 2016-07-19T19:44:26.373

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.

Update PHP page without refreshing

1 Answers1