11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour

Mon problème est pas des plus simples à expliquer.
Je vais diviser en plusieurs étapes pour bien comprendre ce qui ce passe :

Etape 1 : Mise en situation
Mon histoire commence avec une chaine de caractère en javascript contenant du code xHTML. Plus précisément un formulaire tout bete de login mot de passe.

chaine='<div id="membre">'
+'<form action="index.php" method="post" id="formConnexion">'
+'<p>'
        +'<label>Pseudo : <input type="text" name="login" value="" /></label><br />'
        +'<label>MDP : <input type="password" name="mdp" value="" /></label><br />'
        +'<input type="button" name="envoie" value="ok" onclick="connexionAjax()" />'
+'</p>'
+'</form>'
+'</div>';


jusque la tout va bien
La suite ba je passe tout ça dans une moulinnette pour l'afficher dans ma page.

innerHTML ne fonctionnant que sous IE j'ai donc fais une fonction qui me permet d'utiliser le DOM pour créé les balises, mettre les attribut etc etc en lui passant la chaine en parametre.
la fonction s'apel DOMinnerHTML(arg1,arg2,arg3,arg4)

le premier argument est al cible, la ou on va ratacher la chaine dans la page, le deuxième argument est la chaine, le troisième si on veu ajouter ou remplacer la chaine (add ou remplace), et le quatrieme argument la cible que l'on veut remplacer.

exemple :
var affichage = docment.getElementById('affichage');
var text = DOMinnerHTML(affichage,chaine,'add','onSenFouOnAjoute');


jusque la tout va bien

Etape2 : la création du formulaire
Je vais pas mettre toute la fonction, mais juste la partie qui nous interesse

for(i=0;i<attribut.length;i++)
{
    if(attribut[i+1])
    {
        //on recupère l'attribut
        var attrTemp=attribut[ i].split(' ')[1];
        var valeurAttrTemp=supprQuote(attribut[i+1].split(' ')[0]);
        if(document.all)//on différencie le cas IE des autre navigateur.        {
            if(attrTemp.substring(0,2)=='on')
                eval('baliseCree.'+attrTemp+' = function()'+valeurAttrTemp+'};'
            else
                baliseCree.setAttribute(attrTemp,valeurAttrTemp);
        }
        else
            baliseCree.setAttribute(attrTemp,valeurAttrTemp);   
    }
}

On peu voir ici que je gère l'insertion des attributs de mes balises.

J'esxplique vite fais, le test que je fais. Je test si le nom de l'attribut est un onEvent, si c'est le cas il faut différentier IE des autres. En effet IE ne va pas focntionner si on utilise une setAttribute, le onevent ne fonctionnera pas (alors qu'ailleur si :euh: )
Donc pour IE on doit utiliser la ligne avec le eval

Etape 3 : le problème
Le problème intervient maintenant.
En effet un évènement généré par le eval (donc pour IE) va executer la fonction.
Par exemple sur un onclick qui va faire un simple alert('blabla'); ça fonctionne. Si on appel une fonction avec des parametres ça fonctionne.
La ou ça ne fonctionne pas c'est l'envois de parametre.
j'explique :
le formualire posède un bouton qui et sur le click du bouton j'apel la fonction connexionAjax.
La je passe a ajax les parametres login mdp que je recupère comme ceci :

login = document.forms['formConnexion'].login.value;
mdp = document.forms['formConnexion'].mdp.value;

et bien avec IE j'ai une erreur javascript comme quoi document.forms['formConnexion'].login a uen valeur null ou inexistante (je suppose donc qu'il va me dire la meme chose pour le mot de passe)
Alors que sous FF ça focntionne parfaitement.

Voila j'espère avoir été assez clair sur l'énnoncer de mon problème.

Merci d'avance pour vos réponse.
Modifié par azimel (02 Jun 2006 - 16:04)
Tu te compliques la vie pour rien : innerHTML, ça fonctionne parfaitement partout en tout cas sur IE et firefox.
azimel a écrit :
innerHTML ne fonctionne pas partout, ce n'est pas une norme w3c.

et name est déprécié du XHTML. si tu mets id="log_in" dans l'input correspondant.
Tu récupère avec :
login = document.getElementById('log_in').value;
Eh ben, y'a à redire sur ces réponses, les gens...

D'abord, effectivement innerHTML n'est pas un standard, et elle n'est pas supporté de façon strictement identique partout. Ceci dit, elle fonctionne effectivement sur MSIE, Mozilla/Firefox, Safari, Opera et Konqueror, entre autres. Elle est d'ailleurs bien plus rapide à l'usage qu'une construction DOM manuelle (de 3 à 30 fois plus rapide, suivant le navigateur).

En revanche, et c'est l'origine du problème d'azimel, IE refuse de l'utiliser pour insérer des éléments form, soi-disant pour des raisons de sécurité (comme si IE n'avait pas des tonnes de failles plus graves, ou qu'il n'autorisait pas les éléments script dans le même cas de figure).

Donc, sous IE, pour injecter comme ceci un formulaire, il faut en effet passer par un scripting DOM (ceci dit, il faudrait vérifier si les classes d'insertion de Prototype ou simplement Element.update (et donc Ajax.Updater) passent quand même, malgré leur utilisation potentielle de innerHTML).

Enfin, au sujet de l'attribut name : oui, mais non ! XHTML 1.0 déprécie l'attribut name uniquement pour les éléments a, applet, form, frame, iframe, img et map, en faveur de l'attribut id. Pour les champs de formulaire, name reste la manière recommandée de nommer le paramètre de requête, c'est-à-dire de définir le nom qui sera transmis au serveur. Rien n'empêche (bien au contraire) de leur coller aussi un id à des fins de CSS et de scripting DOM, car pour ces deux usages c'est en effet id qui est recommandé, et non l'approche document.forms...

Au passage, cette confusion est à l'origine du 2e problème d'azimel, une fois son insertion DOM effectuée : document.forms['xyz'] se base sur l'attribut name, et non id. Pour récupérer son champ, le plus simple est en effet document.getElementById('laValeurDeLAttributIdDuChamp') (ou avec Prototype : $('laValeur...')), et de là, interroger la propriété value (ou avec Prototype toujours, et pour gérer aussi facilement les champs select : $F('laValeur...') directement).
QuentinC a écrit :
Tu te compliques la vie pour rien : innerHTML, ça fonctionne parfaitement partout en tout cas sur IE et firefox.


Bonjour,

innerHTML fonctionne bien partout sauf avec IE la preuve sur mon blog en construction avec des billets écrits en wiki importés par ajax, traduits puis affichés, avec IE je fais une alerte affichant le texte puis il est affiché, avec le code décrit plus bas, sur une autre ID pourquoi une autre ?

Code :

function affiche_html(ajx_nom_id,ajx_toThis)
{
// ajout d'un elément div id
    ajx_ajout_elements(ajx_nom_id);

    var ajx_ajout_id = "ajx_" + ajx_nom_id;

    ajx_toThis = ajx_toThis.replace(/<html>/,"");

 try {
    if (document.getElementById)
    {
      document.getElementById(ajx_ajout_id).innerHTML = ajx_toThis;
    }
    else if (document.all)
    {
      document.all[ajx_ajout_id].innerHTML = ajx_toThis;
    }
  } catch(e) {
    alert("Texte impossible à afficher :\n" + ajx_toThis);
    var sHTML="<p>";
    var sScript="";
    sScript = sScript + ajx_toThis;
    sScript = sScript + "</p>";
    sidebar.innerHTML = sHTML + sScript;
  }
}


Instruction IE permettant d'afficher du html sans peur

Le nom de l'id doit être en dur ici sidebar mais pas le nom souhaité qui est celui du billet à afficher pourquoi ?

   
 var sHTML="<p>";
 var sScript="";
 sScript = sScript + ajx_toThis;
 sScript = sScript + "</p>";
sidebar.innerHTML = sHTML + sScript;


ajx_toThis est la zone de donnée à afficher.
sidebar est le nom en dur de l'id l'instruction n'accepte pas de variable.

C'est une solution qui fonctionne.

Salutations.

JPA
Mon blog un seul billet en test dont le texte ne correspond pas au titre.
http://le.scenariste.free.fr/dc2/ <modération>lien corrigé</modération>
PS : voici le code donné en exemple :
<HTML>
<SCRIPT>
function insertScript(){
    var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
    var sScript="<SCRIPT DEFER>";
    sScript = sScript + "function go2(){ alert('Hello from inserted script.') }";
    sScript = sScript + "</SCRIPT" + ">";
    ScriptDiv.innerHTML = sHTML + sScript;
}    
</SCRIPT>
<BODY onload="insertScript();">
    <DIV ID="ScriptDiv"></DIV>
</BODY>
</HTML>

Sur le site Micosoft
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerHTML.asp <modération>lien corrigé</modération>
Modifié par Laurent Denis (26 Aug 2006 - 12:25)
Modérateur
Salut,

odinh01 a écrit :
innerHTML fonctionne bien partout sauf avec IE (...)
mmh... non. Pas sur mon téléphone par exemple... Smiley cligne

odinh01 a écrit :
(...) la preuve sur mon blog en construction avec des billets écrits en wiki importés par ajax, traduits puis affichés, (...)
Pourquoi faire simple quand on peut faire compliqué ?! Smiley biggol
Et quand on n'a pas javascript, comment fait-on ?

Et les tests des méthodes que tu emploies, où sont-ils ? Je ne les vois pas dans ton script... Si je comprends bien, tu donnes l'accès à ce script aux navigateurs qui ne savent pas les interpréter.

Dernières questions... Où se trouve la partie codée en dur ? Tu commences par l'Ajax ? L'accessibilité a-t-elle une petite place dans ta page ?