Fonction vote et refresh

Par Nathan-11, il y a 11 ans


Bonjour
Actuellement j'utilise un code AJAX qui me permet d'afficher le résultat d'un click +1 par exemple !
La partie php mysql fonctionne bien !
Maintenant ma div ne se rafraichi pas il faut actualisé toute la page.

function vote(pageId) { var dataFields = {'article_id': pageId}; $.ajax({ type: "POST", url: "index.php?page=Article_vote", data: dataFields, timeout: 3000, success: function(dataBack){ $('#').html(dataBack);// + type $('#voteUp').attr('class', 'vote_up_done oneLine'); $('#positive').attr('class', 'numberVoted oneLine'); $('#message').html('<div id="alertFadeOut" style="color: green">Merci pour votre vote !</div>'); $('#alertFadeOut').fadeOut(5000, function () { $('#alertFadeOut').text(''); }); }, error: function() { $('#message').text('Problème ....'); } }); }

49 réponses

betaWeb, il y a 11 ans

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.

Khalysto, il y a 11 ans

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

Nathan-11, il y a 11 ans

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 !)

Khalysto, il y a 11 ans

Tu as essayé avec ça ?

$('#alertFadeOut').html('');
JC_Pires, il y a 11 ans

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.

Nathan-11, il y a 11 ans

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 !

Khalysto, il y a 11 ans

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 ?

JC_Pires, il y a 11 ans

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.

JC_Pires, il y a 11 ans

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

JC_Pires, il y a 11 ans

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

Nathan-11, il y a 11 ans

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

JC_Pires, il y a 11 ans

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

JC_Pires, il y a 11 ans

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.

Khalysto, il y a 11 ans

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

$('.numberVoted')...
JC_Pires, il y a 11 ans

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

JC_Pires, il y a 11 ans

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({ }); }
Nathan-11, il y a 11 ans

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é ..

JC_Pires, il y a 11 ans

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.

Nathan-11, il y a 11 ans

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 ?

JC_Pires, il y a 11 ans

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);
JC_Pires, il y a 11 ans

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);
Nathan-11, il y a 11 ans

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

JC_Pires, il y a 11 ans

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); } }); }
Nathan-11, il y a 11 ans

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.

JC_Pires, il y a 11 ans

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); } }); }
JC_Pires, il y a 11 ans

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

JC_Pires, il y a 11 ans

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>
Nathan-11, il y a 11 ans

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é ?

JC_Pires, il y a 11 ans

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); } }); });
JC_Pires, il y a 11 ans

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 ...

JC_Pires, il y a 11 ans

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
});

Nathan-11, il y a 11 ans

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 .

JC_Pires, il y a 11 ans

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 ...

JC_Pires, il y a 11 ans

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

JC_Pires, il y a 11 ans

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

JC_Pires, il y a 11 ans

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

JC_Pires, il y a 11 ans

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

Nathan-11, il y a 11 ans

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

JC_Pires, il y a 11 ans

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

JC_Pires, il y a 11 ans

je viens de tester dans la console en tapant juste vote('21') et vote(21) tu veras que le résultat est bien différent

Nathan-11, il y a 11 ans

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.

JC_Pires, il y a 11 ans

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

Nathan-11, il y a 11 ans

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

Nathan-11, il y a 11 ans

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

JC_Pires, il y a 11 ans

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?

Nathan-11, il y a 11 ans

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 !

JC_Pires, il y a 11 ans

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!

Nathan-11, il y a 11 ans

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