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

AJAX Discussion :

[AJAX] createElement, getElementById, cache


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Octobre 2007
    Messages
    84
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 84
    Par défaut [AJAX] createElement, getElementById, cache
    Bonjour,

    Je rencontre un petit problème :

    Je dispose d'une fonction qui me permet d'ajouter une div à la volée avec un id précis (bloc_div_1, blod_div_2, etc.) sans recharger la page.

    Le problème est que getElementById(nouveau_bloc) renvoie "null" tant que la page n'a pas été rechargé.

    Est-il possible de spécifier au getElementById d'effectuer la recherche dans la page en cours et non pas dans la page "cachée" ?

    Merci.

  2. #2
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 56

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Salut,

    C'est peut-être plutôt ta fonction qu'il faudrait revoir , non ?

    ERE

  3. #3
    Membre confirmé
    Inscrit en
    Octobre 2007
    Messages
    84
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 84
    Par défaut
    C'est fort possible , mais étant débutant en javascript je ne voit pas comment je pourrais faire.

    Bien sur je pourrais recharger la page a chaque ajout de nouvelle div, mais l' "intérêt" de cette application AJAX est de pouvoir faire ses traitements sans rechargement.

    Donc si qqun a une idée je suis preneur !

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Salut,
    Est-il possible de spécifier au getElementById d'effectuer la recherche dans la page en cours et non pas dans la page "cachée" ?
    J'ai rien compris
    getElementById effectue une recherche par rapport au DOM... le cache n'a rien à voir là dedans
    J'imagine comme emmanuel.remy que ton problème vient de ta fonction, mais sans la voir il est impossible de t'aider plus.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Ce type de problème est parfois causé par l'insertion "brutale" d'un fragment html (je veux dire par l'intermédiaire d'innerHTML) plutôt que par le DOM, ce qui provoque parfois des erreurs lors de la récupération des éléments ajoutés.

    Conclusion : comme l'ont dit les camarades qui m'ont précédé... montre nous ta fonction d'insertion ^^

  6. #6
    Membre confirmé
    Inscrit en
    Octobre 2007
    Messages
    84
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 84
    Par défaut
    Bon, je vais rééxpliquer car apparament a vouloir trop simplifier le problème je n'ai pas été clair :

    Je développe une application AJAX permettant de mettre à jour un fichier XML ayant une DTD bien précise.

    Je parse mon fichier XML (avec PHP), je l'affiche sous forme de formulaire HTML. AJAX me permet d'ajouter des éléments a mon formulaire puis de sauvegarder le formulaire dans mon fichier XML via une fonction save() qui utilise XMLHttpRequest.

    Pour retirer le clou...
    Mais de toute façon si tu recharges ta page tu ne retrouveras pas les div précédentes chargées à la volées donc cela ne fonctionnera pas non plus...
    En rechargeant la page je retrouve parfaitement les div précédemment créées étant données qu'elles ont été sauvegardé dans le fichier XML.

    Tout ton problème est justement la notion de avec un id précis: si c'est mal fait tu ne le verras jamais...
    Justement ce n'est pas mal fait car au rechargement de la page les id sont corrects.

    getElementById effectue une recherche par rapport au DOM... le cache n'a rien à voir là dedans
    Là est le problème, j'ai l'impression que les "document.createElement" ne met pas à jour le DOM.

    Conclusion : comme l'ont dit les camarades qui m'ont précédé... montre nous ta fonction d'insertion ^^
    Voilà :
    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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
     
    function addBrand(id)
    {
    	var li_brand = document.createElement('li');
    	var input_title_brand = document.createElement('input');
    	var input_requete_brand = document.createElement('input');
     
    	input_title_brand.setAttribute("name","level2_titles["+id+"][]");
    	input_title_brand.setAttribute("class","inputText");
    	input_title_brand.setAttribute("value","Brand name");
     
    	input_requete_brand.setAttribute("name","level2_requetes["+id+"][]");
    	input_requete_brand.setAttribute("class","inputText");
    	input_requete_brand.setAttribute("value","Brand requete");
     
    	li_brand.appendChild(input_title_brand);
    	li_brand.appendChild(input_requete_brand);	
     
    	alert(document.getElementById("brand_list_"+id));
    	document.getElementById("brand_list_"+id).appendChild(li_brand);
    }
     
    function addCategory()
    {
    	var li_category = document.createElement('li');
    	li_category.setAttribute("class","category_li");
     
    	var input_title_category = document.createElement('input');
    	input_title_category.setAttribute("name","level1_titles[]");
    	input_title_category.setAttribute("class","inputText");
    	input_title_category.setAttribute("onChange","save()");
    	input_title_category.setAttribute("value","Category name");
     
    	var input_requete_category = document.createElement('input');
    	input_requete_category.setAttribute("class","inputText");
    	input_requete_category.setAttribute("name","level1_requetes[]");
    	input_requete_category.setAttribute("onChange","save()");
    	input_requete_category.setAttribute("value","Category requete");
     
    	var aDelete = document.createElement('a');
     
    	aDelete.setAttribute("href","#");
    	aDelete.setAttribute("onClick","deleteCategory(this.parentNode)");
    	aDelete.appendChild(document.createTextNode("delete"));
     
    	li_category.appendChild(input_title_category);
    	li_category.appendChild(input_requete_category);	
    	li_category.appendChild(aDelete);
     
    	var ul_brand = document.createElement('ul');
    	var li_brand = document.createElement('li');
    	var input_title_brand = document.createElement('input');
    	var input_requete_brand = document.createElement('input');
     
    	var id = document.getElementsByName('level1_titles[]').length;
    	input_title_brand.setAttribute("name","level2_titles["+id+"][]");
    	input_title_brand.setAttribute("class","inputText");
    	input_title_brand.setAttribute("value","Brand name");
     
    	input_requete_brand.setAttribute("name","level2_requetes["+id+"][]");
    	input_requete_brand.setAttribute("class","inputText");
    	input_requete_brand.setAttribute("value","Brand requete");
     
    	var aAddBrand = document.createElement('a');
     
    	aAddBrand.setAttribute("href","#");
    	aAddBrand.setAttribute("onClick","addBrand("+id+")");
    	aAddBrand.appendChild(document.createTextNode("add Brand"));	
     
    	li_brand.appendChild(input_title_brand);
    	li_brand.appendChild(input_requete_brand);	
     
    	ul_brand.appendChild(li_brand);
    	li_category.appendChild(ul_brand);
    	li_category.appendChild(aAddBrand)
     
    	document.getElementById('category_list').appendChild(li_category);
    	save();
    }
    Le problème est lorsque j'effectue un addCategory() suivit d'un addBrand(id). Le addBrand ne trouve pas la catégorie précédemment créé.

    Merci de votre aide

  7. #7
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 56

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Pour enfoncer le clou
    Je dispose d'une fonction qui me permet d'ajouter une div à la volée avec un id précis (bloc_div_1, blod_div_2, etc.) sans recharger la page.
    Tout ton problème est justement la notion de avec un id précis: si c'est mal fait tu ne le verras jamais...

    Le problème est que getElementById(nouveau_bloc) renvoie "null" tant que la page n'a pas été rechargé.
    Mais de toute façon si tu recharges ta page tu ne retrouveras pas les div précédentes chargées à la volées donc cela ne fonctionnera pas non plus...

    ERE

  8. #8
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 56

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Re,

    Si ton id de catégorie est "brand_list_"+id alors je ne vois pas où tu le crées dans addCategory.

    ERE

  9. #9
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Salut,
    Avec
    input_title_brand.setAttribute("name","level2_titles["+id+"][]");
    Tu auras des problèmes sous Internet Explorer
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if(document.all)//Pour IE
    {
    var var input_title_brand = document.createElement('<input name="level2_titles['+id+'][]">');
    }
    else //Pour les autres
    {
      var input_title_brand = document.createElement('input');
      input_title_brand.setAttribute("name","level2_titles["+id+"][]");
    }

  10. #10
    Membre confirmé
    Inscrit en
    Octobre 2007
    Messages
    84
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 84
    Par défaut
    Citation Envoyé par emmanuel.remy Voir le message
    Re,

    Si ton id de catégorie est "brand_list_"+id alors je ne vois pas où tu le crées dans addCategory.

    ERE
    Exact !
    J'ai ajouté
    ul_brand.setAttribute("id","brand_list_"+id);
    et ca a fonctionné.

    Pour ce qui de l'incompatibilité d'IE, je vais vérifier mais ce n'ai pas trop grave car c'est une application qui sera utilisé en interne.

    Je suis désolé de vous avoir fait perdre votre temps.

    Merci de votre aide

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

Discussions similaires

  1. Réponses: 3
    Dernier message: 02/05/2009, 09h03
  2. [AJAX] IE et cache
    Par roduce dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 17/12/2007, 16h35
  3. [AJAX] le getelementbyid qui veut pas
    Par zooffy dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 14/03/2007, 13h46
  4. [AJAX] createElement et lightbox
    Par Malarkey dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 19/01/2007, 11h55
  5. [AJAX] Probleme de cache
    Par BkD35 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 31/12/2006, 14h42

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