Problème requête jQuery

Résolu/Fermé
tulipe - Modifié par tulipe le 10/11/2016 à 15:53
 tulipe - 17 nov. 2016 à 14:30
Bonjour,

J'ai un problème concernant une requête jQuery. Je souhaiterai activer un onglet si l'erreur "form-group has-error" s'affiche dans mon formulaire twig.

Voici pour le moment ce que j'ai fais :

$(document).ready(function(){
        if($('div').hasClass("form-group has-error")){
            $("#parameters-tab ul.nav-tabs li:last-child").addClass("active");
        }
    });


1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
10 nov. 2016 à 16:14
Salut,

Et quel est le problème ? Le code est-il bien exécuté ? La classe 'active' est elle ajoutée ?
As tu des erreurs javascript dans la console de développement de ton navigateur ?
Peux t-on avoir le code html correspondant ?

La vérification de l'existence des classes "form-group has-error" est un peu lourde car on fait ce test sur tous les div du document, on pourrait peut être cibler un peu plus les éléments susceptibles d'avoir ces classes.
Néanmoins ton code semble correct et devrait fonctionner.

Bonne journée,
0
Salut,

Mon problème est que mon code n'est pas exécuté car il ne prends pas en compte l'erreur, et il ne mets pas de classe active sur mon onglet.

Je n'ai aucune erreur dans la console de developpement.

<div class="portlet-body">
                                                            <form name="contact" method="post">
                                                                <div class="form-group has-error"><label class="control-label required" for="contact_name">Nom</label><input type="text" id="contact_name" name="contact[name]" required="required" class="form-control"><span class="help-block">    <ul class="list-unstyled"><li><span class="glyphicon glyphicon-exclamation-sign"></span> Cette valeur ne doit pas être vide.</li></ul>
    </span></div>
                                                                <div class="form-group"><label class="control-label" for="contact_description">Description</label><textarea id="contact_description" name="contact[description]" class="form-control"></textarea></div>
                                                                <div class="form-group"><label class="control-label required" for="contact_adresse">Adresse</label><input type="text" id="contact_adresse" name="contact[adresse]" required="required" class="form-control" value="fvdf"></div>
                                                                
                                                                <div class="form-group"><button type="submit" class="btn btn-success btn">Valider</button></div>
                                                           </form>
                                                        </div>
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 10/11/2016 à 17:35
Pour vérifier que ton code est exécuté, tu peux ajouter tes "alert" ou "console.log" pour suivre l'exécution.

La première condition (vérification de l'existence des classes "form-group has-error") devrait être validée puisque ton document possède bien un div avec ces classes.
Le problème vient donc peut être du sélecteur css "#parameters-tab ul.nav-tabs li:last-child" qui ne serait pas correct ?

Peux tu essayer ce code afin de vérifier ces points :
$(document).ready(function(){
  alert('code js exécuté');
  if($('div').hasClass("form-group has-error")) {
    alert('div.form-group.has-error trouvé');
    if ($("#parameters-tab ul.nav-tabs li:last-child").length == 0) {
      alert('element #parameters-tab ul.nav-tabs li:last-child introuvable');
    }
   $("#parameters-tab ul.nav-tabs li:last-child").addClass("active");
  }
});
0
tulipe > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
Modifié par tulipe le 10/11/2016 à 18:30
Alors les alerts sont bien affichées et il me met bien l'onglet en active en revanche le tab-pane n'est pas actif.

C'est à dire que le premier onglet est activé et également le dernier avec le tab-pane du premier. Moi je souhaiterai juste le dernier onglet avec son tab-pane correspond.
0
Up !
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
15 nov. 2016 à 11:56
SI je comprend bien, le problème vient du fait que la classe "active" est toujours présente sur le premier onglet après l'ajout de cette classe sur le dernier onglet.
Dans ce cas une solution possible est de supprimer la présence de la classe "active" sur tous les onglets avant de l'ajouter sur le dernier :
$(document).ready(function () {
    if ($('div').hasClass("form-group has-error")) {
        $("#parameters-tab ul.nav-tabs li").removeClass("active");
        $("#parameters-tab ul.nav-tabs li:last-child").addClass("active");
    }
});
0