Accéder à un élément DOM chargé en ajax

Version imprimable

10/10/2009, 19h49
orgoz

Accéder à un élément DOM chargé en ajax

Bonjour,

J'ai un problème pour accéder à un objet qui a été chargé en ajax. J'ai un div sur ma page, que je remplis en Ajax via OpenLayers.loadURL (équivalent à un load() de jquery).

Je renvoie par cet appel un code html qui contient entre autres un élément <a href="#" id="modifyLink">.

J'essaye d'accéder ensuite à cet élément avec $("#modifyLink") mais forcément cela ne fonctionne pas puisque jquery n'a pas connaissance de cet élément.

Comment faut-il faire pour que jquery puisse retrouver un élément chargé dynamiquement dans une page ?

Merci par avance

Bonsoir.

Voici un exemple, la page principale :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#affiche").load("divChargeable.html", function(){
                $("#divLoadedID").append("<p>Un autre texte de remplisage.</p>");
            });
         });
 
        $(window).ready(function(){
            $("#btnDOM").click(function(){
                var s = [];
 
                $(document.body).children().each(function(i, item){                    
                    s.push("Element n° " + i + " = " + item + ", id = " + item.id);
 
                    if ($(item).children().length > 0) {
                        $(item).children().each(function(j, jtem){
                            s.push("Element n° " + i + "-" + j + " = " + jtem + ", id = " + jtem.id);
                        });
                    }
                });
 
                $("#affiche").append("<p>" + s.join("<br/>") + "</p>");
 
                $("#divLoadedID").css({
                    width:300,
                    height:300,
                    border:"1px solid black"
                });
            });
        });
    </script>
</head>
<body>
    <div id="affiche"></div>
    <button id="btnDOM" type="button">Affiche le DOM</button>
</body>
</html>

et le fichier divChargeable.html :

Code:

1
2
3
4
5
6
7
8
9
 
<body>
    <div id="divLoadedID">
        <p>Une texte de remplissage.</p>
    </div>
    <script type="text/javascript">
        $("#divLoadedID").css({color:"red", fontSize:"2em"});
    </script>
</body>

11/10/2009, 14h22
orgoz

Merci pour l'exemple.

Malheureusement, j'ai l'impression que ce type de chose ne soit pas applicable dans mon cas.
J'ai l'impression que l'utilisation conjointe de jQuery et d'OpenLayers pose quelques soucis, que jQuery n'a pas connaissance des nouveaux éléments générés par les fonctions d'OpenLayers (comme l'ajout de popup par exemple).

Je ne connais pas le fonctionnement préçis de jQuery mais je suppose qu'il contient une sorte de listing des éléments chargés dans la page, non ? Et qu'à chaque appel à la méthode load(), il ajoute les nouveaux éléments dans son listing pour pouvoir y accéder ultérieurement, comme dans l'exemple ci-dessus ? Si c'est cela, le fait que j'ajoute des éléments grâce à OpenLayers ne permettrait pas à jQuery de garder son listing "à jour".

Peut-être que je me trompe complètement, mais c'est l'impression que cela me donne.
11/10/2009, 15h24
Bovino

Non, ce n'est pas ça.
jQuery (plus exactement JavaScript dont jQuery est une extension) à accès à l'ensemble d'un document HTML tel qu'il est affiché via le DOM.
Si tu ajoutes du contenu, tu modifies le DOM et JavaScript (donc jQuery) a totalement accès au contenu ajouté.
En revanche, tu parles de popup, s'il s'agit de popup "HTML" (ouverte via un window.open() ou un attribut target="_blank"), dans ce cas, il s'agit d'un problème de contexte que tu peux résoudre avec les méthode referrer, parent ou top de l'objet Window.
11/10/2009, 17h04
orgoz

Merci pour vos réponses qui m'ont apporté confirmation que le problème venait de mon code et pas d'autre chose.

Je l'ai un peu amère car j'ai finalement trouvé le problème, qui ne venait uniquement de moi : j'avais mal placé l'appel $("#modifyLink").click()... il était dans le document.ready() alors que mon lien portant cet id n'existait pas encore dans le DOM ! J'ai donc déplacé tout cela et ça fonctionne beaucoup mieux.

C'était très idiot comme problème mais j'ai bloqué dessus pendant un certain temps, le fait de simplement poser le problème à l'écrit (j'étais en train de répondre à ce sujet en expliquant précisément mon problème avec des bouts de code) permet des fois de se rendre compte de chose très bêtes que l'on ne voit pas autrement...

Désolé pour le dérangement inutile et merci pour vos réponses.
11/01/2010, 09h44
danielhagnoul

Bonjour.

Il faut utiliser $(window).load() et non $(window).ready()

La nouvelle documentation sur l’API jQuery 1.4 est très claire sur ce point.

L’événement ready est exclusivement destiné à l’usage suivant :

Code:

$(document).ready(function(){…});

ou

Code:

$(fonction(){…});

dans sa forme abrégée.

Pour window nous devons, et nous aurions déjà dû sous jQuery 1.3.2, utilisez l’événement load :

Code:

$(window).load(fonction(){…});

Il n’y a pas de forme abrégée.