Bonjour!

Je souhaiterais implémenter un bouton j'aime à la manière de facebook, en jQuery. Pour l'instant sur mon site, je le fais de façon classique, c'est à dire que le bouton j'aime est en fait la validation d'un form, qui recharge la page, et update la base de donnée. Mais pour être un peu plus web 2.0 (et surtout éviter le rechargement de la page!), j'aimerais pouvoir le faire en Ajax.

Voici mon code Javascript:

for(var i = 0; i<blaguesID.length;i++){
  document.getElementById("pourOuContre" + blaguesID[i]).innerHTML = '<p><a href="#" title="' + blaguesID[i] + '" class="like">J\'aime!</a> • <a href="#" title="' + blaguesID[i] + '" class="hate">Trop nul!</a></p>';
}
  
var Jaime ={
  evenements:function(){
    $('a.like').click(Jaime.click);
  },
  precharger:function(){
    
  },
  click:function(event){
    var element = event.currentTarget;
    
    $(element).unbind('click');
    $(element).click(function(){return false;});
    
    $.ajax({
      context: element, // $(this)
      type: 'POST',
      url: 'like.php',
      data: 'vote=&cle=' + encodeURIComponent($(element).attr('title')),
      success: function(data) {
        alert('bouh');
      }
    });
  }
};

$(document).ready(function(){
  Jaime.evenements();
  //JAime.precharger();
})

Le premier "paragraphe" sert à remplacer la vieille méthode qui n'utilise pas du tout de Javascript.
Ensuite je définis mon objet Jaime, et au click ma méthode click est bien appelée. En mettant des alert, je vois que tout fonctionne bien jusqu'au $.ajax. Mais là, impossible de faire s'afficher l' "alert("bouh"); !!! Et je ne comprends pas pourquoi!
L'erreur ne peut pas venir de mon fichier php (qui pour l'instant n'est que echo 2; ).

Donc qu'est ce que j'ai loupé? Je dois avouer que là je ne vois vraiment pas!

Et pour voir le code en action: http://www.vosblagues.alwaysdata.net/

Voilà, merci d'avance pour votre aide!

Déjà, il te faudrait pas un event.preventDefault() ligne 14 par exemple ?



EDIT : Ah, et ta page like.php n'existe pas.

Ah je ne connaissais pas! Désolé, je dois avouer que je m'y connais assez peu en JS en fait!

Du coup mon nouveau code modifié est:

for(var i = 0; i<blaguesID.length;i++){
  document.getElementById("pourOuContre" + blaguesID[i]).innerHTML = '<p class="like"><a href="#" title="' + blaguesID[i] + '" class="Jaime">J\'aime!</a> • <a href="#" title="' + blaguesID[i] + '" class="JaimePas">Trop nul!</a></p>';
}
  
var Jaime ={
  evenements:function(){
    $('a.Jaime').click(Jaime.click);
  },
  precharger:function(){
    
  },
  click:function(event){
    var element = event.currentTarget;
    event.preventDefault();
    
    $(element).unbind('click');
    $(element).click(function(){return false;});
    
    $.ajax({
      context: element, // $(this)
      type: 'POST',
      url: 'like.php',
      data: 'vote=&cle=' + encodeURIComponent($(element).attr('title')),
      success: function(data) {
        alert('bouh');
      }
    });
  }
};

$(document).ready(function(){
  Jaime.evenements();
  //JAime.precharger();
})

€dit:
Ah!!! du coup grosse question à propos de javascript:

• Mon fichier JS est dans le répertoire js... mais il est appelé par mon fichier php qui lui est dans la racine du dossier! Donc l'appel doit se faire par rapport au fichier PHP, et non du fichier Javascript, right? (Ca va, c'est ma première requête Ajax quoi )
• J'ai protégé tous mes fichiers php inclus dans un répertoire includes avec un .httaccess qui empêche tout accès de l'extérieur. Du coup ca fonctionne quand ces fichiers sont appelés par d'autres fichiers php de mon serveur, mais pas quand ils sont appelés par des fichiers Javascript du coup?

Bah là c'est bon, ta requête fonctionne, non ?

Si oui, pense à mettre ton sujet en résolu à l'aide du bouton approprié

En effet! Mais j'avais deux dernières questions en fait avant de mettre le sujet en résolu:

* Mon fichier JS est dans le répertoire js... mais il est appelé par mon fichier php qui lui est dans la racine du dossier! Donc l'appel doit se faire par rapport au fichier PHP, et non du fichier Javascript, right? (Ca va, c'est ma première requête Ajax quoi )
* J'ai protégé tous mes fichiers php inclus dans un répertoire includes avec un .httaccess qui empêche tout accès de l'extérieur. Du coup ca fonctionne quand ces fichiers sont appelés par d'autres fichiers php de mon serveur, mais pas quand ils sont appelés par des fichiers Javascript du coup?

Pour la première question je dirais oui.

Pour la deuxième j'en sais rien. Ca n'a plus rien à voir avec le JS.

Pourrait tu nous donner le code finale de toute les page s'il te plaît Ca m’intéresse.

Citation : funtim78

En effet! Mais j'avais deux dernières questions en fait avant de mettre le sujet en résolu:
* J'ai protégé tous mes fichiers php inclus dans un répertoire includes avec un .httaccess qui empêche tout accès de l'extérieur. Du coup ca fonctionne quand ces fichiers sont appelés par d'autres fichiers php de mon serveur, mais pas quand ils sont appelés par des fichiers Javascript du coup?

Javascript est côté client. Si javascript appelle ton serveur, il va se frotter à ta restriction apache de toute évidence. Et ouai, pas de traitement de faveur ! Donc à ta question je répondrai : Javascript n'arrive pas plus que toi à atteindre tes php s'il sont protégés.

Techniquement vous pouvez accéder au code à partir de mon site, vu que tout ce qui est compliqué est dans le javascript! Et surtout je vous conseille d'aller voir le très bon tuto-vidéo sur tuto.com, c'est vraiment bien expliqué!

Mon code php sur la page, qui fait que le bouton j'aime fonctionne même si le javascript coté client n'est pas activé (c'est quand même toujours important de vérifier qu'un site web fonctionne quelque soit la configuration du client!!!!):

<div id="pourOuContre<?php echo $row['id']; ?>">
<form method="post" action=".<?php echo $_SERVER['REQUEST_URI'];?>#b<?php echo $row['id']; ?>">
<p class="like">
<input type="hidden" name="aime" value="1" />
<input type="hidden" name="blague" value="<?php echo $row['id']; ?>" />
<input type="submit" value="Trop drôle! (<?php echo $row['genial']; ?>)" />
</p>

<p class="likePoint">&nbsp;•&nbsp;</p></form>
					
<form method="post" action=".<?php echo $_SERVER['REQUEST_URI  '];?>#b<?php echo $row['id']; ?>"><p class="like">
<input type="hidden" name="nul" value="1" />
<input type="hidden" name="blague" value="<?php echo $row['id']; ?>" />
<input type="submit" value="Trop nul! (<?php echo $row['nul']; ?>)" /></p></form></div>

La page PHP appelée en AJAX est quand à elle très très simple (sachant qu'il y a aussi une page jaimepas.php qui ressemble comme deux goutes d'eau à celle là!):

<?php
require("../includes/connectionParameters.php");

// Traitement des POST
if(!isset($_POST['cle'])) {
  header('Location: ./');
  die('-1');
}
$cle = trim(htmlspecialchars(addslashes($_POST['cle']))); 
$vote = isset($_POST['vote']);

try
{
  $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
  $bdd = new PDO('mysql:host=' . $connexionSQL[0] . ';dbname=' . $connexionSQL[3], $connexionSQL[1],$connexionSQL[2],$pdo_options);
  
  $bdd->query("SET NAMES 'utf8'");
} catch (Exception $e) {
  die('Erreur : ' . $e->getMessage());
} 

// Traitement en DB
$jaime_votes = 0;
if($result = $bdd->query("SELECT id,genial FROM tblblagues WHERE id = '{$cle}' LIMIT 1 ")) {
    // Mise a jour
    $obj = $result->fetch();
    $jaime_votes = (int)$obj['genial'];
    if($vote) {
     $jaime_votes++;
      $bdd->query("UPDATE tblblagues SET genial = genial + 1 WHERE id = '{$cle}' ");
    }
}

// Affichage du nombre en retour
echo $jaime_votes;

?>

Sinon mon code javascript, avec les 3 premières lignes qui servent à remplacer le contenu de la page normale avec des form en php, après on a la définition des objets jaime et jaimepas et à la fin on a les appels de ces objets :

for(var i = 0; i<blaguesID.length;i++){
  document.getElementById("pourOuContre" + blaguesID[i]).innerHTML = '<p class="like"><a href="#" title="' + blaguesID[i] + '" class="Jaime">Trop drôle!</a> • <a href="#" title="' + blaguesID[i] + '" class="JaimePas">Trop nul!</a></p>';
}
    
var Jaime ={
  evenements:function(){
    $('a.Jaime').click(Jaime.click);
  },
  precharger:function(){
    var jaimes = $("a.Jaime");
    
    for(var i = 0; i<jaimes.length;i++){
      $.ajax({
        context: jaimes[i],
        type: 'POST',
        url: "./js/like.php",
        data: 'cle=' + encodeURIComponent($(jaimes[i]).attr('title')),
        success: function(data) {
          var votes = parseInt(data);
          if(isNaN(votes)) {votes="-1";}
          if (votes>0){
            $(this).html('Trop drôle! (' + votes + ')');
          } else{
            $(this).html('Trop drôle!');
          }
        },
        'error':function(){
          alert("Une erreur s'est produite: merci de recharger la page!");
        }
      });
     }
  },
  click:function(event){
    var element = event.currentTarget;
    event.preventDefault();
    
    $(element).unbind('click');
    $(element).click(function(){return false;});
    
    $.ajax({
      context: element,
      type: 'POST',
      url: "./js/like.php",
      data: 'vote=&cle=' + encodeURIComponent($(element).attr('title')),
      success: function(data) {
        $(this).css({'opacity':0});
        
        $(this).addClass('jaimeAVote');
        
        var votes = parseInt(data);
        if(isNaN(votes)) {votes="-1";}
        if (votes>1){
          $(this).html(votes + ' personnes ont rigolé!');
        } else{
          $(this).html(votes + ' personne a rigolé!');
        }
        
        $(this).animate({'opacity': 1}, {'duration':'slow'});
      },
      'error':function(){
        alert("Une erreur s'est produite: merci de recharger la page!");
      }
    });
  }
};

var JaimePas ={
  evenements:function(){
    $('a.JaimePas').click(JaimePas.click);
  },
  precharger:function(){
    var jaimesPas = $("a.JaimePas");
    
    for(var i = 0; i<jaimesPas.length;i++){
      $.ajax({
        context: jaimesPas[i],
        type: 'POST',
        url: "./js/dislike.php",
        data: 'cle=' + encodeURIComponent($(jaimesPas[i]).attr('title')),
        success: function(data) {
          var votes = parseInt(data);
          if(isNaN(votes)) {votes="-1";}
          if (votes>0){
            $(this).html('Trop nul! (' + votes + ')');
          } else{
            $(this).html('Trop nul!');
          }
        },
        'error':function(){
          alert("Une erreur s'est produite: merci de recharger la page!");
        }
      });
     }
  },
  click:function(event){
    var element = event.currentTarget;
    event.preventDefault();
    
    $(element).unbind('click');
    $(element).click(function(){return false;});
    
    $.ajax({
      context: element,
      type: 'POST',
      url: "./js/dislike.php",
      data: 'vote=&cle=' + encodeURIComponent($(element).attr('title')),
      success: function(data) {
        $(this).css({'opacity':0});
        
        $(this).addClass('jaimeAVote');
        
        var votes = parseInt(data);
        if(isNaN(votes)) {votes="-1";}
        if (votes>1){
          $(this).html(votes + ' personnes ont trouvé ça nul!');
        } else{
          $(this).html(votes + ' personne a trouvé ça nul!');
        }
        
        $(this).animate({'opacity': 1}, {'duration':'slow'});
      },
      'error':function(){
        alert("Une erreur s'est produite: merci de recharger la page!");
      }
    });
  }
};

$(document).ready(function(){
  Jaime.evenements();
  Jaime.precharger();
  JaimePas.evenements();
  JaimePas.precharger();
})

Mais tout est expliqué dans le tuto que j'ai cité avant! Mais n'hésitez à me poser des questions si vous en avez!

Merci beaucoup ! Je vais regarder ça de plus près

Ce que j'aime bien c'est que ca donne un coté web2.0

je me permet de remonté le topic car je n'ai pas compris comment faire :s

Qui y'a t-il à modifié ?

Ba purée. 200 lignes juste pour une fonction J'aime/J'aime pas.

Faudrait ouvrir un bouquin d'algo les gars

J'ai pas demander de commentaire sur son code mais de l'aide ..

Citation : Nabil78

J'ai pas demander de commentaire sur son code mais de l'aide ..

Justement là je t'aide en te signalant que c'est du vrai code de bûcheron.

Sa m'aide pas beaucoup sa

j'ai se message qui apparait

Fatal error: require() [function.require]: Failed opening required '../includes/connectionParameters.php' (include_path='.:/usr/share/php/ezc:/usr/share/php') in /dns/com/olympe-network/monsite/index.php on line 2

Ca s'appelle une erreur PHP.

Go dans le bon forum.
http://www.siteduzero.com/forum-81-123-php.html

Enfait le gars, il a copié collé le include sans créé le fichier inclus ?

PS: funtim, juste pour te dire, on ne peut pas enlever son vote (j'aime ou non), par contre, on peut dire qu'on aime ET qu'on n'aime pas

J'avoue qu'il y a pas mal de choses à améliorer, mais vu que je ne m'y connais pas vraiment en Javascript/AJAX, j'y touche pas trop pour l'instant!
Déjà le code est dégueulasse parce qu'à l'affichage de la page il appelle les pages php autant de fois qu'il y a de boutons dans la page... et donc autant de connexions à la base de données, ce qui est vraiment pas top! Donc cette moitié de code Javascript est clairement à jeter déjà! Et après il devrait y avoir un moyen de "compresser" le reste, sachant que comme Urefeu l'a dit, le j'aime et j'aime pas son en fait des compteurs indépendants! (mais qui fonctionnent exactement pareil, seul le nom de la ligne dans la table est différente!!!)

Sinon j'ai donné tout le code, où est ce qu'il faut le mettre, ainsi que le site d'où j'ai tiré ce code et qui en explique toutes les lignes... Je vois pas comment je pourrais aider plus!!!

Et pour ton erreur, c'est qu'il faut tes paramètres de connexion à la bae de données! Qui sont dans mon fichier connexionsparameters.php, mais j'allais quand même pas vous donner mes codes... (et il ne contient que ca!)

Et pour voir le code en action: http://www.vosblagues.com

Sinon, étant aussi débutant en JS, j'aimerais savoir qq chose : Comment fais-tu pour sauvegarder les données en JS ?

Au clic sur ton bouton, c'est bien le JS qui agit, et c'est enregistré... ?

Urefeu

Ajax et l'échange de données en JavaScript

Et plus précisément c'est cette partie du code qui se charge d'appeler la page PHP qui fera l'enregistrement:

click:function(event){
    var element = event.currentTarget;
    event.preventDefault();
    
    $(element).unbind('click');
    $(element).click(function(){return false;});
    
    $.ajax({
      context: element,
      type: 'POST',
      url: "./js/like.php",
      data: 'vote=&cle=' + encodeURIComponent($(element).attr('title')),
      success: function(data) {
        $(this).css({'opacity':0});
        
        $(this).addClass('jaimeAVote');
        
        var votes = parseInt(data);
        if(isNaN(votes)) {votes="-1";}
        if (votes>1){
          $(this).html(votes + ' personnes ont rigolé!');
        } else{
          $(this).html(votes + ' personne a rigolé!');
        }
        
        $(this).animate({'opacity': 1}, {'duration':'slow'});
      },
      'error':function(){
        alert("Une erreur s'est produite: merci de recharger la page!");
      }
    });
  }
};

Heureusement que c'est pas le javascript lui-même qui se charge de l'enregistrement, car sinon il faudrait lui donner les accès à ta base de donnée, et comme tout le monde peut voir le javascript, tout le monde pourrait accéder à ta base de données!!!