hello guys, i used the vote system tutorial for my website. I want to get the user vote but witouth refreshing the page. I understand that i will need javascript for this, I have tried to do it myself but it just doesn't work.
Here is the code of the vote function:
[syntax=php]
if (isset($_GET['vote'], $_GET['id'])){
add_link_vote($_GET['id'], $_GET['vote']);
header('Location: http://localhost/blogthis/index.php/');
die();
}
[/syntax]
and here is the code of the link to submit the form:
[syntax=xhtml]
<form id="vote-up" method="post" action="?vote=up&id=<?php echo $link['id']; ?>" style="display: inline; cursor: pointer;">
<input type="submit" id="submit-up" value="like" />
</form>
I used the form method so that users can't see the url.
If you could help me with this, i will apreciate it a lot!
[/syntax]
post without reloading
Re: post without reloading
First things first.
If you found this while searching, and you maybe want a vote/rating system on your website using PHP, you can have a look at the simple tutorial here: http://betterphp.co.uk/playlist.html?pi ... F478B77F39
-------
I'm gonna write this assuming you have no knowledge of Javascript (even if you do). This is just so it can be useful to anybody else who may want to know how to do this.
You're gonna need to use what is known as AJAX (stands for: Asynchronous JavaScript And XML), which is easily done with jQuery.
The good thing with this is, that it will largely work fine with the backend code you already have.
Step One
You need to (of course) load jQuery into your HTML page. You can do this by either downloading it from here (look for "jQuery 1.x", and then "compressed" - jQuery v1.x supports IE 8. If you have no intention of supporting IE8, go ahead and use 2.x. Probably better practice to support it though - corporates use IE 8), or by using CDNJS - a free JavaScript CDN by CloudFlare.
Just in case you're unaware as to how to insert it, put this code just above the </body> end (so that large scripts don't affect the render speed of a page) tag in each HTML page you want to use jQuery in:
[syntax=xhtml]<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>[/syntax]
Step Two
You can insert the Javascript now! Yay! Open some script tags just below where you've included jQuery, and insert something like this:
[syntax=javascript]<script>
$("#likeButton").click(function() {
$.ajax({
url: "?vote=up&id=<?php echo $link['id']; ?>"
}).done(function() {
$(this).addClass("done");
$(this).attr("id", "likeButtonClicked"); // Changes the ID to likeButtonClicked - so it can't be spam clicked
});
});
</script>[/syntax]
This code will open a connection to "url:", which will run any PHP. This particular example will not return any information from the script, but it may redirect, or throw an error because it can't redirect. You need to remove line 4 of your vote function, which will stop redirecting and just leave a blank page (I hope). That's what we want.
Step Three
You need to change a few things to make it work for you. For starters, you'll need to change-up your 'like' button real quick: remove the "form", and change your button to be formatted like this:
[syntax=xhtml]<button id="likeButton">Like</button>[/syntax]
Add an ID of "likeButton" (capitalisation matters) to that button, so that it's identified by jQuery as what we need to click to execute the Javascript code we just wrote.
You can change it to whatever you want, but you'll need to replace #likeButton to what you changed it to. The "#" stands for id, a "." (full stop) stands for class, and "button" will look at all buttons on the page (you can use the name of any HTML element). You can use either, but it's common practice to use an ID for this.
There are a lot of cool little functional things that you can do with jQuery AJAX - particularly if you have knowledge of jQuery. Have a look at the function page here.
You'll notice line seven of the Javascript we wrote, that will add the class "done" to the button. You'll need to create a "done" class, maybe change the background of the button or something so that the user knows that they have clicked it. Like before, you can of course rename "done" to the name of any class you want, or change "addClass" to any other jQuery action, maybe "this.hide()" would be preferable - it would hide the button (until the user refreshed the page).
Step Four
The last thing we need to go through is some really basic, in-context PHP to stop the button from being click-able after it's been clicked once before.
Once it's been clicked, we already change the button's ID, so jQuery will ignore it if it's clicked again (because it doesn't have the same ID that it's looking for).
If somebody refreshes the page, you need to check if they've voted before, and alter the page so that it can't be clicked again. You can do this really easily, just like you do in the backend PHP code. If the IP has voted on that page, just change the ID and add the class to show that they've voted.
Conclusion
This is all theory, I haven't actually tried or tested this code. Give it a go, and let me know if it works. If you have any questions, just reply and I'll help you out
Important links
If you found this while searching, and you maybe want a vote/rating system on your website using PHP, you can have a look at the simple tutorial here: http://betterphp.co.uk/playlist.html?pi ... F478B77F39
-------
I'm gonna write this assuming you have no knowledge of Javascript (even if you do). This is just so it can be useful to anybody else who may want to know how to do this.
You're gonna need to use what is known as AJAX (stands for: Asynchronous JavaScript And XML), which is easily done with jQuery.
The good thing with this is, that it will largely work fine with the backend code you already have.
Step One
You need to (of course) load jQuery into your HTML page. You can do this by either downloading it from here (look for "jQuery 1.x", and then "compressed" - jQuery v1.x supports IE 8. If you have no intention of supporting IE8, go ahead and use 2.x. Probably better practice to support it though - corporates use IE 8), or by using CDNJS - a free JavaScript CDN by CloudFlare.
Just in case you're unaware as to how to insert it, put this code just above the </body> end (so that large scripts don't affect the render speed of a page) tag in each HTML page you want to use jQuery in:
[syntax=xhtml]<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>[/syntax]
Step Two
You can insert the Javascript now! Yay! Open some script tags just below where you've included jQuery, and insert something like this:
[syntax=javascript]<script>
$("#likeButton").click(function() {
$.ajax({
url: "?vote=up&id=<?php echo $link['id']; ?>"
}).done(function() {
$(this).addClass("done");
$(this).attr("id", "likeButtonClicked"); // Changes the ID to likeButtonClicked - so it can't be spam clicked
});
});
</script>[/syntax]
This code will open a connection to "url:", which will run any PHP. This particular example will not return any information from the script, but it may redirect, or throw an error because it can't redirect. You need to remove line 4 of your vote function, which will stop redirecting and just leave a blank page (I hope). That's what we want.
Step Three
You need to change a few things to make it work for you. For starters, you'll need to change-up your 'like' button real quick: remove the "form", and change your button to be formatted like this:
[syntax=xhtml]<button id="likeButton">Like</button>[/syntax]
Add an ID of "likeButton" (capitalisation matters) to that button, so that it's identified by jQuery as what we need to click to execute the Javascript code we just wrote.
You can change it to whatever you want, but you'll need to replace #likeButton to what you changed it to. The "#" stands for id, a "." (full stop) stands for class, and "button" will look at all buttons on the page (you can use the name of any HTML element). You can use either, but it's common practice to use an ID for this.
There are a lot of cool little functional things that you can do with jQuery AJAX - particularly if you have knowledge of jQuery. Have a look at the function page here.
You'll notice line seven of the Javascript we wrote, that will add the class "done" to the button. You'll need to create a "done" class, maybe change the background of the button or something so that the user knows that they have clicked it. Like before, you can of course rename "done" to the name of any class you want, or change "addClass" to any other jQuery action, maybe "this.hide()" would be preferable - it would hide the button (until the user refreshed the page).
Step Four
The last thing we need to go through is some really basic, in-context PHP to stop the button from being click-able after it's been clicked once before.
Once it's been clicked, we already change the button's ID, so jQuery will ignore it if it's clicked again (because it doesn't have the same ID that it's looking for).
If somebody refreshes the page, you need to check if they've voted before, and alter the page so that it can't be clicked again. You can do this really easily, just like you do in the backend PHP code. If the IP has voted on that page, just change the ID and add the class to show that they've voted.
Conclusion
This is all theory, I haven't actually tried or tested this code. Give it a go, and let me know if it works. If you have any questions, just reply and I'll help you out
Important links
- Download jQuery: http://jquery.com/download/
- jQuery CDN: https://cdnjs.com/libraries/jquery
- jQuery AJAX info: http://api.jquery.com/jQuery.ajax/
- Jacek's PHP voting/rating system tutorial: http://betterphp.co.uk/playlist.html?pi ... F478B77F39