Changer couleur bouton et rechaarger page [Résolu]

Signaler
Messages postés
51
Date d'inscription
lundi 1 décembre 2014
Statut
Membre
Dernière intervention
13 décembre 2020
-
Messages postés
51
Date d'inscription
lundi 1 décembre 2014
Statut
Membre
Dernière intervention
13 décembre 2020
-
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

2 réponses

Messages postés
31087
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2021
3 193
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é.
Messages postés
51
Date d'inscription
lundi 1 décembre 2014
Statut
Membre
Dernière intervention
13 décembre 2020

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

})