Problème de conflit javascript

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 26 Juin 2017.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    931
    J'aime reçus:
    15
    Salut à tous,

    J'ai les codes javascript ci-dessous qui sont tous les deux dans un même fichier javascript.

    Le premier code javascript ci-dessous sert à afficher une image dans mon menu. Cette image change lorsqu'on sélectionne un autre produit dans une liste déroulante qui est sous cette image :

    Code:
    function update_type_bijou() {
    var e = document.getElementById("caption_bijou");
    var id = e.options[e.selectedIndex].id;
    document.getElementById('image_bijou').src = ../images/catalogue/' + id;
    }
    window.onload = update_type_bijou;
    
    Le second code javascript met en forme des input du type checkbox qui sont dans mon menu :

    Code:
    var d = document;
    var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
    var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
    onload = function() {
        var body = gebtn(d,'body')[0];
        body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
        
        if (!d.getElementById || !d.createTextNode) return;
        var ls = gebtn(d,'label');
        for (var i = 0; i < ls.length; i++) {
            var l = ls[i];
            if (l.className.indexOf('label_') == -1) continue;
            var inp = gebtn(l,'input')[0];
            if (l.className == 'label_check') {
                l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
                l.onclick = check_it;
            };
            if (l.className == 'label_radio') {
                l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
                l.onclick = turn_radio;
            };
        };
    };
    var check_it = function() {
        var inp = gebtn(this,'input')[0];
        if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
            this.className = 'label_check c_on';
            if (safari) inp.click();
        } else {
            this.className = 'label_check c_off';
            if (safari) inp.click();
        };
    };
    var turn_radio = function() {
        var inp = gebtn(this,'input')[0];
        if (this.className == 'label_radio r_off' || inp.checked) {
            var ls = gebtn(this.parentNode,'label');
            for (var i = 0; i < ls.length; i++) {
                var l = ls[i];
                if (l.className.indexOf('label_radio') == -1)  continue;
                l.className = 'label_radio r_off';
            };
            this.className = 'label_radio r_on';
            if (safari) inp.click();
        } else {
            this.className = 'label_radio r_off';
            if (safari) inp.click();
        };
    };
    function setupLabel() {
            if ($('.label_check input').length) {
                $('.label_check').each(function(){ 
                    $(this).removeClass('c_on');
                });
                $('.label_check input:checked').each(function(){ 
                    $(this).parent('label').addClass('c_on');
                });                
            };
            if ($('.label_radio input').length) {
                $('.label_radio').each(function(){ 
                    $(this).removeClass('r_on');
                });
                $('.label_radio input:checked').each(function(){ 
                    $(this).parent('label').addClass('r_on');
                });
            };
    };
    
    Lorsque je charge ma page, l'image au-dessus de ma liste déroulante ne s'affiche pas, si je sélectionne un autre produit depuis cette liste déroulante l'image s'affiche, c'est donc un problème onload.

    J'ai un window.onload = update_type_bijou; pour l'une de mes fonctions javascript et un autre onload = function(), comment résoudre ce conflit javascript ?

    Merci pour votre aide et vos réponses.
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 155
    J'aime reçus:
    334
    T'en fais 2 fonctions.
    puis:
    PHP:
    <span class="syntaxdefault">window</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">onload&nbsp;</span><span class="syntaxkeyword">=&nbsp;function&nbsp;()&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">update_type_bijou</span><span class="syntaxkeyword">();<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">fonction_2</span><span class="syntaxkeyword">();<br />};&nbsp;</span><span class="syntaxdefault"></span>
    NB: t'as une erreur de syntaxe là: document.getElementById('image_bijou').src = ../images/catalogue/' + id;
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    931
    J'aime reçus:
    15
    Encore un grand merci Spout ça marche nickel ta solution :)

    Oui exact, j'ai enlevé mon url avant le "../images" pour le poster ici et j'ai supprimé par erreur le premier ' dans 'http://www.mon-site.com/images/catalogue/'
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    931
    J'aime reçus:
    15
    Voici un autre problème, j'ai une série d'icones sur lesquelles on peut cliquer pour les sélectionner, ce sont des input checkbox.

    Ca marche très bien sur Firefox et Chrome mais pas sur Internet Explorer :(

    Voici mon code html :
    Code:
         <div class="sous_menu_image">
             <input type="checkbox" id="cb1"><label for="cb1"><img src="../images/formes-taille-icons/NB/rond.jpg" title="Brillant Rond"></label>
             <input type="checkbox" id="cb2"><label for="cb2"><img src../images/formes-taille-icons/NB/princesse.jpg" title="Princesse"></label>
             <input type="checkbox" id="cb3"><label for="cb3"><img src="../images/formes-taille-icons/NB/ovale.jpg" title="Ovale"></label>
             <input type="checkbox" id="cb4"><label for="cb4"><img src="../images/formes-taille-icons/NB/coeur.jpg" title="Coeur"></label>
         </div>
    
    Mon CSS :
    Code:
    .sous_menu_image {
      margin:0;
      margin-left:5px;
      padding:0;
    }
    .sous_menu_image input[type="checkbox"][id^="cb"]{display: none;}
    .sous_menu_image label {
      display:inline-block;
      position:relative;
      cursor:pointer;
      margin:0;
      padding:0;
    }
    .sous_menu_image label img {
      height:25px;
      width:25px;
      transition-duration:0.4s;
      padding:1px;
    }
    .sous_menu_image :checked + label img {
      transform:scale(0.85);
      box-shadow:2px 2px 2px 0px #656565;
      border:1px solid grey;
    }
    
    Voyez-vous pourquoi ça bug avec Internet Explorer ?
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    931
    J'aime reçus:
    15
    J'ai le code ci-dessous qui sélectionne des icones (input checkbox) lorsqu'on clique sur l'une de ces icones.

    Code:
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Icons checkbox</title>
    <style>
    .sous_menu_icons ul {
      list-style-type: none;
    }
    .sous_menu_icons li {
      display: inline-block;
    }
    .sous_menu_icons input[type="checkbox"][id^="cb"] {
      display: none;
    }
    .sous_menu_icons label {
      border: 1px solid #fff;
      padding: 2px;
      display: block;
      position: relative;
      margin:0;
      cursor: pointer;
    }
    .sous_menu_icons label img {
      height: 25px;
      width: 25px;
      transition-duration: 0.4s;
      transform-origin: 50% 50%;
    }
    .sous_menu_icons :checked + label {
      border-color: #ddd;
    }
    .sous_menu_icons :checked + label img {
      transform: scale(0.9);
      box-shadow: 0 0 2px #333;
      z-index: -1;
    }
    </style>
    </head>
    <body>
    <form name="formulaire" method="post" action="mon_fichier.php">
    <div class="sous_menu_icons">
    <ul>
      <li><input type="checkbox" id="cb1"><label for="cb1"><img src="http://lorempixel.com/100/100"></label></li>
      <li><input type="checkbox" id="cb2"><label for="cb2"><img src="http://lorempixel.com/101/101"></label></li>
      <li><input type="checkbox" id="cb3"><label for="cb3"><img src="http://lorempixel.com/102/102"></label></li>
      <li><input type="checkbox" id="cb4"><label for="cb4"><img src="http://lorempixel.com/103/103"></label></li>
    </ul>
    </div>
    <input type="submit" name="ok" value="OK">
    </form>
    </body>
    </html>
    
    Avec Internet Explorer il y a un problème : sans la balise <form> ça marche nickel mais ça ne marche pas avec la balise <form> :(

    Que faudrait-il modifier pour que cela marche avec Internet Explorer ?
     
  6. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    931
    J'aime reçus:
    15
    Tout le monde est à la plage :D

    Il n'y a personne qui pourrait m'aider à résoudre ce problème avec Internet Explorer ?
     
  7. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    931
    J'aime reçus:
    15
    Je rentre de la plage et je me suis arrêté par WRI :D

    J'utilise le widget jquery ui accordéon https://jqueryui.com/accordion/#collapsible pour un menu.

    Dans ce menu, j'ai un <select> et des input radio.

    Mon code php est le suivant :
    Code:
    <select name="caption_produit" id="caption_produit" class="listederoulante">
            <option value="produit_1" id="produit_1" selected>produit_1</option>
            <option value="produit_2" id="produit_2">produit_2</option>
            <option value="produit_3" id="produit_3">produit_3</option>
    </select>
    
    Lorsque je charge ma page et que je regarde le code généré je constate que le code de l'option du produit_1 de mon select a été modifié comme cela :
    Code:
    <select name="caption_produit" id="caption_produit" class="listederoulante">
            <option value="produit_1" id="produit_1" selected="">produit_1</option>
            <option value="produit_2" id="produit_2">produit_2</option>
            <option value="produit_3" id="produit_3">produit_3</option>
    </select>
    
    le selected de mon produit_1 s'est transformé en selected="".

    On est bien d'accord qu'une option qui a été sélectionné dans un select doit s'écrire par un selected ?

    Il se passe la même chose pour mes input radio, le code html généré est checked="" alors qu'il devrait être checked :(

    Comment est-ce possible ? Et comment remédier à cela ?
     
Chargement...
Similar Threads - Problème conflit javascript Forum Date
Problème/conflit "RedirectPermanent" et Url rewirting URL Rewriting et .htaccess 29 Août 2014
Problème de conflit entre htaccess URL Rewriting et .htaccess 13 Décembre 2011
problème de conflit en PHP Développement d'un site Web ou d'une appli mobile 12 Novembre 2006
Problème de php : conflit avec l'URL Rewriting? URL Rewriting et .htaccess 3 Mars 2005
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022
Problème : Google Crawl et Index des pages en No Index et bloqué par le robot.txt Crawl et indexation Google, sitemaps 26 Avril 2022
Problème avec GA4 : nb de visiteurs temps réel et par jour Google Analytics 19 Avril 2022
Problème indexation pages précises en React.js Débuter en référencement 19 Avril 2022
Problème de référencement Demandes d'avis et de conseils sur vos sites 8 Avril 2022
Problème adsence : Annonces ne s'affichent plus AdSense 10 Mars 2022
problèmes procédures stockées Administration d'un site Web 9 Mars 2022
Problème récupération fichier vps Développement d'un site Web ou d'une appli mobile 5 Mars 2022
Problème config postfix. Administration d'un site Web 5 Mars 2022
Search Console Problème d'indexation Crawl et indexation Google, sitemaps 24 Février 2022
Problème d'url canonique Problèmes de référencement spécifiques à vos sites 22 Février 2022
Problème indexation car élément "url" manquant sur logo Crawl et indexation Google, sitemaps 11 Février 2022
Problème avec un menu en ajax via jquery Problèmes de référencement spécifiques à vos sites 6 Février 2022