Associer deux requêtes Ajax
Bonjour à toutes et tous,
Le but du projet est d'afficher en live le nombre de votes pour tel URL. Donc avec un setInterval toutes les 5 secondes, j'affiches toutes les URL et leurs votes.
De plus je veux que les gens puissent voter encore une fois, sans rafraichissement de la page.
J'arrive à faire les deux séparément mais une fois mis ensemble ça coince...
En fait une fois que j'ai implémenter les deux dans mon fichier js, lorsqu'on clique sur le bouton "voter", rien ne se passe, or avant l'ajout à la base de donnée était effectif...
De plus j'ai surement pas utiliser la méthode la plus propre :/
Voici ce que j'ai fais pour le moment, il y a un problème quelque part, mais n'étant pas très calé en Ajax, je ne parviens pas à trouver d'où il vient.
fonctions.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| // JavaScript Document
$(document).ready(function(){
function index(){
$.ajax({
cache: false,
url: 'images.php',
data: "",
type: "POST",
dataType: 'html',
success: function(data){
$('#container').html(data);
}
});
}
index();
$images = setInterval(index,5000);
$(".newvote").click(function(event) {
event.preventDefault();
var vote = $(this); // get current vote
var parent = vote.parent().parent(); // get the parent
var picture = parent.data('picture'); // get the picture ID
var total = parent.data('total'); // get total of votes
$.ajax({
type: "POST",
url: "newvote.php",
data: "picture=" + picture,
dataType: 'html',
cache: true,
success: function(data){
vote.html("Voté");
}
});
return false;
});
}); |
images.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <?php
$host='xxxxxx';
$dbname='xxxxxx';
$user='xxxxxx';
$password='xxxxxx';
$connection = new PDO('mysql:host='.$host.';dbname='.$dbname, $user, $password);
$pictures = $connection->query("SELECT * FROM pictures");
$pictures->setFetchMode(PDO::FETCH_OBJ);
while($picture = $pictures->fetch()) :
$votes = $connection->query("SELECT COUNT(*) FROM votes WHERE picture=" . $picture->id)->fetchColumn();
$array[$picture->id] = array('id' => $picture->id, 'url' => $picture->url, 'votes' => $votes);
endwhile;
$pictures->closeCursor();
foreach ($array as $value) :
$classement[] = $value['votes'];
array_multisort($classement, SORT_DESC, $array);
endforeach;
foreach($array as $item) :
echo '<div class="picture" data-picture="' . $item["id"] . '" data-total="' . $item["votes"] . '">';
echo '<div class="vote"><button type="button" class="newvote">Je vote</button></div>';
echo '<div class="error"></div>';
echo '<div class="vote-score"></div>';
echo '</div>';
endforeach;
?> |
vote.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?php
$host='xxxxxx';
$dbname='xxxxxx';
$user='xxxxxx';
$password='xxxxxx';
$connection = new PDO('mysql:host='.$host.';dbname='.$dbname, $user, $password);
include('functions.php');
if(isset($_POST) && !empty($_POST['picture'])) :
$picture = intval($_POST['picture']);
$userIP = get_real_ip();
$new = $connection->prepare("INSERT INTO votes (ip, picture) VALUES (:ip, :picture)");
$new->execute(array("picture" => $picture, "ip" => $userIP));
/* $votes = "SELECT count(*) FROM votes WHERE picture=" . $picture . " AND ip=" . $userIP;
$votes = $connection->prepare($votes);
$votes->execute();
$votes = $votes->fetchColumn();
*/
endif;
?> |
index.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vote</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="functions.js"></script>
</head>
<body>
<section id="container"></section>
</body>
</html> |
