11548 sujets

JavaScript, DOM et API Web HTML5

Transmettre une variable via un lien html qui fait appel à un js

Bonjour à tous,

Explication du problème:

D'un coté j'ai une liste de danseur stocké dans une bdd que j'affiche sur une page à l'aide d'une boucle php basique.

De l'autre j'ai un lien sur chacun de ses danseurs qui fait appel à une fonction js.

<a style= href="javascript:visibilite('bonjour');"> nom du danseur </a>



Code de la fonction:

function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}


Cette fonction doit afficher dans une div prédéfinis tous les infos (age, adresse, ... ect) du danseur lors d'un clique sur le lien

Code de la div affichant les infos du danseurs après un click:

  div id="bonjour" style="display:none"> 

  <?php
     connectMaBase();
$sql = 'SELECT  danseur_blaze,danseur_email, danseur_age,danseur_sexe, danseur_ville,danseur_pmini,danseur_exp,danseur_crew,danseur_discipline 
            from danseurs
            where danseur_id =$id';
	$req= mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error()); 	
	 while ($data = mysql_fetch_array($req))
         {
			?>Blaze:		 <?php echo '<strong><big>'.$data['danseur_blaze'].'</big></strong>';?> <br />	 <?php 
			?>Mail:		 <?php echo '<strong><big>'.$data['danseur_email'].'</big></strong>';?> <br />	 <?php 
			?>Age:		 <?php echo '<strong><big>'.$data['danseur_age'].'</big></strong>';?> <br />	 <?php 
			?>Sexe:		 <?php echo '<strong><big>'.$data['danseur_sexe'].'</big></strong>';?> <br />	 <?php 
			?>Ville:		 <?php echo '<strong><big>'.$data['danseur_ville'].'</big></strong>';?> <br />	 <?php 
			?>Photo:		<img src="miniatures_membre/<?php echo $data['danseur_pmini'];?>"/> <br />	 <?php 
			?>Expérience:		 <?php		echo '<strong><big>'.$data['danseur_exp'].'</big></strong>';?> <br />	 <?php 
			?>Crew(s):		 <?php			echo '<strong><big>'.$data['danseur_crew'].'</big></strong>';?> <br />	 <?php 
			?>Discipline:		 <?php			echo '<strong><big>'.$data['danseur_discipline'].'</big></strong>';?> <br />	 <?php 
		  
		 }
		 
	?>

</div>


J'aimerai donc transmettre l'id des danseurs via la variable $id pour ensuite le récupérer lors de l'affichage des informations et garantir l'exactitude des infos grâce à la clause where.

De ce fait les infos affichées seront bien celle du danseur sur lequel on vient de cliquer.
Tous cela se passe sur la même page !

Est-ce possible ? si oui je vous serai reconnaissant de bien vouloir éclairer ma lanterne qui après plusieurs jours de recherche est bien sombre. Smiley biggrin
Modifié par wolfou (30 Dec 2010 - 04:33)
Bonjour wolfou,

Je pense que tu mélange script (ie code exécuté coté client) et php (ie code exécuté coté serveur). Pour faire simple, en premier lieu c'est le php qui est compilé coté serveur puis envoyé au client web (le navigateur) sous forme d'html, ensuite c'est le client (toi) en manipulant la page html qui executera le javascript...
Tout ça pour te dire que tu ne peux pas exécuté du php suite au lancement d'une fonction javascript (a moins que tu le fasse sur une autre page ou que tu fasse de l'ajax).

J'espère avoir bien compris ce que tu voulais dire Smiley cligne
Mais je crois qu'il va falloir que tu repense a ce que tu veux faire.
Ok. La solution de l'autre page ne me convient pas. Aurait-tu des pistes à me donner pour l'Ajax stp ?
Si ta liste de danseur est limité (exemple une trentaine) tu peux simplement générer leurs informations complètes sur ta page à son chargement (30 noms + age + etc ... ne fera toujours que qqes kilo octets.. tant qu'il n'y a pas d'images ça ne sera pas très lourd) et simplement les masquer ("display:none") et ne les afficher que lors des évènements onclick.

Avantage: pas d'appel ultérieur donc récupération des données instantané lors des clicks.
Inconvénient: Page initial légèrement plus lourde à charger. (honnêtement pour de petits données, tu seras totalement incapable de sentir la différence ... donc je préconise cette solution qui de plus est assez simple à implémenter. même si l'ajax n'est pas non plus vraiment compliqué.)


Sinon, l'autre solution c'est l'ajax comme le dit KalNex. Smiley cligne
Il y a beaucoup de possibilités. Le mieux serai - je pense - effectivement un lien ou un bouton exécutant une requête AJAX, celle ci mettrai alors à jour ta div qui contient les informations de danseur.

Le plus simple serait peut être de voir vers les librairies existantes javascript, elles aident beaucoup pour faire de l'AJAX. Je ne peux être objectif sur ces librairies n'ayant utilisé que Mootools, mais il en existe beaucoup et de très connu, Jquery, Prototype...
Par exemple mootools -> la doc, une demo (regarde les sources Smiley cligne ) et un petit mootorial

Mais il reste aussi la possibilité de faire ça en javascript natif si tu ne veux pas incorporer des librairies tiers.
En fait l'idéal, c'est de coupler les 2 solutions.
Charger une page "légère" et puis charger les données en arrière plan via ajax et ne les afficher que lors du click. Ca permet un chargement rapide de la page principale et des affichages instantanés lors des clicks.

Le seul inconvénients restant c'est si t'as beaucoup de données, ton navigateur va tout stocker et mémoire et c'est comme ça que tu finis comme facebook où ton navigateur en cours d'exécution peut bouffer plusieurs centaines de Mo de RAM.) (dans le cas de facebook, ils devraient prévoir un nettoyage de mémoire dans tant à autre.) Et puis c'est légèrement plus dur à coder aussi. Smiley smile
Tout d'abord merci pour vos réponses.

Dans mon cas le préchargement des données en arrière plan ne serait pas une bonne solution étant donné, comme l'a souligné bogs, qu'il y aura pas mal de danseurs à afficher (disons 80) et qu'ils posséderont tous une photo.
Même si cette solution semble pour ma part plus simple à réaliser je vais m'orienter je pense vers l'ajax

Le problème c'est que je ne sais vraiment pas par où commencé. N'étant pas du tout à l'aise avec l'ajax.

Bien entendu je ne vous demande pas la solution complète parce que c'est plus drôle ! Smiley langue
mais des liens pointant vers des tutos ou des explications sont les bienvenus.

Merci Kalnex pour tes sources je vais y jeter un oeil ! Smiley cligne
Par exemple dans la demo mootools que je t'ai donné ci dessus, télécharge l'exemple (ya un bouton download en haut a droite) et tu verra c'est assez simple.
Tout ce que tu aura a faire c'est appeler une page php avec un paramètre indiquant l'id du danseur (c'est transparent, tu restera bien sur ta première page) et tu pourra récupérer l'intégralité du contenu dans ta page principale.
pb de manipulation ce message est à supprimer
re kalnex

j'ai donc essayé ta solution. Problème qui subsite:

dans le fichier data.php qui sert à décrire ce que l'on veut afficher dans la page principale grâce a l'ajax.

je n'arrive pas à rentrer dans le "if " qui teste si la variable $_get Smiley truc existe.


if (isset($_GET['info'])) 
{

   $_GET['info'] = addslashes($_GET['info']);
   
     connectMaBase();
$sql = "SELECT  danseur_blaze,danseur_email, danseur_age,danseur_sexe, danseur_ville,danseur_pmini,danseur_exp,danseur_crew,danseur_discipline 
    from danseurs where danseur_id ='" . $_GET['info'] . "'";
	$req= mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error()); 	
	 while ($data = mysql_fetch_array($req))
         {
			?>Blaze:		 <?php echo '<strong><big>'.$data['danseur_blaze'].'</big></strong>';?> <br />	 <?php 
			?>Mail:		 <?php echo '<strong><big>'.$data['danseur_email'].'</big></strong>';?> <br />	 <?php 
			?>Age:		 <?php echo '<strong><big>'.$data['danseur_age'].'</big></strong>';?> <br />	 <?php 
			?>Sexe:		 <?php echo '<strong><big>'.$data['danseur_sexe'].'</big></strong>';?> <br />	 <?php 
			?>Ville:		 <?php echo '<strong><big>'.$data['danseur_ville'].'</big></strong>';?> <br />	 <?php 
			?>Photo:		<img src="miniatures_membre/<?php echo $data['danseur_pmini'];?>"/> <br />	 <?php 
			?>Expérience:		 <?php		echo '<strong><big>'.$data['danseur_exp'].'</big></strong>';?> <br />	 <?php 
			?>Crew(s):		 <?php			echo '<strong><big>'.$data['danseur_crew'].'</big></strong>';?> <br />	 <?php 
			?>Discipline:		 <?php			echo '<strong><big>'.$data['danseur_discipline'].'</big></strong>';?> <br />	 <?php 
		  
		 }
	} 
?>


En gros quand je construis mes liens avec la boucle d'affichage des nom des danseurs ainsi que leur id en paramètre je n'arrive à récupéré l'id dans le fichier data.php qui sert à l'affichage

Voici la boucle de construction des liens

<?php
	connectMaBase();
	$retour = mysql_query('SELECT danseur_id FROM danseurs');
      while ($donnees = mysql_fetch_array($retour)) 
       {
	    ?> <a href="#?info=<?php echo'' . $donnees['danseur_id'] . ' ';?>"id="makeRequest">info</a>
	   <?php
	   }
		?>

Modifié par wolfou (31 Dec 2010 - 10:06)
pb de manipulation ce message est à supprimer
re kalnex

j'ai donc essayé ta solution. Problème qui subsite:

dans le fichier data.php qui sert à décrire ce que l'on veut afficher dans la page principale grâce a l'ajax.

je n'arrive pas à rentrer dans le "if " qui teste si la variable $_get Smiley truc existe.


if (isset($_GET['info'])) 
{

   $_GET['info'] = addslashes($_GET['info']);
   
     connectMaBase();
$sql = "SELECT  danseur_blaze,danseur_email, danseur_age,danseur_sexe, danseur_ville,danseur_pmini,danseur_exp,danseur_crew,danseur_discipline 
    from danseurs where danseur_id ='" . $_GET['info'] . "'";
	$req= mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error()); 	
	 while ($data = mysql_fetch_array($req))
         {
			?>Blaze:		 <?php echo '<strong><big>'.$data['danseur_blaze'].'</big></strong>';?> <br />	 <?php 
			?>Mail:		 <?php echo '<strong><big>'.$data['danseur_email'].'</big></strong>';?> <br />	 <?php 
			?>Age:		 <?php echo '<strong><big>'.$data['danseur_age'].'</big></strong>';?> <br />	 <?php 
			?>Sexe:		 <?php echo '<strong><big>'.$data['danseur_sexe'].'</big></strong>';?> <br />	 <?php 
			?>Ville:		 <?php echo '<strong><big>'.$data['danseur_ville'].'</big></strong>';?> <br />	 <?php 
			?>Photo:		<img src="miniatures_membre/<?php echo $data['danseur_pmini'];?>"/> <br />	 <?php 
			?>Expérience:		 <?php		echo '<strong><big>'.$data['danseur_exp'].'</big></strong>';?> <br />	 <?php 
			?>Crew(s):		 <?php			echo '<strong><big>'.$data['danseur_crew'].'</big></strong>';?> <br />	 <?php 
			?>Discipline:		 <?php			echo '<strong><big>'.$data['danseur_discipline'].'</big></strong>';?> <br />	 <?php 
		  
		 }
	} 
?>


En gros quand je construis mes liens avec la boucle d'affichage des nom des danseurs ainsi que leur id en paramètre je n'arrive à récupéré l'id dans le fichier data.php qui sert à l'affichage.
Du coup rien ne s'affiche... normal tu me diras

Voici la boucle de construction des liens

<?php
	connectMaBase();
	$retour = mysql_query('SELECT danseur_id FROM danseurs');
      while ($donnees = mysql_fetch_array($retour)) 
       {
	    ?> <a href="#?info=<?php echo'' . $donnees['danseur_id'] . ' ';?>"id="makeRequest">info</a>
	   <?php
	   }
		?>


j'ai essayé de mettre en lien directement le fichier data.php comme ceci afin de tester d'où provenait l'erreur :
	<?php
	connectMaBase();
	$retour = mysql_query('SELECT danseur_id FROM danseurs');
      while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les formations
       {
	    ?> <a href="data.php?info=<?php echo'' . $donnees['danseur_id'] . ' ';?>"id="makeRequest">info</a>
	   <?php
	   }
		?>


Avec ça je rentre correctement dans le if.
Problème de syntaxe du lien ? où il y a quelque chose à modifier dans le script en lui même
?
As-tu une solution stp ?
Modifié par wolfou (31 Dec 2010 - 10:06)
re kalnex

j'ai donc essayé ta solution. Problème qui subsite:

dans le fichier data.php qui sert à décrire ce que l'on veut afficher dans la page principale grâce a l'ajax.

je n'arrive pas à rentrer dans le "if " qui teste si la variable $_get Smiley truc existe.


if (isset($_GET['info'])) 
{

   $_GET['info'] = addslashes($_GET['info']);
   
     connectMaBase();
$sql = "SELECT  danseur_blaze,danseur_email, danseur_age,danseur_sexe, danseur_ville,danseur_pmini,danseur_exp,danseur_crew,danseur_discipline 
    from danseurs where danseur_id ='" . $_GET['info'] . "'";
	$req= mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error()); 	
	 while ($data = mysql_fetch_array($req))
         {
			?>Blaze:		 <?php echo '<strong><big>'.$data['danseur_blaze'].'</big></strong>';?> <br />	 <?php 
			?>Mail:		 <?php echo '<strong><big>'.$data['danseur_email'].'</big></strong>';?> <br />	 <?php 
			?>Age:		 <?php echo '<strong><big>'.$data['danseur_age'].'</big></strong>';?> <br />	 <?php 
			?>Sexe:		 <?php echo '<strong><big>'.$data['danseur_sexe'].'</big></strong>';?> <br />	 <?php 
			?>Ville:		 <?php echo '<strong><big>'.$data['danseur_ville'].'</big></strong>';?> <br />	 <?php 
			?>Photo:		<img src="miniatures_membre/<?php echo $data['danseur_pmini'];?>"/> <br />	 <?php 
			?>Expérience:		 <?php		echo '<strong><big>'.$data['danseur_exp'].'</big></strong>';?> <br />	 <?php 
			?>Crew(s):		 <?php			echo '<strong><big>'.$data['danseur_crew'].'</big></strong>';?> <br />	 <?php 
			?>Discipline:		 <?php			echo '<strong><big>'.$data['danseur_discipline'].'</big></strong>';?> <br />	 <?php 
		  
		 }
	} 
?>


En gros quand je construis mes liens avec la boucle d'affichage des nom des danseurs ainsi que leur id en paramètre je n'arrive à récupéré l'id dans le fichier data.php qui sert à l'affichage.
Du coup rien ne s'affiche... normal tu me diras

Voici la boucle de construction des liens

<?php
	connectMaBase();
	$retour = mysql_query('SELECT danseur_id FROM danseurs');
      while ($donnees = mysql_fetch_array($retour)) 
       {
	    ?> <a href="#?info=<?php echo'' . $donnees['danseur_id'] . ' ';?>"id="makeRequest">info</a>
	   <?php
	   }
		?>


j'ai essayé de mettre en lien directement le fichier data.php comme ceci afin de tester d'où provenait l'erreur :
	<?php
	connectMaBase();
	$retour = mysql_query('SELECT danseur_id FROM danseurs');
      while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les formations
       {
	    ?> <a href="data.php?info=<?php echo'' . $donnees['danseur_id'] . ' ';?>"id="makeRequest">info</a>
	   <?php
	   }
		?>


Avec ça je rentre correctement dans le if.
Problème de syntaxe du lien ? où il y a quelque chose à modifier dans le script en lui même
?
As-tu une solution stp ?
Bonjour wolfou,

Je n'ai pas l'impression que tu as changé les sources du script pour coller a tes besoins. Il faut que tu modifie les sources afin que ton action AJAX tape dans ton data.php, pas besoin de mettre l'url dans le lien en fait (pas besoin que ça soit un lien même !).

Regarde bien l'exemple pour ensuite l'adapter a tes besoins. Pour la suite met nous plus de sources (dont le script que tu as adapté pour mootools).
ok encore merci kalnex j'ai une bonne piste pour parvenir à réaliser ce que je veux faire. Je reviendrai posté ma solution.
Me revoilà avec une solution, j'ai enfin réussi après une semaine de recherche Smiley sweatdrop lol à faire ce que je voulais.

J'ai donc opter pour l'iframe qui est est assez simple à utiliser. C'est peut être pas la meilleur solution en tout cas elle me convient parfaitement.

Étant actuellement en stage j'ai rédigé un tuto sur l'iframe dans le cadre du stage. Pour ceux que ça intéresse j'ai décrit à la fin de ce tuto la solution que j'ai mis en place pour mon site.

tuto ici

Encore merci pour vos réponses.
Qu'en penses-tu Kalnex ?
Bye
Modifié par wolfou (06 Jan 2011 - 10:29)
Pourquoi pas, si cela résout ta problématique simplement et rapidement c'est très bien.
Moi spécialement j'aime pas trop les iframes, ça me rappel trop les frames imbriqué que je trouvais lors de mon premier boulot (errrk, quel m*rd* !).

En tout cas, content que tu es trouvé solution qui te convienne.
Bye,
KalNex
Sujet clos
Aller à