IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] CloneNode avec DOM, XHR ne suit pas


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    49
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 49
    Par défaut [DOM] CloneNode avec DOM, XHR ne suit pas
    Bsoir,
    eh oui meme un samedi soir, on se relache pas!

    Alors, j ai eu la bonne idée de creer un formulaire avec la possibilité de le cloner pour faire de la saisie en masse, (des articles en l'occurence).
    D'ailleurs c'est ici même que j ai appris à faire ça avec le DOM!

    Donc ça c'est bon.
    Ensuite sur l'un des champs du formulaire, j'y ai ajouté une requete XMLHTTPREQUEST d'autosuggestion , et là rien ne vas plus!
    C'est à dire que sur le noeud de référence c'est ok, mais pas sur les clones!

    je pense à un problème d'ID qui n'est pas incrementer, et c'est le cas d'ailleurs.
    Mais je sais pas faire, ou plutôt à quel endroit agir?

    1. dans la fonction ajouter() celle qui clone mon formulaire(mon fieldset plutôt). en commentaire j'avais tenter ça:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    function ajouter(){  
    i++;	
    var obj = document.getElementById('field');
    var form = document.getElementById('form1');
    var div = document.getElementById('field_div');
    var field = div.cloneNode(true);/*clonage*/
    var button = document.getElementById('writeroot');
    field.style.display='block';	
    inputs = field.getElementsByTagName('input');
    for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
    //field.id= this.id+i;
    button.parentNode.insertBefore(field,button);
    }
    j'imagine qu en incrementant l'ID, il faudra mofifier l'appel XHR egalement, du genre:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function autosuggestReply() {
    if(xhr.readyState == 4){
    	var response = xhr.responseText;
    	e = document.getElementById('results'+i);
    bon , je vai encore chercher, peut etre à bientot, si vous savez faire, merci

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    49
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 49
    Par défaut
    Voici la nouvelle fonction ajouter():

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    n=0;
    count=1;
    function ajouter(){  
    count++;	
    var obj = document.getElementById('field');
    var form = document.getElementById('form1');
    var div = document.getElementById('field_div');
    var field = div.cloneNode(true);/*clonage*/
    var button = document.getElementById('writeroot');
    div.style.display='block';	
    /*pour que les champs soient vide par la suite*/
    inputs = field.getElementsByTagName('input');
    for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
    /*copie au bon endroit*/
    //form.appendChild(field); 
    //field.id= this.id+i;
    search = document.getElementById('search-q');
     search.id='search-q'+count;
    result=document.getElementById('results');
     result.id='results'+count;
     
     
    button.parentNode.insertBefore(field,button);
    //form.insertBefore(field,button);
    n++ ;
    }
    Donc les ID des input sont bien incrementés, mais au bout de deux clones, j'ai une erreur, "search is null", et en effet, le div de référence a disparu au bout de deux clonages,donc circulez il n'y a plus rien à cloner!!

    et il reste
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <div><input id="id2" /> plus le reste du div </div>
    <div><input id="id3" /> plus le reste du div </div>
    <div><input id="id2" /> plus le reste du div </div>
    notez la double présence de l'id numero 2.

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    1) nommer ue variable form ...
    c'est chercher les ennuis ...

    2) Ensuite au niveau de clonage, changes tu l'id du div cloné ?
    l'id doit etre unique sur la page ...

    3) pour terminier changes tu les names de tes elements...

    Pout ajouter dynamiquement des formulaires, jette plutot un oeil sur ce post :
    http://www.developpez.net/forums/d53...ynamique-form/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    49
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 49
    Par défaut
    merci de t'interessé , car sui paumé,
    1) ok pour la variable (renommée)
    2) Bah non, vu que je fais un clonenode, le div global garde cet id, mais je m'en sers que pour ça!
    3) euh idem pour les names,

    j'ai deja lu ton code sur les form dynamique, mais vu que j'etais partis en mode construction DOM, si je chamboule tout maintenant, ça risque de pas aller.
    D'ailleurs c'est par rapport aux names que ton code est interressant non?

    Donc pr résumé, j ai:
    un div de réference , une fonction ajouter(div), un appel ajax sur un champs text du form(autosuggest)
    et voilà le soucis est bien de replacer la reponseText au bon endroit, et de pouvoir en recuperer les valeurs ensuite!

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    si tu clones ton div ... tu as plusieurs divs avec le même id non ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    49
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 49
    Par défaut
    Exact, code source a l'appui,
    en fait dans la fonction ajouter, j'incrémente que quelques id's (ceux où doivent se placer le retour de la requête ajax).

    dc je devrais incrementer tous les Id's ?

    Par contre je comprend toujours pas pourquoi mon div de réference disparait au bout du deuxième clonage. La protection par 'display:none' semble adequat.
    le form de base
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    <form>
    <div id="field_div" >  
          <fieldset id="field" ><!--style="display:none" -->
          <legend>article à deposer</legend>
     
     <div><p><label>marque</label></p>
     
    	<input name="searchq[]" id="search-q" type="input" onkeyup="javascript:autosuggest(this.id)" autocomplete="off" />
           <input type="hidden" id="cach" name="marque[]" />
    	<div class="update" name="result" id="results"></div>
     
    <a href="popup.php" onclick="window.open(this.href,'popup','width=300,height=250');return false;">ajouter une autre marque </a>
    </div>        
     
    <a href="#" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" >supprimer  </a>
     <input type="hidden" name="test[]" value="" /> </fieldset> </div> 
     
     <span id="writeroot"></span>
     <input type="submit" name="submit" id="submit"value="Valider" /> OU <input name="button" type="button" onclick="ajouter();" value="Article supplémentaire" />  
     
     </form>
    nouvelle fonction ajouter()
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     
    n=0;
    for (var count=0;count<200; count++){
    function ajouter(){  
     
    var obj = document.getElementById('field');
    var frm = document.getElementById('form1');
    var div = document.getElementById('field_div');
    var field = obj.cloneNode(true);/*clonage*/
    var button = document.getElementById('writeroot');
     
    inputs = field.getElementsByTagName('input');
    for(var i = 0; i < inputs.length; ++i) inputs[i].value = "";
     
    var search = document.getElementById('search-q');
         search.id='search-q'+count;
    var marque = document.getElementById('cach');
          marque.id= 'cach'+count;
         result=document.getElementById('results');
         result.id='results'+count;
    obj.style.display='block';	
     
    button.parentNode.insertBefore(field,button);
     
    n++ ;
    } }
    @++

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DOM] erreur avec DOM PHP5
    Par opeo dans le forum Bibliothèques et frameworks
    Réponses: 13
    Dernier message: 20/07/2007, 16h59
  2. [DOM] difficulté avec DOM
    Par gentil dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 15/03/2007, 17h29
  3. [DOM] Problème de lecture avec DOM
    Par samios dans le forum Format d'échange (XML, JSON...)
    Réponses: 5
    Dernier message: 29/09/2004, 15h58
  4. [DOM] Accès au contenu textuel d'un noeud avec DOM
    Par comexe2 dans le forum Format d'échange (XML, JSON...)
    Réponses: 2
    Dernier message: 16/07/2004, 15h41
  5. [DOM] Comment lire de l'HTML avec DOM ?
    Par djodjo dans le forum Format d'échange (XML, JSON...)
    Réponses: 2
    Dernier message: 20/04/2004, 15h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo