AJAX changer le contenu d'une div au clic avec paramètres, SQL

Bonjour,

Je suis désolée si cette question a déjà été posée mais je n'arrive pas à trouver la réponse sur le net...
Donc mon problème: j'ai un calendrier avec plusieurs évènements listés. Au clic sur le titre d'un évènement on affiche le détail dans une div qui se trouve sur la même page que la liste. Au début j'avais fait ça simplement en PHP avec rechargement de la page, mais ça ne me convient pas (le rechargement). Du coup je voudrais utiliser AJAX pour permettre qu'au clic le contenu de la div change instantanément... Tout est en base de données MySQL et géré avec des requêtes.

J'ai essayé plusieurs choses mais rien n'a été concluant...
Alors premièrement, j'aimerais savoir si ce que je veux faire est possible
Si oui, comment faire?

Remarque: j'utilise pour d'autres éléments beaucoup de fonctions javascript et Jquery, et j'ai déjà eu des problèmes de conflits, alors je sais pas si c'est utile de préciser...

Je veux bien vous mettre mon code mais j'ai bien peur que ça ne soit vraiment trop long.

Merci à tous ceux qui prendront la peine de me répondre
Modifié par Lindorie (28 May 2010 - 22:54)

si tu as jQuery, il suffit d'utiliser la méthode load

Pour exemple :

$(document).ready(function(){
   $("#monDivQuiDoitSeRemplir").load('urlDeMonPHP.php #bloc');
});

il va remplir le div avec l'ID monDivQuiDoitSeRemplir avec le contenu du div ID bloc de la page qui a comme url urlDeMonPHP.php.

Attention load ne marche pas très bien avec la balise "body" en gros :

$("#monDivQuiDoitSeRemplir").load('urlDeMonPHP.php body');

a la fâcheuse tendance à ne pas marcher
Modifié par kaen25 (31 May 2010 - 12:10)

kaen25 a écrit :
si tu as jQuery, il suffit d'utiliser la méthode load

Pour exemple :

$(document).ready(function(){
   $("#monDivQuiDoitSeRemplir").load('urlDeMonPHP.php #bloc');
});

il va remplir le div avec l'ID monDivQuiDoitSeRemplir avec le contenu du div ID bloc de la page qui a comme url urlDeMonPHP.php.

Attention load ne marche pas très bien avec la balise "body" en gros :

$("#monDivQuiDoitSeRemplir").load('urlDeMonPHP.php body');

a la fâcheuse tendance à ne pas marcher

Super ! Merci pour ta réponse!
J'avais trouvé une solution avec XMLHttpRequest mais la tienne me paraît 10 000 fois plus simple...
Par contre, est-ce qu'on peut mettre des variables en paramètres de l'url ? genre

$("#monDivQuiDoitSeRemplir").load('urlDeMonPHP.php?id=x #bloc');

Je pense que oui mais bon faut s'attendre à tout

oui tu fais ce que tu veux niveau url, je pense que jQuery fait un split sur l'espace pour déterminé l'url et le selecteur, donc du moment que dans ton url tu n'as pas d'espace tou devrait être ok.

Bon alors je viens de tester, ça marche SAUF que j'ai un script JS à l'intérieur de mon résultat, et du coup avec load() il ne marche pas.
Dans mon ancienne solution j'avais fait ça :

function go(id,tri){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('description_event').style.display = "block";
						document.getElementById('description_event').innerHTML = leselect;
						evalueScripts('description_event');
					}
				}
				xhr.open("GET","ajax.php?id="+id+"&tri="+tri,true);
				
				xhr.send(null);
			}

function evalueScripts(targetId) {
			  var mesScripts = document.getElementById(targetId).getElementsByTagName("script");
			  for (var i=0; i < (mesScripts.length); i++) {
					  eval(mesScripts[i].innerHTML);
			  }
			}

Donc avec ma fonction "evalueScript" mon script marchait !
Quand je tente de faire pareil avec load() ça ne fonctionne pas:

function detail(id,tri) {
				document.getElementById('description_event').style.display = "block";
				$("#description_event").load('ajax.php?id='+id+'&tri='+tri+' #detail_calend'); 
				evalueScripts('description_event');
			}

Des idées ? [/i]

function detail(id,tri) { 
                document.getElementById('description_event').style.display = "block"; 
                $("#description_event").load('ajax.php?id='+id+'&tri='+tri+' #detail_calend');  
                evalueScripts('description_event'); 
            } 

En jquery ca peut donner :

function detail(id,tri) { 
    $('#description_event').show(); 
    $("#description_event").load('ajax.php #detail_calend', {
         "id" : id,
         "tri" : tri
    },  
    function() {
        eval($('#description_event script').html());
    });                
} 

Par contre le retour ajax qui retourne du js avec load c'est pas top top, je suis même pas sur que ca passe.

sinon pour faire un appel direct à un script qui renvoit du js et qui l'eval tout seul il y a .ajax().

Avec le paramètre "dataType" sur "script" qui force l'évaluation du retour.

Merci kaen25, je vais regarder ça.

Pour le js dans mon retour, en fait je dois afficher une google map en fonction du lieu de l'évènement, donc je sais pas si c'est possible de faire autrement...

En gros j'ai ça au milieu de mon retour

<div id="googleMap" style="width: 350px; height: 200px"></div> 
	
<script type="text/javascript">
		var gicons = [];
		var infobulle;
		var markerMember;
		function map() 
		{						
			var address = "<?php echo $detail['ville']." ".$detail['code_postal']; ?> France";
			geocoder = new GClientGeocoder();
			z = 10;
			geocoder.getLatLng(
				address,
				function(point) {								
					if (!point) {
						alert("- "+address+" n'existe pas");
					}
					else {									
						var a =  point.lat();						 
						var b =  point.lng();
						initialize2(address,a,b,z);								
				}});					
		}  
		function initialize2(address,a,b,z) {
			map = new GMap2(document.getElementById('googleMap'));	
			map.addControl(new GLargeMapControl3D()); 
			map.addControl(new GMenuMapTypeControl()); 
			map.checkResize();				            
			gicons[0] = new GIcon(G_DEFAULT_ICON, "images/flag_blue.png");
			gicons[0].iconSize = new GSize(16,16);
			gicons[0].shadow="";
			gicons[0].iconAnchor = new GPoint(9,16);
			gicons[0].infoWindowAnchor = new GPoint(9,9);

			map.setCenter(new GLatLng(a,b), z);				                
			if(address!=''){
				var geocoder = new GClientGeocoder();
				geocoder.getLatLng(address, function(point){ map.setCenter(point,z); });
			}
			infobulle  = address;
			markerMember = createMarker(new GLatLng(a,b),infobulle,gicons[0]); // Ajout du marqueur
			map.addOverlay(markerMember);        
		}	
		function createMarker(point,html,icon)
		{
			var marker = new GMarker(point,icon);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html);
			});
			return marker;
		}         
		map();
</script>					

Bon après réflexion et utilisation du truc, je pense que je vais revenir à ma première solution en PHP. Premièrement parce que c'est plus simple d'utilisation et si JS est désactivé, ça marche quand même. Ensuite parce qu'en JS l'url ne change pas, et on ne peut donc pas faire un lien vers l'évènement voulu. Et dernièrement parce que je viens d'aller tester sous IE (8) et ça ne fonctionne pas ! (rien ne s'affiche).
En plus avec le problème de la googleMap...

Bref dommage pour le rechargement de la page mais tant pis !

Merci quand même à ceux qui m'ont aidé sur ce sujet, j'ai appris plein de trucs
Et désolée pour mon incompétence, le JS c'est pas ma tasse de thé