Associer deux requêtes Ajax

**vbaguet** · 16/03/2014, 19h46

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>