begin process at 2012 02 12 19:35:32
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

Probleme avec IE et Opera


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Probleme avec IE et Opera

vendredi 24 avril 2009 à 23:16:07 | Probleme avec IE et Opera

SuperChouquette

Bonjour, je suis débutant et je tente de faire un script qui permette d'effectuer une recherche dans une liste, celui- ci fonctionne parfaitement sous Mozilla Firefox et sous Safari mais il ne fonctionne pas correctement sous internet explorer et opéra, pourriez vous m'aider ? je ne sais pas du tout à quoi cela est du.

Vous pouvez tester le script à cet adresse :
http://www.chouquette.fr/PB-IE_OPERA.html



et voici le code source :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function remplacer(letexteModif,motif)
{
    positionmotif = letexteModif.search(motif);
    if(positionmotif != -1)
    {
        partieAvantMotif = letexteModif.substring(0, positionmotif);
        positionmotif2 = positionmotif + motif.length;
        positionmotif3 = letexteModif.length;
        partieApresMotif =     letexteModif.substring(positionmotif2 , positionmotif3);
        retourSanMotif = partieAvantMotif + partieApresMotif;
    }
    else
    {
        retourSanMotif = letexteModif;
    }
        
return retourSanMotif;
}

function recherche()
{
    if (document.getElementById('recherchechamp').value == '' || document.getElementById('recherchechamp').value == ' ')
    {
        i =0;
        while(document.getElementById('userNom_'+i).innerHTML != "555FINLISTEMEMBREINVITE555" && i < 5000)
        {
            var texte = document.getElementById('userNom_'+i).innerHTML;
            texte = texte.replace("<strong>", "");
            texte = texte.replace("</strong>", "");
             document.getElementById('userNom_'+i).innerHTML = texte;
            document.getElementById('userHTML_'+i).style.display='block';
            i++;
        }

    }
    else
    {
        i =0;
        while(document.getElementById('userNom_'+i).innerHTML != "555FINLISTEMEMBREINVITE555" && i < 5000)
        {
            texte = document.getElementById('userNom_'+i).innerHTML;
            texte = remplacer(texte,"<strong>");
            texte = remplacer(texte,"</strong>");
             document.getElementById('userNom_'+i).innerHTML = texte;
            document.getElementById('userHTML_'+i).style.display='block';
            
            textePetit = texte;
            textePetit = textePetit.toLowerCase();
            rechercheValue =  document.getElementById('recherchechamp').value;
            rechercheValue = rechercheValue.toLowerCase();
            position = textePetit.search(rechercheValue);
            
            
            if(position != -1)
            {
                partie1 = texte.substring(0, position);
                position2 = position + rechercheValue.length;
                partie2 = texte.substring(position,position2);
                position3 = texte.length;
                partie3 = texte.substring(position2,position3);
                
                texteFinal = partie1 + "<strong>" + partie2 + "</strong>" + partie3;
                                
                document.getElementById('userNom_'+i).innerHTML = texteFinal;
                texteFinal = '';
                position2 = 0;
                position3 = 0;
                document.getElementById('userHTML_'+i).style.display='block';
            }
            else
            {
                document.getElementById('userHTML_'+i).style.display='none';
            }
            position = 0;
            i++;
        }
    }
    return 0;
}
</script>
<title>test</title>
</head>
<body>
<input OnKeyUp="recherche()" name="recherchechamp" id="recherchechamp" value="" type="text">
    <div id="listeAmis">
<div id="userHTML_0">
    <input name="utilisateurEnvoi[]" value="537492446" type="checkbox">
    <div id="userNom_0">
        Findus Findus
    </div>
    <br>
</div><div id="userHTML_1">

    <input name="utilisateurEnvoi[]" value="559987955" type="checkbox">
    <div id="userNom_1">
        Alligator
    </div>
    <br>
</div><div id="userHTML_2">
    <input name="utilisateurEnvoi[]" value="565235615" type="checkbox">
    <div id="userNom_2">
        Pasteque
    </div>

    <br>
</div><div id="userHTML_3">
    <input name="utilisateurEnvoi[]" value="597135666" type="checkbox">
    <div id="userNom_3">
        Ananas
    </div>
    <br>
</div><div id="userHTML_4">
    <input name="utilisateurEnvoi[]" value="642218995" type="checkbox">
    <div id="userNom_4">
        Concombre
    </div>
    <br>
</div><div id="userHTML_5">
    <input name="utilisateurEnvoi[]" value="659490306" type="checkbox">
    <div id="userNom_5">
        Danielle Evenou
    </div>
    <br>
</div>
<div id="userNom_83" style="display: none;">555FINLISTEMEMBREINVITE555</div>    </div>

</body>
</html>



Merci !
samedi 25 avril 2009 à 10:48:37 | Re : Probleme avec IE et Opera

Bul3

Membre Club
Réponse acceptée !


Bonjour,
tu as la même erreur avec les autres navigateurs
la différence c'est qu'ils continuent malgré tout,
    IE et Opera s'arrêtent
tu testes ocument.getElementById('userNom_'+i).innerHTML !=
      "555FINLISTEMEMBREINVITE555" && i < 5000
or après <div id="userHTML_5"> vient <div id="userHTML_83">
    donc sur <div id="userHTML_6">    ben ça plante :!
tu aurais pu (du ?) trouver plus simple pour boucler !

pour pallier ( temporairement !?! ) avec d'utiliser
    document.getElementById('userNom_'+i).innerHTML
teste s'il existe : if ( document.getElementById('userNom_'+i) )...
Cordialement [mon Site] [M'écrire] Bul

au fait, ça aide un ch'tiot peu :
NavigateursQuelques Explications

Chrome
contrôler page actuelle / Options pour développeurs
/ Console Javascript

FireFox
Outils / Console d'erreurs
et mieux : télécharger FireBug

Internet
Explorer
activer le deboggage : Outils/options Internet/Avancés
dans la liste, sous "Navigation" : décocher
o Afficher une notification de chaque erreur de script
o Désactiver le débogage de Scripts (Internet Explorer)
et mieux (pour IE < 8) : télécharger le Debogger IE
voir aussi : DebugBar et Companion JS

K-Meleon
Outils / Console d'erreurs

Opera
Outils / Avancé / Console d'erreurs

Safari
Debug / Show JavaScript Console
° modifier Fichier com.apple.Safari.plist situé dans le
répertoire : Support:\Documents and Settings\utilisateur
\Application Data\Apple Computer\Safari\Preferences\
y ajouter <key>IncludeDebugMenu</key>
<true/>

samedi 25 avril 2009 à 11:41:46 | Re : Probleme avec IE et Opera

Bul3

Membre Club
Réponse acceptée !
var i=0
while ( document.getElementById('userNom_'+i) )
{ traitements;
  i++;
}
doit suffire d'ailleurs ( sans avoir testé/regardé )

samedi 25 avril 2009 à 13:00:53 | Re : Probleme avec IE et Opera

SuperChouquette

Merci beacoup pour ta réponse ! ça m'a aidé et j'avais aussi une autre erreur
Je ne sais pas pourquoi IE et Opéra créaient les <strong> en majuscule donc j'ai du rajouter texte = remplacer(texte,"<STRONG>"); et texte = remplacer(texte,"</STRONG>"); pour enlever ces balise et que ca fonctionne.
samedi 25 avril 2009 à 13:06:53 | Re : Probleme avec IE et Opera

SuperChouquette

Au final pour ceux que ca intéressent, voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">

function remplacer(letexteModif,motif)
{
    positionmotif = letexteModif.indexOf(motif);
    if(positionmotif != -1)
    {
        partieAvantMotif = letexteModif.substring(0, positionmotif);
        positionmotif2 = positionmotif + motif.length;
        positionmotif3 = letexteModif.length;
        partieApresMotif =     letexteModif.substring(positionmotif2 , positionmotif3);
        retourSanMotif = partieAvantMotif + partieApresMotif;
    }
    else
    {
        retourSanMotif = letexteModif;
    }
       
return retourSanMotif;
}

function recherche()
{

    if (document.getElementById('recherchechamp').value == '' || document.getElementById('recherchechamp').value == ' ')
    {
        q =0;
        while(document.getElementById('userNom_'+q))
        {
            var texte = document.getElementById('userNom_'+q).innerHTML
            texte = texte.replace("<strong>", "");
            texte = texte.replace("</strong>", "");
            texte = remplacer(texte,"<STRONG>");
            texte = remplacer(texte,"</STRONG>");
             document.getElementById('userNom_'+q).innerHTML = texte;
            document.getElementById('userHTML_'+q).style.display='block';
            q++;
        }

    }
    else
    {
        z =0;
        while(document.getElementById('userNom_'+z))
        {
            texte = document.getElementById('userNom_'+z).innerHTML;
            texte = remplacer(texte,"<strong>");
            texte = remplacer(texte,"</strong>");
            texte = remplacer(texte,"<STRONG>");
            texte = remplacer(texte,"</STRONG>");
             document.getElementById('userNom_'+z).innerHTML = texte;
            document.getElementById('userHTML_'+z).style.display='block';
           
            textePetit = texte;
            textePetit = textePetit.toLowerCase();
            rechercheValue =  document.getElementById('recherchechamp').value;
            rechercheValue = rechercheValue.toLowerCase();
            position =  textePetit.indexOf(rechercheValue);
           
           
            if(position != -1)
            {
                partie1 = texte.substring(0, position);
                position2 = position + rechercheValue.length;
                partie2 = texte.substring(position,position2);
                position3 = texte.length;
                partie3 = texte.substring(position2,position3);
               
                texteFinal = partie1 + "<strong>" + partie2 + "</strong>" + partie3;
                               
                document.getElementById('userNom_'+z).innerHTML = texteFinal;
                texteFinal = '';
                position2 = 0;
                position3 = 0;
                document.getElementById('userHTML_'+z).style.display='block';
            }
            else
            {
                document.getElementById('userHTML_'+z).style.display='none';
            }
            position = 0;
            z++;
        }
    }
    return 0;
}
</script>
<title>test</title>
</head>
<body>
<input OnKeyUp="recherche()" name="recherchechamp" id="recherchechamp" value="" type="text">
    <div id="listeAmis">
<div id="userHTML_0">
    <input name="utilisateurEnvoi[]" value="537492446" type="checkbox">
    <div id="userNom_0">
        Findus Findus
    </div>
    <br>
</div><div id="userHTML_1">

    <input name="utilisateurEnvoi[]" value="559987955" type="checkbox">
    <div id="userNom_1">
        Alligator
    </div>
    <br>
</div><div id="userHTML_2">
    <input name="utilisateurEnvoi[]" value="565235615" type="checkbox">
    <div id="userNom_2">
        Pasteque
    </div>

    <br>
</div><div id="userHTML_3">
    <input name="utilisateurEnvoi[]" value="597135666" type="checkbox">
    <div id="userNom_3">
        Ananas
    </div>
    <br>
</div><div id="userHTML_4">
    <input name="utilisateurEnvoi[]" value="642218995" type="checkbox">
    <div id="userNom_4">
        Concombre
    </div>
    <br>
</div><div id="userHTML_5">
    <input name="utilisateurEnvoi[]" value="659490306" type="checkbox">
    <div id="userNom_5">
        Danielle Evenou
    </div>
    <br>
</div>
</div>

</body>
</html>
samedi 25 avril 2009 à 13:19:18 | Re : Probleme avec IE et Opera

Bul3

Membre Club
Réponse acceptée !
>>j'ai du rajouter texte = remplacer(texte,"<STRONG>");...
bah.... si tu utilises replace : chaîne.replace(/ce que tu veux/gi,"n'importe quoi");
g : pour toutes les occurrences
i : pour ne pas distinguer les majuscules des minuscules
@+

samedi 25 avril 2009 à 16:14:52 | Re : Probleme avec IE et Opera

SuperChouquette

Merci beaucoup pour ton aide ! vous pouvez tester le code ici : [ Lien ]
et sinon voici le code final :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">

function recherche()
{

    if (document.getElementById('recherchechamp').value == '')
    {
        supprContenu();
        q =0;
        while(document.getElementById('userNom_'+q))
        {
            var texte = document.getElementById('userNom_'+q).innerHTML
            texte = texte.replace(/<strong>/gi,"");
            texte = texte.replace(/<\/strong>/gi,"");
             document.getElementById('userNom_'+q).innerHTML = texte;
            document.getElementById('userHTML_'+q).style.display='block';
            q++;
        }

    }
    else
    {
        texteEntrer();
        z =0;
        while(document.getElementById('userNom_'+z))
        {
            texte = document.getElementById('userNom_'+z).innerHTML;
            texte = texte.replace(/<strong>/gi,"");
            texte = texte.replace(/<\/strong>/gi,"");
             document.getElementById('userNom_'+z).innerHTML = texte;
            document.getElementById('userHTML_'+z).style.display='block';
           
            textePetit = texte;
            textePetit = textePetit.toLowerCase();
            rechercheValue =  document.getElementById('recherchechamp').value;
            rechercheValue = rechercheValue.toLowerCase();
            position =  textePetit.indexOf(rechercheValue);
           
           
            if(position != -1)
            {
                partie1 = texte.substring(0, position);
                position2 = position + rechercheValue.length;
                partie2 = texte.substring(position,position2);
                position3 = texte.length;
                partie3 = texte.substring(position2,position3);
               
                texteFinal = partie1 + "<strong>" + partie2 + "</strong>" + partie3;
                               
                document.getElementById('userNom_'+z).innerHTML = texteFinal;
                texteFinal = '';
                position2 = 0;
                position3 = 0;
                document.getElementById('userHTML_'+z).style.display='block';
            }
            else
            {
                document.getElementById('userHTML_'+z).style.display='none';
            }
            position = 0;
            z++;
        }
    }
    return 0;
}

function texteEntrer()
{
    document.getElementById('croix').style.display='block';
    document.getElementById('recherchechamp').style.borderRight='none';
    document.getElementById('recherchechamp').style.width='176px';
}

function changerFond(idUser, etat)
{
    if(etat == true) {
        document.getElementById('userHTML_'+idUser).style.backgroundColor='#dce1e8';
    }
    else {
        document.getElementById('userHTML_'+idUser).style.backgroundColor='#ffffff';
    }
}

function supprContenu()
{
    document.getElementById('recherchechamp').value='';
    document.getElementById('croix').style.display='none';
    document.getElementById('recherchechamp').style.borderRight='1px solid #bdc7d8';
    document.getElementById('recherchechamp').style.width='192px';
}

function focusRecherche()
{
    document.getElementById('recherchechamp').value='';
    document.getElementById('recherchechamp').style.color='#000000';
}

function blurRecherche()
{
    document.getElementById('recherchechamp').value='Veuillez sair le nom d\'un ami';
    document.getElementById('recherchechamp').style.color='#777777';
}

function cocherDecocher(container_id,state)
 {
  var checkboxes = document.getElementById(container_id).getElementsByTagName('input');
  for (var i=0;i<checkboxes.length;i++)
   {
    if(checkboxes[i].type == 'checkbox')
     {
      checkboxes[i].checked = state;
     }
   }
  return true;
 }
</script>
<style type="text/css">
* {
padding:0;
margin:0;
}

body {
    font-family:Arial, Helvetica, sans-serif;
    padding-top:200px;
    width:100%;
}

#listeAmis {
    clear:both;
    font-size:11px;
    height:114px;
    width:198px;
    border-top:1px solid #bdc7d8;
    border-right:1px solid #bdc7d8;
    border-left:1px solid #bdc7d8;
    border-bottom:2px solid #bdc7d8;
    overflow:auto;
}

#listeAmis strong, #listeAmis STRONG {
    background-color:#dce1e8;
    font-weight:bold;
}

#listeAmis label {
    vertical-align:middle;
    padding-bottom:7px;
    height:12x;
}

#listeAmis div {
    height:19px;
    vertical-align:middle;
}

.rechercheAmis {
    border-top:1px solid #bdc7d8;
    border-right:1px solid #bdc7d8;
    border-left:1px solid #bdc7d8;
    border-bottom:none;
    padding-top:3px;
    padding-left:3px;
    padding-right:3px;
    font-size:11px;
    width:192px;
    float:left;
    height:16px;
    color:#000000;
}

#croix {
    border-top:1px solid #bdc7d8;
    border-right:1px solid #bdc7d8;
    border-left:none;
    border-bottom:none;
    font-weight:bold;
    color:#b1bdd6;
    font-size:10px;
    float:left;
    width:11px;
    height:16px;
    padding-left:5px;
    cursor:pointer;
    padding-top:3px;
    display:none;
}

.bottomForm {
    font-size:11px;
    width:200px;
    text-align:center;
}


.bottomForm input[type=submit] {
    color: #f7f7f7;
    font-weight: normal;
    height:22px;
    font-size:11px;
    background: #3b5998;
    border-top: 1px solid #d9dfea;
    border-left: 1px solid #d9dfea;
    border-right: 1px solid #0e1f5b;
    border-bottom: 1px solid #0e1f5b;
    cursor: pointer;
    margin-top:2px;
    padding: 1px 3px;
}


.formAmis {
    margin-left:auto;
    margin-right:auto;
    width:200px;
}

</style>
<title>Recherche Liste</title>
</head>
<body onload="blurRecherche(); cocherDecocher('listeAmis',false);">
<form action="amis.php" method="post" class="formAmis">
<input OnKeyUp="recherche();" onFocus="focusRecherche();"  Onblur="blurRecherche();" name="recherchechamp" id="recherchechamp" value="" class="rechercheAmis" type="text"><div id="croix" onclick="supprContenu(); recherche();"> X </div>
<div id="listeAmis">
    <div id="userHTML_0">
        <input name="utilisateurEnvoi[]" checked="checked" onclick="changerFond(0,this.checked);" id="user0" value="Marc" type="checkbox">
        <label id="userNom_0" for="user0">Marc</label>
        <br>
    </div>
    <div id="userHTML_1">
        <input name="utilisateurEnvoi[]" onclick="changerFond(1,this.checked);" id="user1" value="Pierre" type="checkbox">
        <label id="userNom_1" for="user1">Pierre</label>
        <br>
    </div>
    <div id="userHTML_2">
        <input name="utilisateurEnvoi[]" onclick="changerFond(2,this.checked);" id="user2" value="Paul" type="checkbox">
        <label id="userNom_2" for="user2">Paul</label>
        <br>
    </div>
    <div id="userHTML_3">
        <input name="utilisateurEnvoi[]" onclick="changerFond(3,this.checked);" id="user3" value="Marie" type="checkbox">
        <label id="userNom_3" for="user3">Marie</label>
        <br>
    </div>
    <div id="userHTML_4">
        <input name="utilisateurEnvoi[]" onclick="changerFond(4,this.checked);" id="user4" value="Jean" type="checkbox">
        <label id="userNom_4" for="user4">Jean</label>
        <br>
    </div>
    <div id="userHTML_5">
        <input name="utilisateurEnvoi[]" onclick="changerFond(5,this.checked);" id="user5" value="Anne" type="checkbox">
        <label id="userNom_5" for="user5">Anne</label>
        <br>
    </div>
    <div id="userHTML_6">
        <input name="utilisateurEnvoi[]" onclick="changerFond(6,this.checked);" id="user6" value="Charles" type="checkbox">
        <label id="userNom_6" for="user6">Charles</label>
        <br>
    </div>
    <div id="userHTML_7">
        <input name="utilisateurEnvoi[]" onclick="changerFond(7,this.checked);" id="user7" value="Ines" type="checkbox">
        <label id="userNom_7" for="user7">Ines</label>
        <br>
    </div>
</div>
<div class="bottomForm">
    <a href="#" onclick="cocherDecocher('listeAmis',true);">Tout cocher</a> - <a href="#" onclick="cocherDecocher('listeAmis',false);">Tout décocher</a>
    <br />
    <input name="envoyer" type="submit" id="envoyer" value="Envoyer !"  />
</div>
</form>
</body>
</html>
samedi 25 avril 2009 à 16:25:24 | Re : Probleme avec IE et Opera

Bul3

Membre Club
nickel si ça baigne...
en général ( mais je sais que généralement il est stupide de généraliser )
on fait cela avec un select.
"adaptation" intéressante, mon foie.
@+



Cette discussion est classée dans : texte, document, getelementbyid, innerhtml, usernom


Répondre à ce message

Sujets en rapport avec ce message

pb de getElementById [ par kidpigeyre ] for(var i=0;i { document.getElementById("tete")[i].innerHTML=document.getElementById("tete")[i].innerHTML.substr(0,3); }voila ça ça ne ma obj.innerHTML [ par fgingat ] Bonjour à tous .. Voila mon premier poste concerne un soucis de comprehension de la methode de fonctionnement de obj.innerHTML  A savoir sur une page Problème avec la fonction switch [ par stiml ] Bonjour, Je sais qu'on a posté plusieurs questions sur ce sujet mais je n'est pas trouvée ma réponseMerci de m'éclairer sur cette fonction qui ne fonc couleur, radiobutton, onclick [ par gabs77 ] slt, j'ai un souci avec mon formulairej'ai un formulaire de base auquel j'ai des formulaires spécifiques par rapport a des choix effectuer dans ce for Pb AJAX sous IE [ par Emcy ] bonjour,j'ai créé un mini projet où j'ai 3 fichiers :- 1 fichier html : pour affichier ma page- 1 fichier javascript : script lié à ma page html- 1 fi petite question sur document.body.innerHTML [ par Bestdoud ] Bonjour,j'utilise la focntion document.body.innerHTML pour ajouter du texte dans ma page. et je me suis aperçu qu' à chaque ajout, la page était comme document.body vs document.write [ par arnaultp ] Bonjour à tous!Je n'arrive toujours pas très bien à comprendre ce que font document.body et document.write.Cela fait seulement 2 semaines que je code Texte au survol d'une image [ par Shagrath69 ] Bonjour à tous,pour le site que je suis en train de développer j'ai besoin d'un texte qui s'affiche au survol d'une image.Ne connaissant rien au JS, j Probleme avec IE [ par theopil ] Voila sous firefox sa marche niquel , mes pas sous IE , et j tourne en rond et je ne trouve pas l'erreurfunction affi Javascript et IE 6 ou 7 [ par memento59800900 ] Bonsoir à toutes et à tous !J'ai créé une page web (entre autres) pour mon boulot sous firefox, et seule une partie du javascript fonctionne.Je pense


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,764 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales