Utilisé Ajax pour Charger du contenu en fonction du lien cliqué

[smilodon77]

Bonjour à tous,

(Note: Je ne sais pas si c'est utile de le préciser mais j'utilise wordpress)

Sur ma home j'ai 4 liens et une div en-dessous, j'aimerai que le contenu de la div change en fonction du lien cliqué (sans recharger la page évidemment ). Est ce vous auriez des idées pour une solution simple et efficace?

Ajax ou simple JS? En réalité je ne sais pas vraiment quelle serait la solution optimale en terme de Poids / rapidité

[andry.aime]

Bonjour,

Ajax c'est du JS .
Regarde ce tutoriel. En cliquant sur un lien, tu rafraichis le div.

Code html :

<a href="page.php" onclick="fonctionAjax(this.href); return false;"> texte </a>

Code :

1
2
3
4
5
6
7
8
9
10
function fonctionAjax(adresse){
	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)){
			document.getElementById('idDuDiv').innerHTML = xhr.responseText;
		}
	}
	xhr.open("GET",adresse,true);
	xhr.send(null);
}

A+.

[smilodon77]

Yes j'essais ça de suite.

Merci.

je sais bien qu'AJAX comprend du JS, ma question c'était plus de savoir si je cherchais à me compliquer la vie pour rien ou si ma demande paraissait judicieuse car je pense qu'en utilisant du simple JS avec des visibles et des onclicks ou en jouant sur les positions d'une div avec un caroussel on peut peut être s'y retrouver aussi...

[smilodon77]

Finalement j'ai pas réussi malgré ton exemple.

Je suis donc passé par coda-slider pour le gérer.

Dans le header, j'appelle coda-slider.js:

En commençant par Jquery (pas sûr que ça soit indispensable mais bon):

Code :

1
2
3
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.4.4.min.js"></script>
 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.coda-slider-2.0.js"></script>

Ensuite je lance la fonction avec les paramètres:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
	$(document).ready(
		function(){
 
		  $('#block_ong_fen').codaSlider({
			   autoSlide: false,
			   dynamicArrows: false,
			   autoHeight:false,
			   slideEaseFunction:"linearTween",
			   slideEaseDuration: 0,
		   });
		}
	);
</script>

Et dans ma page php/html on retrouve mon block block_ong_fen:

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
<div class="coda-slider-wrapper">
        <div class="coda-slider preload" id="block_ong_fen">
            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">A venir</h2>
                    <p>This slider slides automatically, but will stop when the users clicks on any nav button (tabs or arrows).</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>
            </div>

            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">BTS SIO</h2>
                    <p>This slider slides automatically, but will stop when the users clicks on any nav button (tabs or arrows).</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>
            </div>

            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">Bachelors</h2>
                    <p>This slider slides automatically, but will stop when the users clicks on any nav button (tabs or arrows).</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>
            </div>

            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">Metiers</h2>
                    <p>This slider slides automatically, but will stop when the users clicks on any nav button (tabs or arrows).</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>
            </div>

        </div><!-- .coda-slider -->
    </div><!-- .coda-slider-wrapper -->

Voilà, finalement je suis passé par du JS tout simple... Mais si l'AJAX pouvait me faire gagner du temps d'accès sur la page, alors j'y reviendrai sûrement plus tard.