[Résolu] Problème javascript/AJAX

Salut !

J'ai besoin d'aide car je suis bloqué depuis un certain temps et qu'internet n'a pas réussi à répondre à mes questions pour le moment.

Je suis en train de concevoir un site pour un groupe de musique. Mon objectif, pratiquement atteint, consiste à afficher une liste de concerts grâce à du php/SQL, rendre chaque concert cliquable dans le but d'afficher des informations complémentaires dans un <div> inférieur grâce à de l'AJAX. Je souhaiterai :
1) qu'en cliquant sur un autre concert le <div> se mette à jour automatiquement.
2) qu'en cliquant sur le concert courant le <div> disparaisse (ou se vide).

Je bloque sur le deuxième point car je ne sais pas comment vérifier si le div contient quelque chose, et à quel concert ce quelque chose correspond !

Merci d'avance c'est un problème qui me semble complexe, si j'ai oublié des précisions, n'hésitez pas à me le faire remarquer..

Marius
Modifié par Marius (16 Jul 2010 - 12:23)

Bonjour ,

moi je verrai bien une solution grâce a jquery plutot qu'avec ajax .

en gros en php/bdd tu continue a généré la liste de concert , et dessous tu génères aussi un div pour chaque concert de la liste .

Ensuite en jquery , sur chargement de la page , tu caches tout les div de tes concerts de la page .

Et enfin quand tu clique sur un de tes concert dans la liste , ca cache tout les concerts ( comme ca tu a pas besoin de savoir lequels sont ouvert ou pas .. ) , et ca ouvre celui que tu a cliqué .

Comme ca , si une personne sans javascript arrive , les divs ne seront pas caché au chargement de la page , et il pourra quand même utilisé ton site , et si la personne a bien activé javascript , il aura un résultat qui semble équivalent a ce que tu a besoin .


Tu a des explications sur jquery a cette page :
http://www.alsacreations.com/astuce/lire/916-librairie-javascript-jquery-script.html

Ou tu trouvera un exemple a adapté pour ton cas :
http://www.alsacreations.com/xmedia/tuto/exemples/jquery/intro/

Bonjour,

mathieu1004 a écrit :
moi je verrai bien une solution grâce a jquery plutot qu'avec ajax .

Juste une précision : il s'agit dans tous les cas d'AJAX, jQuery n'étant qu'une bibliothèque qui en simplifie l'utilisation.

Merci, je vais suivre tes conseils et m'informer sur les librairies jquery que je ne connais pas du tout..

Je viendrais poster ma réponse une fois les investigations terminées

Bonjour ,

Julien Royer a écrit :
Bonjour,

Juste une précision : il s'agit dans tous les cas d'AJAX, jQuery n'étant qu'une bibliothèque qui en simplifie l'utilisation.

Ah oki , je savais pas .

Pour moi "Ajax" désigne une manière de faire des requêtes au serveur web sans avoir a rechargé toute la page ( asynchrone pour dire que c'est en décalage avec le 1er chargement ) , alors que la ca serait plutôt juste du javascript enfaite quoi : on a déjà tout reçu du serveur : au chargement on a caché des trucs , et on les affiche au fur et a mesure qu'on clique sans faire de nouvelles requêtes au serveur web , tout juste en locale quoi , c'est pour ca que j'ai dis que c'était pas de l'Ajax ^^ , faudra je trouve une définition plus exacte a l'occasion .

Ps : j'y connais pas grand chose en jquery non plus ^^ j'ai trouvé l'exemple du post précèdent que j'ai adapté à une liste d'élément qui font apparaitre/disparaitre un petit texte a coté , ca ressemble un peu a ( ca en est peut être ^^ ) du javascript objet , avec des trucs pratique tout fais ^^

mathieu1004 a écrit :
Pour moi "Ajax" désigne une manière de faire des requêtes au serveur web sans avoir a rechargé toute la page ( asynchrone pour dire que c'est en décalage avec le 1er chargement ) , alors que la ca serait plutôt juste du javascript enfaite quoi : on a déjà tout reçu du serveur : au chargement on a caché des trucs , et on les affiche au fur et a mesure qu'on clique sans faire de nouvelles requêtes au serveur web , tout juste en locale quoi , c'est pour ca que j'ai dis que c'était pas de l'Ajax ^^ , faudra je trouve une définition plus exacte a l'occasion .

Tu as parfaitement raison, j'avais mal lu ta réponse. Désolé.

Bonsoir,

oki merci

Hello,

Finalement je m'en suis sorti avec un peu de javascript, je ne savais pas qu'il était possible de modifier le contenu d'un onclick ce qui m'a permis de m'y retrouver avec seulement deux fonctions que voici :

function effacerConcert(par){
	//Efface le contenu du div
	var div = document.getElementById('concertDetail');
	div.innerHTML = '';
	//Va modifier le onclick de chaque lien du concert courant
	//de afficherConcert() à effacerConcert().
	var a = document.getElementsByTagName('a');
	for(var i=0; i<a.length; i++) {
		if(a[i].className == par) {
			a[i].onclick = function() {
				afficherConcert(par);
			}; 
		}
	}
	return false;
}

function afficherConcert(par){
	//Affiche le concert
	getConcert(par);
	//Va modifier le onclick de chaque lien du concert courant
	//mais dans l'autre sens !
	var a = document.getElementsByTagName('a');
	for(var i=0; i<a.length; i++) {
		if(a[i].className == par) {
			a[i].onclick = function() {
				effacerConcert(par);
			}; 
		}
	}
	return false;
}

[/i][/i][/i][/i]