InnerHTML + <form>. Resultat incomprehensible

Signaler
Messages postés
25
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
6 juin 2007
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Coucou,
voila, j'ai un probleme.
Je ne vais pas rentrer dans le pourquoi je dois faire ca, car ca va etre trop long et inutil
En gros, je recupere un formulaire dans mon tableau grace à Ajax liquide vaisselle pour l'afficher sur une autre page, et je desire faire :

            ajout.innerHTML = tableau[1];
            alert(ajout.innerHTML);
            alert(tableau[1]);


Le probleme, c'est que les alert n'ont pas le meme resultat.. le innerHTML ne contient pas les balises <form> alors qu'elles sont dans le tableau..
J'utilise un <formulaire> pour pouvoir avoir un et faire un envoi "transparent" pour l'utilisateur (avec une iframe cachée). Tous fonctionne.. sauf quand j'ajoute un nouveau bloc..

J'ai cherché toute l'apres midi.. Et je n'ai rien trouvé..

Si quelqu'un peut eclairer ma lentairne se serai sympa.

Merci ;)

6 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
Bonjour,

    on peut voir le htm ? ou alors il faut qu'on le fasse
        ( au risque d'ailleurs que cela ne corresponde pas )
    enfin... un extrait.. le strict nécessaire, pas trop de lignes,
       sinon ça rebute.

    fais nous un ch'tit exemple quoi. complet mais succint.

<hr />


Cordialement            Bul     [mon Site]     [M'écrire]



<hr />
Messages postés
25
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
6 juin 2007

Voici donc du code (désolé, je mets un gros bloc, car j'ai fais des teste en réduisant le code.. et sa fonctionne...)

<hr size="2" width="100%" />ajoutProduit.php :

echo $id_max . 'idmax';
?>
            <tr id="trProduit<?php echo $id_max;?>">
              <td  height="30" colspan="2" >
                                    ----

                    nom,
                                         
" style="display:block">
                        " id="editeurProduitTitre<?php echo $id_max;?>" value="" class="champs" size="60"/>
                     

                     
" style="display:none">
                     

                   ,
                                            ');" value="sauvegarder" class="bouton" />
                       

                        ');" value="supprimer" class="bouton"/>
                       

                   ,
                 
                  ----

                    description,
                                         
">
                     

                     ,
                 
                  ----

                    photo,
                                           
" style="display:none">
                           
                       

                       
" style="display:block">
                            " style="display:none;" src="about:blank">
                            <form action="insertPhoto.php" enctype="multipart/form-data" method="post" target="hiddenphoto<?php echo $id_max;?>">
                                " id="editeurProduitPhoto<?php echo $id_max;?>" name="fichier<?php echo $id_max;?>" type="file" size="36" class="champs" value="" onchange="submit();" />
                                " />
                                " />
                            </form>
                           
                            Dimension maximales (600px X 600px - taille 500Ko)- format JPG uniquement
                            " type="button" class="bouton" value="Supprimer le logo" onclick="supprimeLogo('<?php echo $id_max;?>');" />
                       

                   ,
                 
               

              </td>
            </tr>
            <tr id="trProduit2<?php echo $id_max; ?>">
              <td  height="30" class="texte_tablo"  >&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
<hr size="2" width="100%" />

Si dessus, le code que je vais insérer avec un innerHTML dans un <hr size=\"2\" width=\"100%\" />
modifEntreprise.php
        <table width=\"80%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" id=\"ajoutProduit\">
       

code javascript de modifEntreprise.php
function ajout(type, entreprise) {
    var xhr_object = xhr_start();
   
    var methode = "POST";
    var filename = "ajout" + type + ".php";
    var data = "entreprise=" + entreprise;

    send(xhr_object, methode, filename, data);

    xhr_object.onreadystatechange = function() {        if(xhr_object.readyState 4 && xhr_object.status 200) {
            var reponse = xhr_object.responseText;
            var ajout = document.getElementById('ajout' + type);

            var reg = new RegExp("idmax", "g");
            var tableau = reponse.split(reg);
            var id = tableau[0];

            ajout.innerHTML = tableau[1];
            tinyMCE.execCommand('mceAddControl', true, 'divAffiche' + type + id);
        }
    }
}
<hr size="2" width="100%" />

xhr_start(); etsend(); sont deux méthodes Ajax (la première renvoi un objet XmlHttpRequest, et l'autre s'occupe de communiquer avec une page extérieur).
reponse.split(reg); me permet de récupérer la valeur $id_max du fichier ajoutProduit.php

Je n'utilise pas de librairie particulière, et j'ai du adapter la partie Ajax sur un code qui était déjà en place et qui à la base utilise uniquement des tableaux imbriquer de partout (en entreprise.. on dépend d'autres personnes...)

Le problème, c'est que la balise <form> (ainsi que la fermante) de la page ajouProduit.php n'est pas conservée avec le innerHTML..

J'avais lu sur le net qu'une balise <form> dans un bloc n'était pas conservée avec FireFox (car respect du W3C), alors j'ai regarder si mon formulaire était contenu dans un bloc ou il n'avait rien à faire là... mais.. je ne trouve pas..

Voila, j'ai fais plusieurs recherches, mais je ne trouve pas mon problème, j'ai fait aussi pas mal de teste en allégeant un max le code de ajoutProduit.php, et sa fonctionne.. Donc je suis un perdu.

Merci à vous.
Messages postés
25
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
6 juin 2007

Je viens de trouvé l'erreur
Dans la page modifEntreprise, il y'a un formulaire qui encadre toute la page, et je n'avais pas penser à le regarder..

Donc voila, un formulaire imbriquer dans un autre formulaire = problème..
Pourquoi quand je plaçais le code de ajoutProduit.php directement sur la page sa fonctionnait, et quand je passais par le innerHTML ca virait les balises <form>.. sûrement que le innerHTML "filtre" les données, alors que quand on fait un simple affichage..

Bon, maintenant faut que je trouve une parade :/

C'est toujours quand je demande de l'aide que je trouve une solution.. J'avais passer une journée à chercher hier.. rahlala..

Merci quand même :p
Si vous avez une explication à pourquoi les balises <form> sont conservés quand on ne passe pas par le innerHTML, sa m'intéresse..
Messages postés
25
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
6 juin 2007

En fait, j'avais déjà fermer la balise <form> avant l'endroit ou j'insert mon nouau formulaire..

Je vais finir par trouver !
Messages postés
25
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
6 juin 2007

J'm'auto reponds..
Le probleme venait du fait qu'il manquait une balise fermant </table> bien avant plus haut dans le code...

Des fois.. pfui, a quand du code propre !

Ps : merci :p
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
plusieurs choses...

    _ >>un formulaire imbriquer dans un autre formulaire = problème..
    oui

   _ function ajout(type, entreprise) {
        et var ajout = document.getElementById('ajout' + type);
        une variable et une fonction avec le même name, ça pose problème.

   _ innerHTML d'un tableau ?
       t'es sûr que ça marche ?

    et il y a des " transformations " avec innerHTML,
        mais <form> ne disparait pas  ( enfin, dans un div ! )

<textarea id ="titi"></textarea>
<script type="text/javascript">
    var tmp="<form></form>";
    document.getElementById("toto").innerHTML=tmp;
    document.getElementById("titi").value=tmp;
    alert(document.getElementById("toto").innerHTML);
</script>

    à mon avis, ne gère pas le innerHTML d'un tableau
    met le tableau dans un div, ou ajoutes des lignes à ce tableau
    ou... ( coté php ou javascript d'ailleurs ).
    simplifie un peu.

<hr />
Cordialement                Bul     [mon Site]     [M'écrire]
<hr />