changer couleur bouton et rechaarger page Résolu/Fermé

Question

Bonjour, 

Je me permet de poster ici concernant un petit projet que je souhaite réaliser.
Je souhaite qu'au click d'un bouton, 
1 que ce bouton change de couleur ainsi que son contenue.
2 Lancement de la requete ajax. (ca ca marche sur mon code)
recharger la page sans perdre le fil de lecture si possible.

voici mon code :

$(".validerpriere").click(function(){    var id = $(this).attr("id").split("-")    var sujet = $(`#idSujet-${id[1]}`).val()    console.log(`#idSujet-${id[1]}`)    $.ajax({        type: "POST",        url: "http://localhost/priere/fonc/accueiltr.php",        data: {            idSujet: sujet        },        dataType: 'html',        success: function(response) {            $(`#idSujet-${id[1]}`).removeClass("");            $(`#idSujet-${id[1]}`).addClass("btn btn-outline-success");            $(`#idSujet-${id[1]}`).html("Je prie pour toi");            location.reload            console.log("Ajax d ajout de priere SUCCESS")        }    });})  

Merci pour votre aide.

Configuration: Linux / Firefox 83.0

jordane45 · Answer

Bonjour,

L'intéret de l'ajax... c'est de ne pas avoir à recharger la page....  donc pourquoi veux tu faire cela ?
De plus,  si tu recharges la page, les modifications faites (sur la couleur du bouton) ne seront pas conservés si tu recharges la page.
A mois de sauvegarder l'état du bouton au moment d'afficher la page .. ce qui implique que tu doives vérifier, à l'ouverture de ta page ( donc au niveau de ton code php par exemple ou via une nouvelle fonction javascript ) de quelle couleur doit être le bouton.
Cette "sauvegarde" peut-être faite via une base de données,  ou les cookies, ou le localstorage de ton navigateur.

Et pour ce qui est de ne pas perdre le fil de lecture...  je suppose que ce que tu cherches, c'est l'utilisation des ancres.
Renseignes toi sur leur fonctionnement.... ce n'est pas compliqué.

Sebas31t · Answer

Oui en me relisant je vois bien que je suis attaché au post et php.
C'est génial de pouvoir faire des requetes sans rafraichir.

J'ai donc modifier comme ceci et ca fonctionne bien.

$(".validerpriere").click(function(){    var id = $(this).attr("id").split("-")    var sujet = $(`#idSujet-${id[1]}`).val()    console.log(`#idSujet-${id[1]}`)    $(this).removeClass()    $(this).addClass("btn btn-outline-success");    $(this).html("Je prie pour toi");    $.ajax({        type: "POST",        url: "http://localhost/priere/fonc/accueiltr.php",        data: {            idSujet: sujet        },        success: function(response) {            console.log("Ajax d ajout de priere SUCCESS")        }    });})

Changer couleur bouton et rechaarger page

2 réponses

Discussions similaires