Changer couleur bouton et rechaarger page
Résolu
Sebas31t
Messages postés
53
Date d'inscription
Statut
Membre
Dernière intervention
-
Sebas31t Messages postés 53 Date d'inscription Statut Membre Dernière intervention -
Sebas31t Messages postés 53 Date d'inscription Statut Membre Dernière intervention -
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 :
Merci pour votre aide.
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
A voir également:
- Changer couleur bouton et rechaarger page
- Changer dns - Guide
- Supprimer page word - Guide
- Changer la couleur de la barre des taches - Guide
- Excel cellule couleur si condition texte - Guide
- Changer carte graphique - Guide
2 réponses
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é.
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é.
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.
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")
}
});
})
