Dynamic content dans une div

Commenter

Contenu du snippet

Bonjour,
Le but est d'afficher du contenu dynamique dans une ou plusieurs boxdiv uniques, en cliquant sur un lien ou plusieurs liens uniques...

Source / Exemple : 


Dans le head :

<script type="text/javascript" language="javascript">
function ouverture(url,id) 
{ 
	var xhr_object = null; 
	var position = id; 
	if(window.XMLHttpRequest) 
		{ xhr_object = new XMLHttpRequest(); }
	else if(window.ActiveXObject) 
		{ xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); }
	else 
		{ alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); }
		
	// On ouvre la requete vers la page désirée 
	xhr_object.open("GET", url, true); 
	xhr_object.onreadystatechange = function()
	{ 
	if ( xhr_object.readyState == 4 ) 
		{ 
			if(xhr_object.status  != 200)
			{
				document.getElementById(position).innerHTML ="Erreur " + xhr_object.status;
			} 	else 
			{
				// j'affiche ou je cache dans la DIV spécifiées le contenu retourné par le fichier

				if (document.getElementById) 
				{ 
					if (document.getElementById(position).style.display == "block") 
					{ document.getElementById(position).style.display = 'none'; } 
					else if (document.getElementById(position).style.display == "none")
					{ document.getElementById(position).style.display = 'block'; } 
					else { document.getElementById(id).style.display = 'none'; }
				}
				document.getElementById(position).innerHTML = xhr_object.responseText; 
			}
		} else { document.getElementById(position).innerHTML = '<p style="text-align:center">Chargement des données en cours...</p>'; }
	} 
	// dans le cas du get 
	xhr_object.send(null);
};
</script>

Dans le body :

<a href="./page1.html" onclick="ouverture(this.getAttribute('href'),'page'); return false;">Ma page 1</a> 
<div id="page" style="display:none; width:300px; height:300px; border:1px dashed #ccc; overflow:auto">&nbsp;</div> 
<a href="./page2.html" onclick="ouverture(this.getAttribute('href'),'page2'); return false;">Ma page 2</a> 
<div id="page2" style="display:none; width:300px; height:300px; border:1px dashed #ccc; overflow:auto">&nbsp;</div>

Conclusion :


Etant débutant, ce script mériterait certainement d'être amélioré. D'ailleurs, si quelqu'un pouvait m'aider à le rendre "unobtrusive", j'en serais heureux. N'hésitez pas à me laisser vos commentaires, bons ou mauvais...

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.