Discussion :

[flamant]

Bonjour,

je suis débutant en jquery et j'ai un évènement click (voir en rouge ci dessous) qui n'est pas déclenché. Sauriez vous me dire pourquoi ?

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
80
81
82
var settings;
var thumbLinks;
var firstThumbLink;
var highlight;
var loader;
var imgViewer;

$(document).ready(function() {
						var token = $("meta[name='_csrf']").attr("content");
						var header = $("meta[name='_csrf_header']").attr(
								"content");
						$(document).ajaxSend(function(e, xhr, options) {
							xhr.setRequestHeader(header, token);
						});

						$.ajax({
							type : "GET",
							url : contextPath + "/secure/getImages.htm",
							contentType : "application/json",
							dataType : "json",
							success : function(data) {
								$("#thumbs").empty();
								$.each(data.records,function(i, item) {
									var a = $("<a> </a>").attr("href",contextPath + data.records[i].value);
									a.append($("<img> </img>").attr( { src: contextPath + data.records[i].value, height: 100, width: 100 }));
									var li = $("<li> </li>");
									li.append(a);
									$("#thumbs").append(li);
								});
							}
						});
						
						
						var settings = {
							thumbListId : "thumbs",
							imgViewerId : "viewer",
							activeClass : "active",
							activeTitle : "Photo en cours de visualisation",
							loaderTitle : "Chargement en cours",
							loaderImage : "../images/loader.gif"
						};
						
						var thumbLinks = $("#" + settings.thumbListId)
								.find("a"), firstThumbLink = thumbLinks.eq(0), highlight = function(
								elt) {
							thumbLinks.removeClass(settings.activeClass)
									.removeAttr("title");
							elt.addClass(settings.activeClass).attr("title",
									settings.activeTitle);
						}, loader = $(document.createElement("img")).attr({
							alt : settings.loaderTitle,
							title : settings.loaderTitle,
							src : settings.loaderImage
						});

						highlight(firstThumbLink);

						$("#" + settings.thumbListId).after(
								$(document.createElement("p")).attr("id",
										settings.imgViewerId).append(
										$(document.createElement("img")).attr({
											alt : "",
											src : firstThumbLink.attr("href")
										})));
						
						var imgViewer = $("#" + settings.imgViewerId), bigPic = imgViewer
								.children("img");

						thumbLinks.click(function(e) {
							e.preventDefault();
							console.log('ca passe click');
							var $this = $(this), target = $this.attr("href");
							if (bigPic.attr("src") == target)
								return;
							highlight($this);
							imgViewer.html(loader);
							bigPic.load(function() {
								imgViewer.html($(this).fadeIn(250));
							}).attr("src", target);
						});
});

[flamant]

Re-bonjour à tous,

j'ai posé ma question un petit peu trop vite. J'ai résolu cette question. il suffisait de mettre le code à la fin de la méthode success. Merci pour votre temps

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var settings;
var thumbLinks;
var firstThumbLink;
var highlight;
var loader;
var imgViewer;

$(document).ready(function() {


						var token = $("meta[name='_csrf']").attr("content");
						var header = $("meta[name='_csrf_header']").attr(
								"content");
						$(document).ajaxSend(function(e, xhr, options) {
							xhr.setRequestHeader(header, token);
						});
						console.log('ca passe');
						$.ajax({
							type : "GET",
							url : contextPath + "/secure/getImages.htm",
							contentType : "application/json",
							dataType : "json",
							success : function(data) {
								$("#thumbs").empty();
								$.each(data.records,function(i, item) {
									var a = $("<a> </a>").attr("href",contextPath + data.records[i].value);
									a.append($("<img> </img>").attr( { src: contextPath + data.records[i].value, height: 100, width: 100 }));
									var li = $("<li> </li>");
									li.append(a);
									$("#thumbs").append(li);
								});
                                                                // LE CODE EST A LA SUITE DE LA CONSTRUCTION DES ELEMENTS
								var settings = {
										thumbListId : "thumbs",
										imgViewerId : "viewer",
										activeClass : "active",
										activeTitle : "Photo en cours de visualisation",
										loaderTitle : "Chargement en cours",
										loaderImage : "../images/loader.gif"
									};
									
									var thumbLinks = $("#" + settings.thumbListId)
											.find("a"), firstThumbLink = thumbLinks.eq(0), highlight = function(
											elt) {
										thumbLinks.removeClass(settings.activeClass)
												.removeAttr("title");
										elt.addClass(settings.activeClass).attr("title",
												settings.activeTitle);
									}, loader = $(document.createElement("img")).attr({
										alt : settings.loaderTitle,
										title : settings.loaderTitle,
										src : settings.loaderImage
									});
									console.log('thumbLinks 1');
									console.log(thumbLinks);

									highlight(firstThumbLink);

									$("#" + settings.thumbListId).after(
											$(document.createElement("p")).attr("id",
													settings.imgViewerId).append(
													$(document.createElement("img")).attr({
														alt : "",
														src : firstThumbLink.attr("href")
													})));
									
									var imgViewer = $("#" + settings.imgViewerId), bigPic = imgViewer
											.children("img");
									console.log('thumbLinks 3');
									console.log(thumbLinks);
									thumbLinks.click(function(e) {
										e.preventDefault();
										console.log('ca passe click');
										var $this = $(this), target = $this.attr("href");
										if (bigPic.attr("src") == target)
											return;
										highlight($this);
										imgViewer.html(loader);
										bigPic.load(function() {
											imgViewer.html($(this).fadeIn(250));
										}).attr("src", target);
									});								
								
								
							}
						});
						
						



});