de l'utilisation ajax [Résolu]

[tigunn]

Bonjour,
Je débute en ajax et j'ai un petit souci : je voudrais afficher un bouton "afficher", qui une fois cliqué afficherait un message du type "Récupération des données en cours...", puis un tableau html contenant mes résultats.
Je précise que je m'inspire d'un code développé par un prédécesseur (injoignable ).
Donc voici le code:

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
<script language="javascript">
$(document).ready(function () {
		$('a[href=' + window.location.hash + ']').addClass('selected');
		$('a[rel=ajax_citations]').click(function () {
			var hash = this.href;
			hash = hash.replace(/^.*#/, '');
			$('a[rel=ajax_citations]').removeClass('selected');
	 		$(this).addClass('selected');
	 		$('.ajax_loading_citations').show();
			getPage_citations();
			return false;
		});
	});
 
	function pageload_citations(hash) {
		if (hash) getPage_citations();
	}
 
	function getPage_citations() {
		var data = 'page=' + encodeURIComponent(document.location.hash);
		$.ajax({
			url: "bib_jx_citations.php?id_bibliography=<?php echo $bib_visu->getId() ?>",
			type: "GET",
			data: data,
			cache: false,
			success: function (html) {
				$('.ajax_loading_citations').hide();
				$('#citations').html(html);
				$('#ajax_loader_citations').hide();
			}
		});
	}
</script>
<?php
echo "<h4>" . gettext("Citations") . "</h4>";
if ( ($bib_visu_bibliotype == 3) OR  ($bib_visu_bibliotype == 1) ) {
	echo '<a class="bouton_plus" id="ajax_loader_citations" href="#" rel="ajax_citations">';
	echo gettext("Afficher...");
	echo '</a>';
	echo '<div class="ajax_loading_citations">';
	echo '<br />';
	echo '<img src="images/ajax-loader.gif" alt="" />&nbsp;';
	echo gettext('Merci de patienter, chargement de données en cours...');
	echo '&nbsp;<img src="images/ajax-loader.gif" alt="" />';
	echo '</div>';
	echo '<div id="citations">';
	echo '</div>';
	echo '<br />';
}

A l'affichage, j'ai mon bouton ET le message qui s'affiche en même temps.

[bewidia]

Ton prédécesseur utilise jQuery pour faire des appels Ajax
Tu peux déjà jeter un oeil à la doc : http://api.jquery.com/jQuery.ajax/

Dans ton cas, il suffit juste de modifier le DOM avant $.ajax pour afficher ton message et l'effacer dans la partie "success"

[tigunn]

Merci du coup de main.
J'ai parcourus le lien que tu avais envoyé (j'ai pas le temps de le lire intégralement la journée), ainsi qu'une part de la FAQ.
Il me manquait une définition du style:

Code :

1
2
3
4
.ajax_loading_citations {
    display : none;
    font-weight : bold;
}

dans la css; et cela fonctionne, ou semble , vu que le msg "chargement en cours" n'a pas vraiment le temps d'être lisible.

Sinon, je comprend pas encore très bien ce qu'est le DOM.

[bewidia]

Si la requête se réalise rapidement, c'est normal que le message a à peine le temps d'apparaître.
Autrement, le DOM, c'est grosso modo ta page web. Modifier le DOM revient à modifier ta page après chargement initial.

[Bovino]

Envoyé par tigunn

Sinon, je comprend pas encore très bien ce qu'est le DOM.

Le DOM, c'est la représentation du document HTML sous forme d'objets.
Lors de la création de la page, le moteur HTML affiche le code HTML selon un modèle visuel défini par le navigateur et complété par les feuilles de style. Parallèlement, le moteur JavaScript converti toutes les balises en objets ayant comme propriétés (en gros) prédéfinies, les attributs usuels qu'acceptent ces balises. C'est donc grâce à cette transformation que tu peux ensuite récupérer ces objets et les manipuler en JavaScript.

[tigunn]

merci