Manipuler DOM après méthode .load()
Bonjour à tous !
Voici mon problème :
Je possède une page très simple :
1) une bannière en position fixed :
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
| <div id="header">
<div id="choice">
<div class="type_view">
<label for="1">
<input type="radio" id="1" name="type" accessKey="html" class="docChoice regular-radio"/><span>HTML</span>
</label>
<label for="2">
<input type="radio" id="2" name="type" accessKey="htmli" class="docChoice regular-radio"/><span>HTML Intermediate</span>
</label>
<label for="3">
<input type="radio" id="3" name="type" accessKey="htmlf" checked="checked" class="docChoice regular-radio checked" /><span>HTML Final</span>
</label>
<button id="displayErrorWindow" style="outline:0" class="ui-state-error">Display error window</button>
<div id="errorWindow">
<span class="tips">You can move and resize this window</span><hr/><br/>
<ul>
<% for (Details dtl : grp.getAllDetailsError() ){%>
<li>
<a href="#" onclick=<%="\"javascsript:$('html, body').animate({scrollTop: (($('#parent" + dtl.getIndex() + "').offset().top)-(($('#header').height()) + 20)) }, 250);\""%>>
<%=dtl.getLeftParag()%>
</a>
</li>
ID BLOC ERREUR : <%="parent" + dtl.getIndex()%><br/><br/>
<%}%>
</ul>
</div>
</div>
<div class="lang-selection">
Reference language :<br/>
<ul class="language_select referenceLg">
<% if ( allDocumentLgs != null ){
for (DocumentLg dlg : allDocumentLgs) {%>
<li class="clickable" ><a href="#"><%=dlg.getDocLanguage().getIsoCode() %></a></li>
<%}%>
<%
}else{%>
<li><%=jiraMasterIssueKey%></li>
<%}%>
</ul>
<br/><br/>
Comparison language :<br/>
<ul class="language_select comparisonLg">
<% if ( allDocumentLgs != null ){
for (DocumentLg dlg : allDocumentLgs) {%>
<li class="clickable" ><a href="#"><%=dlg.getDocLanguage().getIsoCode() %></a></li>
<%}%>
<%}else{%>
<li><%=jiraMasterIssueKey%></li>
<%}%>
<button onclick="javascript:generate();" type="button" class="generate">Compare: <%=idPackage %></button>
</ul>
</div>
</div>
</div> |
Ne prêtez pas attention au scriptlet, c'est une page JSP donc ce code n'influe pas sur mon problème.
2) Mon contenu, dans un div #content :
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
| <div id="content">
<%
for (Details dtl : grp.getAllDetails() ){
int count =1;
int id = dtl.getIndex();
if(dtl.hasError()) {
%>
<div id=<%="parent" + id %> class="inline error" dir="ltr" >
<div id=<%="child" + id + count %> class="child document">
<p><%=dtl.getLeftParag ()%></p>
</div>
<div id=<%="child" + id + (count + 1) %> class="child identifiant">
<p><%=dtl.getLeftDetails()%></p>
</div>
<div id=<%="child" + id + (count + 2) %> class="child identifiant">
<p><%=dtl.getRightDetails()%></p>
</div>
<div id=<%="child" + id + (count + 3) %> class="child document">
<p><%=dtl.getRightParag ()%></p>
</div>
</div>
<%} else {%>
<div id=<%="parent" + id %> class="inline noError" dir="ltr" >
<div id=<%="child" + id + count %> class="child document">
<p><%=dtl.getLeftParag ()%></p>
</div>
<div id=<%="child" + id + (count + 1) %> class="child identifiant">
<p><%=dtl.getLeftDetails()%></p>
</div>
<div id=<%="child" + id + (count + 2) %> class="child identifiant">
<p><%=dtl.getRightDetails()%></p>
</div>
<div id=<%="child" + id + (count +3 ) %> class="child document">
<p><%=dtl.getRightParag ()%></p>
</div>
</div>
<%}
}%>
</div>
</div> |
J'ai donc sur ma bannière, un bouton "comparer" (button.generate) qui génère du contenu dans mon div#content.
Je fais cette partie en jQuery :
Code:
1
2
3
| $('#comparator').load("document.do?action=handleCompareFinal&jiraIssueKey=" + <%="\""+jiraMasterIssueKey+"\""%> + "&lgSrc=" + lgSrc + "&lgTg=" + lgTg + "&methodType=" + methodType + " #content", function () {
findErrors();
}); |
Enfin, dans ma bannière, j'ai ajouté le widget Dialog Window de jQuery UI : https://jqueryui.com/dialog/
Cette fenêtre s'ouvre lors du clic sur le bouton#errorWindow.
Mon problème est le suivant :
Par défaut, au premier accès, ma page ne possède pas de contenu, ou juste une phrase précisant à l'utilisateur les actions à effectuer (cocher des langues et cliquer sur le bouton de comparaison). Ensuite, lorsque l'utilisateur clic sur ce bouton "comparer" (bouton.generate), j'exécute ma fonction qui utilise la méthode .load() de jQuery.
Vous constaterez qu'il y a une fonction de callback dans cette méthode : cette fonction me permet d'ajouter des liens ancrés dans la fenêtre d'erreur. Je voudrais maintenant que ces liens ancrés fonctionnent, j'ai donc décidé d'utiliser à nouveau jQuery pour permettre l'animation. Pour résumer, des erreurs sont répertoriés dans mon DOM par un span possédant une classe .error ! Ensuite, je charge des liens dans la fenêtre d'erreur pour animer un scroll vers ces erreurs. CEPENDANT, il semblerait que les span.erreur n'existent pas (et donc cette fenêtre d'erreur n'aurait pas le nouveau DOM ..?)
Au cas où cela vous serait utile, voici ma fonction d'ancrage dans la fenêtre d'erreurs :
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
|
function findErrors() {
if($("span.refError").length > 0) {
$("span.refError").parent().closest("div.inline").css({
"border": "2px solid rgb(205, 10, 10)",
"border-radius": "8px",
"margin": "12px 0px",
});
$("span.refError").css({
"border": "3px solid red",
"padding": "2px",
"font-weight": "bold",
"display": "inline-block",
});
var count = 0;
$("span.refError").each(function() {
count++;
$("#errorWindow").append("<a href=\"#\" class='linkToErr" + count + "'>Error " + count + "</a><br/>");
$("a.linkToErr" + count).click(function () {
$('#content').animate({scrollTop: (($("span.err"+count)).offset().top)-(($('#header').height()) + 20) }, 10);
});
});
}
} |
Dernière précision, en utilisant la console de développeur des browser, j'ai bel et bien le "nouveau DOM" (celui qui est chargé après avoir cliqué sur le bouton comparer), mais en faisant un clic droit sur la page puis "View Source", je possède l'ancien DOM (le vide). Je pense donc qu'en chargeant la nouvelle page dans un DIV, le header ayant été présent à ce moment là, n'a enregistré que ce DOM. Comment lui montrer que ce dernier à été mis à jour ?
Merci de votre aide, j'espère avoir été assez clair :D !
Nexi.
EDIT :
J'ai finalement réussi à résoudre mon problème en mettant l'événement onclick directement dans la balise <a>, comme ceci :
Code:
$("#errorWindow").append("<a href=\"#\" onclick=\"javascript:$('html, body').animate({scrollTop: (($('span.err"+ count +"')).offset().top)-(($('#header').height()) + 20) }, 10);\"> Error " + count + "</a><br/>");
