[AJAX] Recharger une partie de page

**cris84** · 27/11/2014, 11h47

Bonjour,
voilà j'ai un script php pour voter un article. Je souhaiterai que quand l'utilisateur effectue un vote, la page ne se recharge pas entièrement.
Je voudrais donc recharger uniquement cette partie de page, la partie qui contient le vote.
J'utilise sur mon code une include.

Merci d'avance de votre aide...

Le code de ma page qui contient l'include :

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
26
<?php
 include('vote/fonction-vote.php');
                        notation($_GET['id'],$ip_vote); 
include("conf.inc.php");
$sql = ("SELECT * FROM video WHERE id = ".$_GET['id']);
$result = mysql_query($sql) or die(mysql_error());
$row=mysql_fetch_assoc($result);
 
?>
 
<link rel="stylesheet" type="text/css" href="css/page.css" />
<script src="http://jwpsrv.com/library/ChWG9mQFEeSi9woORWfmyA.js"></script>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="BK74xHYHnbkEoe3ar2XiBnxIw7gxSe4eNTSGgg==";</script>
<center> Vous regardez : <?php echo $row['title']; ?></center><br />
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
    jwplayer("myElement").setup({
        file: "<?php echo $row['url']; ?>",
        image: "http://example.com/uploads/myPoster.jpg",
        width: 640,
        height: 360,
                 autostart: true,
      mute: true
    });
</script> ?>

Et le code de l'include :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<?php
function getIp()
        {
                if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
                {
                        $ip_vote = $_SERVER['HTTP_X_FORWARDED_FOR'];
                }
                elseif(isset($_SERVER['HTTP_CLIENT_IP']))
                {
                        $ip_vote = $_SERVER['HTTP_CLIENT_IP'];
                }
                else
                {
                        $ip_vote = $_SERVER['REMOTE_ADDR'];
                }
                return $ip_vote;
        }
 
        $ip_vote = getIp();
 
 
        mysql_connect("$nom_du_serveur","$nom_utilisateur","$passe");
 
        mysql_select_db("$nom_de_la_base")  or die ('Erreur :'.mysql_error());
 
 
        function notation($id_vote,$ip_vote){
 
 
                $deja_voter = mysql_query("SELECT ip FROM note WHERE ip = '".mysql_real_escape_string($ip_vote)."' AND id_page = '".mysql_real_escape_string($id_vote)."'");
 
 
                if(mysql_num_rows($deja_voter) == 0)
                {
                        echo '<div class="hero-unit-stat"><form name="monform" id="monform" method="post">
                        <label>Noter cet article</label>
                        <select name="note" onchange="javascript:submit(this)">
                        <option value="">Note</option>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        </select>
                        </form>';
                }   
 
 
                if(isset($_POST['note']) && $_POST['note'] != NULL){
 
                        if(isset($_COOKIE["deja_voter"]) && $_COOKIE["deja_voter"] == $id_vote){
                                die ("Un seul vote autoris&eacute; ... merci!");
                        }
 
                        $note = $_POST['note'];
 
                        $insert = mysql_query("INSERT INTO note VALUES ( '', '".mysql_real_escape_string($id_vote)."', '".mysql_real_escape_string($note)."', '".mysql_real_escape_string($ip_vote)."' ) ");
 
                        if(!$insert) {
                                die('Requ&ecirc;te invalide : ' . mysql_error());
                        }
 
                        else{
 
                                setcookie('deja_voter',$id_vote,(time() + 20));
 
                                echo 'Merci d\'avoir not&eacute; <br/>
                                Chargement en cours <img alt="Loading" src="vote/images-vote/loading.gif" style="width:18px;height:18px;"/>
                                <script type="text/javascript">
                                document.getElementById("monform").innerHTML = "";
                                window.setTimeout(function(){self.location.href="'.$_SERVER['REQUEST_URI'].'";},3000);
                                </script>';
                        }
                }
 
 
                $nombre_vote = mysql_query("SELECT id FROM note WHERE id_page = '".mysql_real_escape_string($id_vote)."'");
                $total_vote = mysql_num_rows($nombre_vote);
                if($total_vote != 0){
                        echo '<div class="hero-unit-stat">Nombre de vote : '.$total_vote.'<br/>';
                }
 
 
                $calcul_vote = mysql_query("SELECT SUM(note) AS totalmoyenne FROM note WHERE id_page = '".mysql_real_escape_string($id_vote)."'");
                $data = mysql_fetch_array($calcul_vote);
                $total_calcul_vote = $data['totalmoyenne'];
                if($total_calcul_vote != 0){
                        echo 'Total des votes : '.$total_calcul_vote.'<br/>';   
                }
 
 
                if($total_vote != NULL && $total_calcul_vote != NULL){
                        $moyenne = number_format($total_calcul_vote/$total_vote, 2, ',', '');
 
                        echo 'Note : '.str_replace(',00','',$moyenne).'/10 ';
 
                        for($i=1; $i<=$moyenne;$i++){
                                echo '<img alt="'.$i.'" src="vote/images-vote/etoile.png" align="absmiddle" style="width:12px;height:12px;"/>';
                        }
                }
                else{
                        echo 'Aucun vote pour le moment.</div>';
                }
        }
?>

**sipatsymasaka** · 04/12/2014, 06h33

Bonjour,

Ta solution est évidemment ajax.

Alors déjà tu peux enlever ça:

Code php :

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

1
2
3
<?php
include('vote/fonction-vote.php');
notation($_GET['id'],$ip_vote);?>

puis améliore ta requête SQL afin d'obtenir l'id_vote et l'ip_vote en cours

après dans ton head, tu rajoute:

Code html :

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

dans ta page html tu crée les composants nécessaires:

Code html :

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

1
2
3
4
5
6
<div>;
<input type="hidden" id="vote" value="<?php //tu affiche ici l'id_vote tirée de ta requête ?>">
<input type="hidden" id="ip" value="<?php //tu affiche ici l'ip_vote tirée de ta requête ?>">
<a href="#" id="voter">Chercher</a>
</div>
<div id="zone_a_recharger">c'est ici que va s'afficher le nombre de vote</div>

et enfin dans le head, tu rajoute l'appel ajax vers ta fonction-vote si c'est bien là que tu rajoute le vote:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(document).ready(function() {
//au click sur le lien voter
$("#voter").click(function(){
               vote = $(this).attr("vote");
               ip = $(this).attr("ip");
		$.post(getRootPath()+"vote/fonction-vote/notation",{id_vote:vote,ip_vote:ip }, function(data){
			$("#zone_a_recharger").html(data);
		});
});
});
</script>

j'ai pas testé mais j'espère t'avoir aidé quand-même. tiens-moi au courant de la suite.

**Bovino** · 04/12/2014, 08h20

Code :

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

1
2
vote = $(this).attr("vote");
ip = $(this).attr("ip");

C'est quoi ces attributs que tu recherche ?

**sipatsymasaka** · 05/12/2014, 10h53

c'est plutôt,

Code :

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

1
2
var vote = document.getElementById("vote").value;
var ip = document.getElementById("ip").value;

[AJAX] Recharger une partie de page

AJAX

Vue hybride

Discussions similaires

Partager

Partager