IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Convertir un code jQuery en JavaScript vanilla


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    mars 2011
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : mars 2011
    Messages : 125
    Points : 48
    Points
    48
    Par défaut Convertir un code jQuery en JavaScript vanilla
    Bonjour,

    J'essaye de convertir ce code jqury en pure js, je suis nouveau dans le domaine
    Je me demande aussis'il faut pas utiliser eventlistener ?
    Merci pour votre aide

    jquery :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <script>
            $(function () {
                if ($('form[name="sql"] input[type="checkbox"][name="masterblaster"]').length > 0) {
                    $('form[name="sql"] input[type="checkbox"][name="masterblaster"]').click(function () {
                        $('form[name="sql"] input[type="checkbox"][name="id[]"]').prop('checked', $('form[name="sql"] input[type="checkbox"][name="masterblaster"]').prop('checked'));
                    });
                }
     
                if ($('#sqlActionsMenu').val() == 'utf8') {
                    $('.runUtf8').show();
                }
     
                $('#sqlActionsMenu').change(function () {
                    var selected = $(this).val();
     
                    if (selected == 'utf8') {
                        $('.runUtf8').show();
                    } else {
                        $('.runUtf8').hide();
                    }
                });
            });
        </script>
    Pure js - `sqlActionsMenu` not undefined

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <script>
            if(document.querySelectorAll('form[name="sql"] input[type="checkbox"][name="masterblaster"]').length > 0) {
                document.querySelector('form[name="sql"] input[type="checkbox"][name="masterblaster"]').click(function() {
                    const el = document.querySelector('form[name="sql"] input[type="checkbox"][name="id[]"]').checked = document.querySelector('form[name="sql"] input[type="checkbox"][name="masterblaster"]').checked;
                })
            }
     
            var sqlActionsMenu = document.getElementById('sqlActionsMenu');
     
            if (sqlActionsMenu == 'utf8') {
                div.classList.add("runUtf8");
            }
     
            var sqlActionsMenu1 = sqlActionsMenu.element.onchange;
     
            if (sqlActionsMenu1) {
                var selected = this.value;
     
               if (selected == 'utf8') {
                   span.classList.add("runUtf8");
                } else {
                   span.classList.removeAttribute("runUtf8");
                }
            }
        </script>

  2. #2
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 052
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 052
    Points : 3 638
    Points
    3 638
    Par défaut
    ton script doit etre execute trop tot (surement au milieu de ton code html)
    soit tu deplaces ton script a la fin du <body>
    soit tu englobles ton JS dans un window.addEventListener("DOMContentLoaded", () => { .... }
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    mars 2011
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : mars 2011
    Messages : 125
    Points : 48
    Points
    48
    Par défaut
    Peut etre mais cette adaptation ne fonctionne pas.
    Déja dans le tableau, impossible de sélectionner toute les checkbox et aprés le probléme du hide show, qui à mon avis ne sont pas correct
    Continue à cherche mais idées bienvenues.

  4. #4
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 189
    Points : 37 821
    Points
    37 821
    Par défaut
    Bonjour,
    Continue à cherche mais idées bienvenues.
    Je pense que le plus important pour toi est que tu comprennes ce que tu écris, car j'ai de gros doutes
    Si l'on prend
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var sqlActionsMenu = document.getElementById('sqlActionsMenu');
    ici tu récupères l'élément du DOM qui a pour id="sqlActionsMenu"...
    et juste après tu écris
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    if (sqlActionsMenu == 'utf8') {
        div.classList.add("runUtf8");
    }
    là tu compares un élément du DOM, trouvé juste avant, avec une chaîne de caractères cela ne pourra donc jamais fonctionner !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var sqlActionsMenu1 = sqlActionsMenu.element.onchange;
    ici tu affectes à ta variable l'« adresse » de la fonction déclenchée sur le onchange de l'élément que tu as récupérè ci-dessus, et non pas le résultat !

    ce qui fait que la ligne suivante :
    n'a pas plus de signification ...

    Il te faut donc commencer par regarder de la documentation concernant les méthodes que tu utilises.

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    mars 2011
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : mars 2011
    Messages : 125
    Points : 48
    Points
    48
    Par défaut
    Oui je suis nul sur ce langage, et oui il y a des conneries, le js ne m'aime pas, moi non plus

  6. #6
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 189
    Points : 37 821
    Points
    37 821
    Par défaut
    le js ne m'aime pas, moi non plus
    il ne faut pas que cela soit, ou devienne, une fatalité !

Discussions similaires

  1. Réponses: 0
    Dernier message: 20/07/2015, 17h23
  2. [SQL Server] Error converting data type varchar...
    Par Sir Tengu dans le forum MS SQL Server
    Réponses: 9
    Dernier message: 13/06/2003, 10h46
  3. [Debutant] [Date] convertion date
    Par BenoitM dans le forum Collection et Stream
    Réponses: 4
    Dernier message: 17/04/2003, 14h55
  4. Convertion de type VARIANT à type CString
    Par j_grue dans le forum MFC
    Réponses: 2
    Dernier message: 07/11/2002, 14h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo