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:
    642
    J'aime reçus:
    2
    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:
    8 722
    J'aime reçus:
    232
    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:
    642
    J'aime reçus:
    2
    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:
    642
    J'aime reçus:
    2
    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:
    642
    J'aime reçus:
    2
    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:
    642
    J'aime reçus:
    2
    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:
    642
    J'aime reçus:
    2
    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 échappement code HTML Développement d'un site Web ou d'une appli mobile Hier à 22:25
Problème de caractères dans l'outil d'analyse des balises h1 h2 h3 Rédaction web et référencement 4 Août 2019
Problème chez OVH pour renouveler les IP Demandes d'avis et de conseils sur vos sites 2 Août 2019
WordPress Problème balise h2 Panier Problèmes de référencement spécifiques à vos sites 28 Juillet 2019
Problème SERP Google MyBusiness Problèmes de référencement spécifiques à vos sites 23 Juillet 2019
Problème de description dans les serps Problèmes de référencement spécifiques à vos sites 19 Juillet 2019
Problème Ergonomie Mobile Problèmes de référencement spécifiques à vos sites 5 Juillet 2019
Search Console Problème indexation page produit - prestashop 1.6 Débuter en référencement 25 Juin 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice