Fonction vote et refresh

Alors déjà "ma div" c'est vague, quelle est son ID ?
sinon

$('#').html(dataBack);// + type 

Pourquoi un "#" seul ? Quel élément veux-tu impacter ? Parce que là c'est sûr que ça ne fonctionnera pas :)

et aussi au lieu de

$('#voteUp').attr('class', 'vote_up_done oneLine'); 
$('#positive').attr('class', 'numberVoted oneLine'); 

utilises

$('#voteUp').addClass('vote_up_done oneLine');
$('#positive').addClass('numberVoted oneLine'); 

c'est bien plus propre.

Ton

$('#').html(dataBack);

ne renvoie le résultat dans aucun élément, il faut que tu indiques l'id que tu veux.
Ça doit juste être un petit oubli de ta part :)

Bonjour
Après moulte recherche j'arrive toujours a rien ! J'ai bien pris en compte vos réponse !
Voilà ce que j'ai fait :
Dans mon fichier Article :

$pageId = $_GET['id']; 
$NomCookie = 'CookieVote'.$pageId;

$sql = "SELECT * 
        FROM " . $database->pref . "article_article 
        WHERE article_id = '$pageId'";

$req = $database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );

$row = $database->ResultArray ( $req ); 
//$positive = $row['positive'];

$page_texte .= '<div id="lineBlock">';
$page_texte .= '<small>Si vous aimez cliquez (1 fois MAX par jour)</small> ';
if ( isset ( $_COOKIE[$NomCookie] ) ) {
$page_texte .= '<div class="vote_up_done oneLine" id="votePlus"></div><div class="numberVoted oneLine">' . $row['positive'] . '</div>';
} 
else { 
$page_texte .= "<div class=\"vote_up oneLine\" id=\"voteUp\"><a href=\"#\" onclick=\"vote('".$pageId."'); return false;\"></a></div><div class=\"number oneLine\" id=\"positive\">" . $row['positive'] . "</div>";
}
$page_texte .= '</div>';
$page_texte .= '<span id="message"></span>';

Dans mon fichier de traitement :

if ( $_POST ) {

   $pageId = $_POST['article_id'];
$positive = $row['positive'] + 1;

$sql = "UPDATE " . $database->pref . "article_article
        SET positive = positive+1 WHERE article_id= '" . $pageId . "';";

$database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );

$sql = "SELECT positive 
        FROM " . $database->pref . "article_article
        WHERE article_id = '" . $pageId . "';";

$req = $database->Requete ( $sql ) or $database->Erreur ( __LINE__ , __FILE__ , $sql );

$row = $database->ResultArray ( $req );

$positive = $row['positive'];

$expire = 24 * 3600 ; // 1 jour
setcookie ('CookieVote'.$pageId, 'voted', time()+$expire , '/');

echo $row[$positive];}

Mon fichier de fonction :

function vote(pageId) { 
    var dataFields = {'article_id': pageId};
    $.ajax({ //appel asynchrone d'une page internet
        type: "POST", //utilisation de la méthode http POST (passage des variables dans le corps de la requête)
        url: "index.php?page=Article_vote", //adresse à appeler
        data: dataFields, //données à fournir
        timeout: 3000, //après 3 secondes on abandonne la requête
        success: function(dataBack){ //quand la requête a été validée on exécute cette fonction, dataBack contient la réponse de la page.
            $('#votePlus').html(dataBack); // dataBack (la réponse à la requette dans le code html qui a pour idantifiant votePlus.
            $('#voteUp').attr('class', 'vote_up_done oneLine'); // modification de la classe d'un élément
            $('#positive').attr('class', 'numberVoted oneLine'); // modification de la classe d'un autre élément
            $('#message').html('<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>'); // affiche d'un message à l'utilisateur
            $('#alertFadeOut').fadeOut(5000, function () { // Et on le fait s'effacer avec classe
                $('#alertFadeOut').text('');
            });
            },
        error: function() {
            $('#message').text('Problème ....');
             console.log(dataBack); 
        }
    });
}

Le traitement ce passe bien il enregistre en Bdd j'ai bien mon message Merci pour votre vote mais la div ne s'actualise pas sauf en faisant F5 (donc actualisation de toute la page !)

Tu as essayé avec ça ?

$('#alertFadeOut').html('');

C'est normal car jquery ne prend pas en compte les éléments que tu injectes après chargement du DOM, sauf dans différents cas biensûr comme lorsque tu bind l'élément parent sur un on('click') par exemple.

Créé ta div dans ton code Html que tu laisse vide et tu lui met par exemple un display:none. Lors de ton succès Ajax, tu as juste à lui faire faire un fadeIn().delay(5000).fadeOut().

Sinon tu stockes ta div en Js dans une variable en début de script et tu fais tes opérations sur la variable, comme ça tu y auras toujours accès même si tu la remove() du DOM:

$alert-elem = '<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>';
//ton code ajax de succès puis à la fin
$('#message').append($alert-elem); 
$alert-elem.delay(5000).fadeOut("slow", function(){
    $(this).remove(); // On nettoie le DOM à la fin de l'animation
});

J'ai pas testé mais de tête ça doit pas être loin.

Khalysto
oui j'ai essayer ça change rien
Jean-christophe Pires
Désolé j'ai pas compris donc j'ai essayer mais rien a faire de plus "Merci pour votre vote vote" reste et ne s'efface pas sauf au refresh de la page entière !

Dans le doute, est ce que tu es sûr que tous tes scripts sont chargés ?
Parce que de tête, son code est pas bien sorcier et devrait fonctionner.
Tu as essayé de le faire directement dans la console ?

Oui mes script sont tous chargé pour voir sur mes test c'est ici : http://www.test.informadream.fr/index.php?page=Liste_des_articles

essai ça :

function vote(pageId) { 
    var dataFields = { 'article_id': pageId };
    var $div-alert = '<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>';

    var jqxhr = $.post("index.php?page=Article_vote", dataFields)
        .done(function(data, textStatus) {

            $('#votePlus').html(data);
            $('#voteUp').addClass('vote_up_done oneLine'); 
            $('#positive').addClass('numberVoted oneLine');
            $('#message').append($div-alert); 
            $div-alert.delay( 2000 ).slideUp( 300 ).delay( 300 ).remove(); //J'ai mis SlideUp mais tu peut mettre fadeOut

        })
        .fail({
            $('#message').text('Problème ....');
            console.log(dataBack); 
        })
        .always({
        });
}

Bon pour vraiment t'aider il faudrais avoir le code Html et le debug en console. Là c'est un peu flou. Par contre utilisez les methode .done .fail .always à la place de .success .error .complete qui sont dépréciée pour vos requêtes ajax.

Et renvoyer du Json en réponse "avis perso", c'est plus facile à manipuler un objet

je viens de voir ton message avec ton lien vers ton systeme. Ca fonctionne là non? Le message s'est éffacé.

Oui je l'ai remis comme au départ ! et si tu as vu la div n'est pas rafraichi !

je viens de voir ton message avec ton lien vers ton systeme. Ca fonctionne là non? Le message s'est éffacé. Il te reste plus qu'a incrémenter le compteur:

Si je reprend ce que j'avais mis en dernier:

function vote(pageId) { 
    var dataFields = { 'article_id': pageId };
    var $div-alert = '<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>';

    var jqxhr = $.post("index.php?page=Article_vote", dataFields)
        .done(function(data, textStatus) {
            $counter = $('#numberVoted').html(); // On récupère l'ancien chiffre           
             $('#numberVoted').html(parseInt($counter) + 1).hide().fadeIn(); 
             // Onl'incrémente de 1 et on le fadeIn() pour l'esthétique mais on est obligé de le masquer avant le fadeIn d'ou le hide()
            $('#votePlus').html(data);
            $('#voteUp').addClass('vote_up_done oneLine'); 
            $('#positive').addClass('numberVoted oneLine');
            $('#message').append($div-alert); 
            $div-alert.delay( 2000 ).slideUp( 300 ).delay( 300 ).remove(); //J'ai mis SlideUp mais tu peut mettre fadeOut

        })
        .fail({
            $('#message').text('Problème ....');
            console.log(dataBack); 
        })
        .always({
        });
}

numberVoted

Tu n'es pas assez explicite il aurais fallu que tu dises le compteur ne s'incrémente pas. La div c'est trop vague on ne sait pas de quoi tu parles.

Tu n'utilises pas le bon élément, c'est le contenu de ta div numberVoted que tu dois changer.

$('.numberVoted')...

Exactement Khalysto c'est d'ailleurs une classe pas un ID je me suis trompé dans mon code précédement.

Et j'ai fais l'erreur de mettre un tiret dans ma variable div-alert qui devrais être $divAlert plutôt

Je reprend sans erreur, dsl ...

function vote(pageId) { 
    var dataFields = { 'article_id': pageId };
    var $divAlert = '<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>';

    var jqxhr = $.post("index.php?page=Article_vote", dataFields)
        .done(function(data, textStatus) {
            $counter = $('.numberVoted').html(); // On récupère l'ancien chiffre           
             $('#numberVoted').html(parseInt($counter) + 1).hide().fadeIn(); 
             // Onl'incrémente de 1 et on le fadeIn() pour l'esthétique mais on est obligé de le masquer avant le fadeIn d'ou le hide()
            $('#votePlus').html(data);
            $('#voteUp').addClass('vote_up_done oneLine'); 
            $('#positive').addClass('numberVoted oneLine');
            $('#message').append($divAlert); 
            $divAlert.delay( 2000 ).slideUp( 300 ).delay( 300 ).remove(); //J'ai mis SlideUp mais tu peut mettre fadeOut

        })
        .fail({

            console.log(dataBack); 
        })
        .always({
        });
}

Jean-christophe Pires : j'ai essayer avec t'as fonction sauf qu'avec dreamweaver j'ai une erreur de syntaxe !
Ensuite j'ai repris ma fonction et a la place de $('#votePlus').html(dataBack); j'ai mis $('.numberVoted').html(dataBack); mais rien ne change !
C'est vraiment une vrai galère ce AJAX ! j'arrive pas à pigé ..

Oui Nathan j'ai suivis tes modification en live, mais dans le code que j'avais donné il y avais effectivement des erreurs j'avais mis un tiret à la variable " le Noob" dsl. J'ai corrigé juste au dessus normalement ça devrais aller.

Tu n'as pas à être désolé c'est déjà très gentil de t'as part de bien vouloir m'aider !
Il y a toujours une erreur dans le code il me signale erreur de syntaxe acette ligne : console.log(dataBack); bizarre non ?

Non c'est normal car je suis un gros débile, ah tu veut faire le malin et dormir 3h mais ça suffis pas...

Car .fail et always prennent une fonction en parametre ....

(function ($) {
function vote(pageId) {
    var dataFields = { 'article_id': pageId };
    var $divAlert = '<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>';

    var jqxhr = $.post("index.php?page=Article_vote", dataFields)
        .done(function(data, textStatus) {
            $counter = $('.numberVoted').html();
             $('.numberVoted').html(parseInt($counter) + 1).hide().fadeIn();
            $('#votePlus').html(data);
            $('#voteUp').addClass('vote_up_done oneLine');
            $('#positive').addClass('numberVoted oneLine');
            $('#message').append($divAlert);
            $divAlert.delay( 2000 ).slideUp( 300 ).delay( 300 ).remove(); //J'ai mis SlideUp mais tu peut mettre fadeOut

        })
        .fail(function(){
            console.log(dataBack);
        })
        .always(function(){
        });
}

})(jQuery);

Ah oui mais ne copie pas le début et la fin, lol j'ai fais mon copié collé trop vite dsl enleve la premiere ligne et la dernière:
enleve ça ... #besoin de sommeil

(function ($) {
})(jQuery);

Alors là j'ai plus rien qui fonctionne ma bdd ne s'incrémente plus, plus de message enfin rien !
Je suis complètement perdu, pourtant avec mon code d'origine le fichier de traitement fonctionne vu que ma bdd s'incrémente.
Donc lors du click le fichier ajax doit prendre le relais ? enfin j'espère bien comprendre ?
Oui je l'ai enlever mais toujours pas de changement sauf que "Merci pour votre vote" reste

Ta fonction marchais très bien, désolé mais j'ai du mal à débugger soit avoir tout a dispo, reprenons. Le seul problème que tu avais, été le fait que le compteur ne s'incrémenté pas, essayons ça, je t'ai embrouillé:

function vote(pageId) { 
    var dataFields = {'article_id': pageId};
    $.ajax({ //appel asynchrone d'une page internet
        type: "POST", //utilisation de la méthode http POST (passage des variables dans le corps de la requête)
        url: "index.php?page=Article_vote", //adresse à appeler
        data: dataFields, //données à fournir
        timeout: 3000, //après 3 secondes on abandonne la requête
        success: function(dataBack){ 
            console.log(dataBack);
            $compteur = $('.numberVoted').html();
            console.log($compteur);
            $('.numberVoted').html(parseInt($compteur)+1).hide().fadeIn(); 
            $('#voteUp').attr('class', 'vote_up_done oneLine'); // modification de la classe d'un élément
            $('#positive').attr('class', 'numberVoted oneLine'); // modification de la classe d'un autre élément
            $('#message').html('<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>'); // affiche d'un message à l'utilisateur
            $('#alertFadeOut').fadeOut(2000, function () { // Et on le fait s'effacer avec classe
                $('#alertFadeOut').html('');//$('#alertFadeOut').text('');
            });
            },
        error: function() {
            $('#message').text('Problème ....');
             console.log(dataBack); 
        }
    });
}

Non le compteur s'incrémente en BDD ! c'est uniquement à l'affichage qu'il faut que la page soit refresh au lieu de la div pour voir le nouveau compte !
Je sais pas si je suis clair dsl.
en fait il y a par exemple 2 d'afficher et lors du click il faut que cette div affiche 3 par exemple.

Ok là ça fonctionne, je viens de tester en live dans la console:

function vote(pageId) { 
    var dataFields = {'article_id': pageId};
    $.ajax({ //appel asynchrone d'une page internet
        type: "POST", //utilisation de la méthode http POST (passage des variables dans le corps de la requête)
        url: "index.php?page=Article_vote", //adresse à appeler
        data: dataFields, //données à fournir
        timeout: 3000, //après 3 secondes on abandonne la requête
        success: function(dataBack){ 
            $compteur = $('.numberVoted').html();
            $('.numberVoted').html(parseInt($compteur)+1).hide().fadeIn(); 
            $('#voteUp').attr('class', 'vote_up_done oneLine'); // modification de la classe d'un élément
            $('#positive').attr('class', 'numberVoted oneLine'); // modification de la classe d'un autre élément
            $('#message').html('<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>'); // affiche d'un message à l'utilisateur
            $('#alertFadeOut').fadeOut(2000, function () { // Et on le fait s'effacer avec classe
                $('#alertFadeOut').html('');//$('#alertFadeOut').text('');
            });
            },
        error: function() {
            $('#message').text('Problème ....');
             console.log(dataBack); 
        }
    });
}

Alors c'est drôle mais quand je copie colle la fonction dans la console puis entré, et que juste apres je fais vote(12) sur l'article 12 dans la console par exemple tout fonctionne, mais pas quand je refresh et que je prend la fonction du fichier. 0_o

Quand je mets l'attribut onclick sur l'element "la main" ça marche le probleme viens donc en amont de la fonction

<div class="vote_up_done oneLine" id="voteUp" onclick="vote(12)"><a href="#" onclick="vote('12'); return false;"></a></div> 

Donc si je suis bien il n'y aurait aucun problème au niveau de la fonction ajax ! Donc il est possible que ce soit un soucis au niveau des autres scripts js ? Une incompatibilité ?

Ok trouvé en fait c'est ton a dans la div

<div class="vote_up_done oneLine" id="voteUp" onclick="vote(12)"><a href="#" onclick="vote('12'); return false;"></a></div> 

Mets ça dans ta fonction et change ta div comme ça:

<div class="vote_up_done oneLine" id="voteUp" data-id=" 12 "><a href="#" "></a></div>  dans le data-id tu mets l'id de l'article

    $('.voteUp').on('click', function(e){
      e.preventDefault();   
      pageId = $this.attr('data-id');    
      var dataFields ={'article_id': pageId};
      $.ajax({ //appel asynchrone d'une page internet
          type: "POST", 
          url: "index.php?page=Article_vote", 
          data: dataFields,
          timeout: 3000,
          success: function(dataBack){ 
              $compteur = $('.numberVoted').html();
              $('.numberVoted').html(parseInt($compteur)+1).hide().fadeIn(); 
              $('#voteUp').attr('class', 'vote_up_done oneLine'); // modification de la classe d'un élément
              $('#positive').attr('class', 'numberVoted oneLine'); // modification de la classe d'un autre élément
              $('#message').html('<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>'); // affiche d'un message à l'utilisateur
              $('#alertFadeOut').fadeOut(2000, function () { // Et on le fait s'effacer avec classe
                  $('#alertFadeOut').html('');//$('#alertFadeOut').text('');
              });
              },
          error: function() {
              $('#message').text('Problème ....');
               console.log(dataBack); 
          }
      });
    });

Et j'avais meme pas fais gaffe au return false dans ton a pq? supprime le return false et test comme c'était avant je pense que tu vas etre surpris. ^^

C'est juste ton return false qui casse tout ... Comment j'ai pus loupé ça ...

Tout en haut de ton fichier js tu peut mettre ça c'est vrai que tu es sur wordpress

$=jQuery.noConflict();
$(document).ready(function() {

Il y a une version de Jquery de wordpress qui rentre en conflit, j'avais pris l'habitude de le mettre directement dans mes js perso

et donc à la fin du fichier
});

non je suis pas sous wordpress mais woopress rien a voir ! LOL !
Bon j'ai viré le return false et remis mon fichier fonction comme au départ (mon premier message) et j'ai quand même rajouter le jQuery noConflict !
Pareil qu'au début ... pffff c'est quand même un truc de fou, du moins ça me rend fou .

la fonction là marchais très bien:

    function vote(pageId) { 
        var dataFields = {'article_id': pageId};
        $.ajax({ //appel asynchrone d'une page internet
          type: "POST", //utilisation de la méthode http POST (passage des variables dans le corps de la requête)
          url: "index.php?page=Article_vote", //adresse à appeler
          data: dataFields, //données à fournir
          timeout: 3000, //après 3 secondes on abandonne la requête
          success: function(dataBack){ 
              $compteur = $('.numberVoted').html();
              $('.numberVoted').html(parseInt($compteur)+1).hide().fadeIn(); 
              $('#voteUp').attr('class', 'vote_up_done oneLine'); // modification de la classe d'un élément
              $('#positive').attr('class', 'numberVoted oneLine'); // modification de la classe d'un autre élément
              $('#message').html('<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>'); // affiche d'un message à l'utilisateur
              $('#alertFadeOut').fadeOut(2000, function () { // Et on le fait s'effacer avec classe
                  $('#alertFadeOut').html('');//$('#alertFadeOut').text('');
              });
              },
          error: function() {
              $('#message').text('Problème ....');
               console.log(dataBack); 
          }
      });
  }

avec ça dans l'html:

    <div class="vote_up_done oneLine" id="voteUp" onclick="vote(12)">  //essai avec et sans le on-click
        <a href="#" onclick="vote(12)"></a>
    </div> 

Attention j'ai vu que c'est marqué vote('12') ce n'est pas une chaine de caractère que tu dois passer mais un integer "un chiffre" donc vote(12)

Oui enfin woopress wordpress joomla même combat ...

Modifie comme je l'ai mis et test en modifiant également les div dans la console moi ça a marchais plusieurs fois mais je devais modifier les attributs des divs a la main

Par contre ça :

$=jQuery.noConflict();
$(document).ready(function() {

Il y a une version de Jquery de wordpress qui rentre en conflit, j'avais pris l'habitude de le mettre directement dans mes js perso

et donc à la fin du fichier
});

Ca ne marchais que si tu etais sous wordpress woopress je sais pas si il a jquery embarqué comme wordpress

Ah mais le projet woopress est ton projet ... je mets tout ensemble maintenant. OK

C'est drôle j'ai juste à copier la fonction dans la console, puis vote(8) par exemple et ça fonctionne niquel pour l'article 8 bien sur

Même problème ! ma div d'affichage du nouveau compte ne s'actualise pas !
Je suis complètement larguer pour le coup.

C'est parceque dans ton onclick tu as une chaine de caractère vote('12') et pas vote(12)

C'est bon je crois ! en fait tout ce qu'on fait (du moins que tu fais et je t'en remercie grandement) est bon il a juste fallu que je modifie la class vote_up_done oneLine en vote_up oneLine ! on dirai que ça fonctionne ! je vérifie une fois de plus.

Niquel ! et bien voilà! Ah ben je suis content. Bon on revois la fonction qui est déprécié? ^^ on utilise plus .success etc

Je ne sais pas comment te dire un peu plus MERCI que MERCI lui même ! Franchement t'es super ! encore une fois MERCI.

Aller je suis motivé pour voir comment on fait pour ne plus utiliser les fonction déprécié ? donc du coup je vais voir de quoi il en retourne !
Merci beaucoup

Laisse comme ça pour le moment ça marche ^^ Content de t'avoir aidé meme si ça a été dur. Alors c'est toi qui dev woopress donc? tu utilises quoi, un framework?

Oui c'est moi qui est repris depuis pas mal de temps déjà woopress ! Est-ce que bootstrap est un framework ? si oui alors oui !
J'essai a hauteur de mes compétences de le faire évoluer sans pour autant qu'il devienne une usine à gaz !

Ah ben c'est cool, je suis entrain de dev un CMS avec forum qui tournerais sous cakephp3, j'aimerais mixer la partie blog de wordpress et la partie forum de xenforo ou vbulletin par exemple. Je suis deja pas mal avancé, je dirais 30 40% je me rend compte du travail que c'est. Courage!

Merci beaucoup et je te retourne la même chose donc du courage ! Merci encore !