Franc83

Tableau Ajax

22-09-2008

Présentation

Utilisez ce script au lieu d'utiliser des frames, ce qui est meilleur pour le référencement et moins lour à gérer. Quand un visiteur clique sur un lien spécifique, Le contenu de ce lien est inséré dans la page, sans rafraichissement de page, alors qu'il est issu d'une page HTML externe. Quand une page n'existe pas, un message d'erreur personnalisé est proposé au visiteur.

- MENU -

Sources

Créateur : Michael
Site Web: http://www.posters-bestellen.nl
Date de création : 24 juillet 2006

Code Source

Collez ce code source dans les zones appropriées, en le personnalisant avec vos propres données.

Fichier Externe

Collez ce code dans un fichier js externe que vous nommerez : ajax_navagation.js

var please_wait = null;

function open_url(url, target) {
 	if ( ! document.getElementById) {
  		return false;
 	}

 	if (please_wait != null) {
  		document.getElementById(target).innerHTML = please_wait;
 	}

 	if (window.ActiveXObject) {
  		link = new ActiveXObject("Microsoft.XMLHTTP");
 	} else if (window.XMLHttpRequest) {
  		link = new XMLHttpRequest();
 	}

 	if (link == undefined) {
  		return false;
 	}
 	link.onreadystatechange = function() { response(url, target); }
 	link.open("GET", url, true);
 	link.send(null);
}

function response(url, target) {
 	if (link.readyState == 4) {
	 	document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website ASAP and give him the fallowing errorcode: " + link.status;
	}
}

function set_loading_message(msg) {
 	please_wait = msg;
}

Head

Collez ce code dans la section "head" de votre document HTML.

<script type="text/javascript" src="ajax_navagation.js"></script>

  set_loading_message("Please wait while the page is opening....");

Body

Collez ce code dans la section "body" de votre document HTML

<table>
<tr>
<td valign=top width=150>
<H5>My Navagation links</H5>
<a href="javascript:void(0)" onclick="open_url('page-1.html','my_site_content');">Go to page 1</a><br>
<a href="javascript:void(0)" onclick="open_url('page-2.html','my_site_content');">Go to page 2</a><br>
<a href="javascript:void(0)" onclick="open_url('page-3.html','my_site_content');">Go to page 3</a><br>
<a href="javascript:void(0)" onclick="open_url('page-4.html','my_site_content');">Go to page 4</a><br>
<a href="javascript:void(0)" onclick="open_url('xxxx.html','my_site_content');">Broken Link</a><br>
</td>
<td valign=top>
<div id="my_site_content">
</div>
</td>
</tr>
</table>

Commentaires

Ce script est assez délicat à exécuter, il nécessite des scripts en dur dans le code html, des fichiers js et css externes, et dans le codage des balises, l'appel à des id et des class. Il est normal qu'il "plante" si des erreurs sont commises, et le plus simple alors, est de regarder dans le code source de ce tutorial, pour voir comment le tout est structuré, afin de pouvoir comparer avec son propre code. Ce script ne fonctionne qu'en partie en local, les requêtes qui font appel au php, ne fonctionnant qu'en ligne ou avec easyphp.

Pour tout problème, veuillez poster sur le forum dans "problèmes divers", afin d'expliquer votre problème, et de voir ensemble ce qui cloche

Vous pouvez télécharger le pack complet ici :

Merci

Albidochon

Citez cet article

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront