Faire une div flottante ...

10 févr. 2009, 14:35

Je modifie le code au fur et à mesure des modifications proposées, le code ci-dessous est donc le code actuel (qui ne fonctionne pas)

Je cherche à réaliser une div flottante comme on peut les trouver sur Google Calendar :

Bon j'ai essayé de bricoler un truc mais impossible de le faire fonctionner ...

J'ai deux fichiers .js que j'appelle de cette façon :

Code : Tout sélectionner

<!-- Javascript -->
<script type="text/javascript" src="javascript/ajax.js"></script>
<script type="text/javascript" src="javascript/fonctions.js"></script>

J'appelle ma fonction javascript de cette manière :

Code : Tout sélectionner

<a href="javascript:inscription(event);">Créer un compte</a>

ajax.js contient :

Code : Tout sélectionner

var httpRequest = false;

if (window.XMLHttpRequest){ // Mozilla, Safari,...
	httpRequest = new XMLHttpRequest();
	
	if (httpRequest.overrideMimeType) {
		httpRequest.overrideMimeType('text/xml');
	}
}

else if (window.ActiveXObject){ // IE
	try {
		httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e) {
		try {
			httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e) {}
	}
}

else{
	alert('Votre navigateur ne supporte pas la technologie AJAX');
}

function alertContents(httpRequest) {
	if (httpRequest.readyState == 4) {
		if (httpRequest.status == 200) {
			alert(httpRequest.responseText);
		}
		else {
			alert('Un problème est survenu avec la requête.');
		}
	}
}

et fonctions.js contient :

Code : Tout sélectionner

var referenceDiv=null;
var newDiv=null;

function inscription(evt){
	// crée un nouvel élément div
	// et lui donne un peu de contenu
	newDiv=document.createElement("div");
	newDiv.style.width='200px';
	newDiv.style.height='300px';
	newDiv.style.left=evt.pageX-200+'px';
	newDiv.style.top=evt.pageY-150+'px';
	newDiv.style.position='absolute';
	newDiv.style.zIndex='100';
  
	// On ouvre la requete vers la page désirée
	httpRequest.onreadystatechange = function() { 
		alertContents(httpRequest);
	};
	httpRequest.open('GET', "includes/inscription.php", true);
	httpRequest.send(null);

	// ajoute l'élément qui vient d'être créé et son contenu au DOM
	referenceDiv=document.getElementById("global");
	document.body.insertBefore(newDiv, referenceDiv);
}

J'ai mal fait quelque chose ?

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur][/i]

10 févr. 2009, 15:54

Erreur dans ton code:

Code : Tout sélectionner

newDiv.httpRequest.open('GET', "includes/inscription.php", true);
newDiv.httpRequest.send(null);

Correction:

Code : Tout sélectionner

httpRequest.open('GET', "includes/inscription.php", true);
httpRequest.send(null);

10 févr. 2009, 16:18

Ok merci beaucoup

Par contre, bien que j'aie fait les changements, ça ne marche toujours pas ...

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

Petite question : Comme sait-il que le contenu de httpRequest doit aller dans la div "newDiv" que j'ai créé ?

11 févr. 2009, 15:57

Rien dans ton code ne le dit. Normalement ça serait le rôle de la fonction "alertContents" qui intercepte la réponse d'ajax. Mais dans ton cas seul un message d'alert est envoyé par cette fonction. Tu devrais modifier cette fonction pour affecter la reponse httpRequest.responseText dans le conteneur NewDiv.

Voici un exemple, tiré de ton code:

Code : Tout sélectionner

<script type="text/javascript">

var httpRequest = false;

if (window.XMLHttpRequest){ // Mozilla, Safari,...
   httpRequest = new XMLHttpRequest();
   
   if (httpRequest.overrideMimeType) {
      httpRequest.overrideMimeType('text/xml');
   }
}

else if (window.ActiveXObject){ // IE
   try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e) {
      try {
         httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {}
   }
}

else{
   alert('Votre navigateur ne supporte pas la technologie AJAX');
}

function alertContents(httpRequest) {

}

var referenceDiv=null;
var newDiv=null;

function inscription(){

   // crée un nouvel élément div
   // et lui donne un peu de contenu

   newDiv=document.createElement("div");
   newDiv.style.width='200px';
   newDiv.style.height='300px';
   newDiv.style.left= 200; 
   newDiv.style.top= 200; 
   newDiv.style.position='absolute';
   newDiv.style.zIndex='100';
   newDiv.style.borderStyle = "solid";
   newDiv.style.borderWidth = "1px";

   // ajoute l'élément qui vient d'être créé et son contenu au DOM
   referenceDiv=document.getElementById("global");
   document.body.insertBefore(newDiv, referenceDiv);

 
   // On ouvre la requete vers la page désirée
   httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState == 4) {
         if (httpRequest.status == 200) {
            newDiv.innerHTML = ( httpRequest.responseText );
         }
      }
   };
   httpRequest.open('GET', "includes/inscription.php", true);
   httpRequest.send(null);
}

</script>

<body>
<div id="global">
<button onclick="inscription();">Go</button>
</div>
</body>

Faire une div flottante ...

Qui est en ligne