Manipuler DOM après méthode .load()

**Nexii** · 24/07/2015, 08h48

Bonjour à tous !

Voici mon problème :

Je possède une page très simple :
1) une bannière en position fixed :

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
<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 :

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
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

generate()

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 :

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
 
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

!

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#errorWindow").append("<a href=\"#\" onclick=\"javascript:$('html, body').animate({scrollTop: (($('span.err"+ count +"')).offset().top)-(($('#header').height()) + 20) }, 10);\"> Error " + count + "</a><br/>");

**mathieu** · 24/07/2015, 19h57

le 2e argument de "load" n'est pas la fonction à lancer au chargement mais une variable contenant des données à envoyer au serveur
la fonction est à mettre dans le 3e argument : http://api.jquery.com/load/

**Nexii** · 24/07/2015, 21h16

Je n'ai qu'un seul argument comme tu peux le constater.
La fonction a exécuté ne se fait pas en la plaçant en 2ème argument, mais en utilisant la fonction de callback de la méthode .load()

Édit :
En effet le 2ème argument est bien le callback, mais c'est bien ce que je fais.. Je ne comprend ta reponse ^^

**mathieu** · 24/07/2015, 22h43

je faisais une remarque par rapport à ce qui est indiqué dans la documentation mais je pense que je me suis trompé. j'ai cru que l'argument "data" en 2e position était obligatoire pour rajouter une fonction de rappel
mais en fait non, tu as bien utilisé la méthode "load" avec la fonction de rappel donc je ne vois pas non plus où se trouve le problème

Manipuler DOM après méthode .load()

JavaScript

Discussions similaires

Partager

Partager