Discussion :

[ooOYOoo]

Bonjour à tous,
Grand pataugeur en JS, je cherche le moyen de manipulé une isolation d'ancre extraite depuis une url pour charger et afficher en Ajax le contenu portant l'ID correspondante.
Pour vous mettre dans le contexte, il s'agit d'un portfolio avec filtre, le chargement par click récupère le l'url d'un php du data-loader correspondant et affiche (contenu + bt prev, bt next et bt close) via un scroll top + un display block d'un container situé au dessus.

Voici un exemple d'appel externe: "monsite.com/page.html#portfolio-item-1"
j'ai vu qu'avec "window.location.hash.split('#')[1]" je pouvais isoler "portfolio-item-1"
Mais je ne sais pas comment procéder le plus simplement possible pour l’intégrer
j'ai des bribes type "if portPostId == window.location.hash.split('#')[1]..." mais pas assez de connaissances et compétences pour le réaliser.

voici le HTML:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<article id="portfolio-item-1" data-loader="include/ajax/portfolio-ajax-1.php" class="portfolio-item fest avril portfolio-active" style="position: absolute; left: 0px; top: 0px;">  
  <div class="portfolio-overlay">
    <a href="#" class="center-icon"><i class="icon-line-expand"></i></a>
  </div>
</article>
 
<article id="portfolio-item-2" data-loader="include/ajax/portfolio-ajax-2.php" class="portfolio-item expo mars" style="position: absolute; left: 0px; top: 0px;"> blabla </article>
 
<article id="portfolio-item-3" data-loader="include/ajax/portfolio-ajax-3.php" class="portfolio-item conf juin" style="position: absolute; left: 0px; top: 0px;"> blabla </article>

voici des extraits du jQuery de functions.js:

Code js :

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
	JSDEV.portfolio = {
 
		init: function(){
 
			JSDEV.portfolio.ajaxload();
 
		},
 
.................
// déclencheur par defaut click
 
		ajaxload: function(){
			$('.portfolio-ajax .portfolio-item a.center-icon').click( function(e) {
				var portPostId = $(this).parents('.portfolio-item').attr('id');
				if( !$(this).parents('.portfolio-item').hasClass('portfolio-active') ) {
					JSDEV.portfolio.loadItem(portPostId, prevPostPortId);
				}
				e.preventDefault();
			});
		},
 
		loadItem: function( portPostId, prevPostPortId, getIt ){
			if(!getIt) { getIt = false; }
			var portNext = JSDEV.portfolio.getNextItem(portPostId);
			var portPrev = JSDEV.portfolio.getPrevItem(portPostId);
			if(getIt == false) {
				JSDEV.portfolio.closeItem();
				$portfolioAjaxLoader.fadeIn();
				var portfolioDataLoader = $('#' + portPostId).attr('data-loader');
				$portfolioDetailsContainer.load(portfolioDataLoader, { portid: portPostId, portnext: portNext, portprev: portPrev },
				function(){
					JSDEV.portfolio.initializeAjax(portPostId);
					JSDEV.portfolio.openItem();
					$portfolioItems.removeClass('portfolio-active');
					$('#' + portPostId).addClass('portfolio-active');
					$(this).find('[href="#'+ 'portfolio-item' + '"]').addClass('portfolio-active')
 
				});
			}
		},
 
...........
		initializeAjax: function( portPostId ){
			prevPostPortId = $('#' + portPostId);
 
			$('#next-portfolio, #prev-portfolio').click( function() {
				var portPostId = $(this).attr('data-id');
				$portfolioItems.removeClass('portfolio-active');
				$('#' + portPostId).addClass('portfolio-active');
				JSDEV.portfolio.loadItem(portPostId,prevPostPortId);
				return false;
			});
 
			$('#close-portfolio').click( function() {
				$portfolioDetailsContainer.fadeOut('600', function(){
					$portfolioDetails.find('#portfolio-ajax-single').remove();
				});
				$portfolioDetails.removeClass('portfolio-ajax-opened');
				$portfolioItems.removeClass('portfolio-active');
				return false;
			});
		}
 
	};

D'avance mille merci à ceux qui se pencheront sur mon cas !

[01001111]

Salut,
Tu peux utiliser déjà un href plus explicite pour modifier l'url... sinon ton hash ne sera pas modifié par les différents liens s'ils pointent tous sur #

Code html :

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

1
2
3
4
5
<article id="portfolio-item-1" data-loader="include/ajax/portfolio-ajax-1.php" class="portfolio-item fest avril portfolio-active" style="position: absolute; left: 0px; top: 0px;">  
  <div class="portfolio-overlay">
    <a href="#portfolio-item-1" class="center-icon"><i class="icon-line-expand"></i></a>
  </div>
</article>

ça modifiera l'url et tu peux placer

Code :

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

<a name="portfolio-item-1"></a>

en haut du document pour que ça scrolle automatiquement vers le haut, il me semble que c'est l'utilisation originelle du hashtag en html.
sinon utiliser la librairie jquery avec animate de jquery:

Code javascript :

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

$("html, body").animate({ scrollTop: 0 }, "slow");

En suite pour le hashchange, tu peux utiliser cet exemple de fonction pour lancer l'ajax en fonction de l'url courante:

Code javascript :

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
var addresschange=function(fn) {
	if ("onhashchange" in window) {
		window.onhashchange = function (e) {
			if (!window.navigator.userAgent.match(/trident/i)) {
				e.hash=e.newURL.substr(e.newURL.indexOf("#"));	
			} else {
				var e={};
				e.hash=document.location.href.substr(document.location.href.indexOf("#"));	
			}
			fn(e);
		}
	} else {
		var prevHash = window.location.hash;
		window.setInterval(function () {
			if (window.location.hash != prevHash) {
				var e;
				prevHash=window.location.hash;
				e.hash=window.location.hash;
				fn(e);
			}
		}, 100);
	}
};

pour lancer l'ajax:

Code javascript :

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

addresschange(function(e) { ajax(e.hash); });

et là tu lances la détection du data-loader en fonction de e.hash:

Code :

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

1
2
3
4
var ajax=function(id) {
       var url=$('#' + id).attr('data-loader');
       $portfolioDetailsContainer.load(url, { portid: id };
}

tu n'as plus ainsi à t'occuper de prev et next vu que le navigateur va les gérer tout seul, mais tu peux toujours ajouter tes propres boutons si vraiment c'est ton souhait