Sujet Précédent Sujet Suivant

Changer couleur bouton et rechaarger page

Résolu/Fermé
Sebas31t Messages postés 53 Date d'inscription lundi 1 décembre 2014 Statut Membre Dernière intervention 10 février 2023 - 13 déc. 2020 à 15:14
Sebas31t Messages postés 53 Date d'inscription lundi 1 décembre 2014 Statut Membre Dernière intervention 10 février 2023 - 13 déc. 2020 à 17:32
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
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 37279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2023 4 551
13 déc. 2020 à 17:02
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é.
1
Réponse 2 / 2
Sebas31t Messages postés 53 Date d'inscription lundi 1 décembre 2014 Statut Membre Dernière intervention 10 février 2023
13 déc. 2020 à 17:32
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")
        }
    });

})
0