Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Incontournables XHTML / CSS :

Forum Alsacréations : CSS et Standards Web · Applications Web en ligne · Est-il possible d'afficher le contenu d'une page php dans un div ?
Rechercher dans le sujet :
Auteur
stounfr
# 19 Feb 2008 - 01:10:19
Citer
11 Posts
 Bonjour,

je me demandais s'il était possible d'afficher le contenu d'une page php dans un div calque, après avoir cliquer sur un lien.
En gros, j'ai une page php qui affiche une liste de musiciens sous forme de vignettes (récupéré d'une base de données) et lorsque l'on sélectionne un musicien une nouvelle page s'affiche avec toutes les infos sur le musicien. J'aimerai afficher ces infos dans un div de cette même page.
Je ne demande pas que l'on me ponde un code miracle, mais juste si c'est possible et réalisable.
Bon après, tout conseil est plus que bienvenu...

Stounfr
^
dew
# 19 Feb 2008 - 01:43:22
Citer
Administrateur
719 Posts
 En "ajax" (javascript+php) grâce à innerHTML.
Mais il faut bien en mesurer l'intérêt et la non-accessibilité.

http://forum.alsacreations.com/topic-5-17545-1-Resolu-InnerHTML-version-DOM.html
http://forum.alsacreations.com/topic-24-26440-1-ResoluAjax-Rechargement-dune-partie-de-page.html
http://forum.alsacreations.com/topic-20-30567-1-Actualiser-une-div-dans-une-page-web-div-dynamique.html
etc...

Ou bien masquer les infos à l'origine et ne les dévoiler qu'au bon moment (en javascript+css).
http://www.blup.fr/ 
^
Florent V.
# 19 Feb 2008 - 10:18:47
Citer
On va manger des chips.
Modérateur
13465 Posts
 S'il y a 4-5 musiciens, la solution Javascript + CSS est plutôt adaptée.
Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
http://www.covertprestige.net 
^
stounfr
# 20 Feb 2008 - 03:39:40
Citer
11 Posts
 Ok, merci pour les infos,

J'ai regardé les liens et j'essaye de trouver comment combiner le tout.
Pour l'instant il n'y a que 6-7 musicien, mais cela va changer c'est pour cela que tout les renseignements sur les musiciens sont sur une base de données.
Voici mon code :


			<div style="position:absolute;top:260px;left:20px;width:35px;height:14px;">

				<?php

				$connexion = mysql_connect('SERVEUR', 'USER', 'PASSWORD') or die ("Connexion au serveur impossible");

				$db = mysql_select_db("db", $connexion) or die ("Sélection de la base impossible");

				$query = "SELECT * FROM residents WHERE type LIKE'Music'";

				$result = mysql_query($query) or die ("Exécution de la requête impossible");

				$total = mysql_num_rows($result);

    			// on affiche les informations de l'enregistrement en cours

    			if($total) {

    			echo '<div class="news_slider music">

            			<div class="messaging">

                		Please Note: You may have disabled JavaScript.

            			</div>

            			<a href="#skip_to_news_1" class="skip">Skip to news content.</a>

            			<a href="#" class="prev"><img src="images/prev.png" width="20" height="20" alt="Previous" title="Previous" env="images" /></a>

            			<a href="#" class="next"><img src="images/next.png" width="20" height="20" alt="Next" title="Next" env="images" /></a>

            			<div class="news_items">

               			 <a name="skip_to_news_1"></a>

               			 <div class="container fl">';

               			 while($row = mysql_fetch_array($result))

    					{

    					echo '<div class="item fl">

                        	<a href="/"><img src="images/photo.gif" width="65" height="65" alt="" class="fl" /></a>

                        	<div class="fl">

                            '.$row['nom'].'<br />

                            '.$row['activite'].'<br />

                            <a href="montreresident.php?id='.$row['id'].'" target="_Blank">Montrer</a>

                        	</div>

                    		</div>';

       					 }



    					}

    					else echo 'Pas d\'enregistrement dans cette table…';

    					mysql_free_result($result);

    	       		 echo '

                        </div>

            </div>

        </div>';

		mysql_close();

				?></div>


Je sais que tout va se jouer au niveau du lien, mais ...
^
koala64
# 20 Feb 2008 - 08:01:44
Citer
Modérateur
3980 Posts
 Salut, smile

Il faut, via JS, au chargement de la page :

- Sélectionner ton lien
- Lui affecter un gestionnaire d'événement (une fonction) au clic
- Générer un conteneur pour acceuillir le résultat de tes requêtes Ajax

Dans ce gestionnaire, tu dois :

- Faire une requête Ajax en transmettant via la méthode get le même paramètre que dans l'url de ton lien (*)
- Mettre en forme le résultat si ce n'est pas fait côté serveur
- Insérer le résultat dans le conteneur précédemment généré
- Annuler l'action normale du lien pour éviter le changement de page

(*): Tu peux, lorsque tu passes par l'Ajax, ajouter un paramètre supplémentaire (ex: ajax=true) afin de filtrer les données renvoyées (il ne faut sélectionner que le résultat de la requête SQL voire sa mise en forme... et non toute la page comme ce serait le cas si la requête était effectuée via PHP)

PS: Le mieux serait de mettre ce module dans un fichier à part et de l'insérer en include (utile lorsque JS est inactif) afin de minimiser les données à filtrer lors des requêtes Ajax (vu que tu n'aurais plus que ce module)

NB: Si tu passes par de l'Ajax, tes utilisateurs perdront l'historique de navigation et la possibilité de bookmarker les pages contenant les infos de chaque musicien.
Modifié par koala64 (20 Feb 2008 - 08:04)
^
stounfr
# 20 Feb 2008 - 15:21:59
Citer
11 Posts
 ok merci koala64,

je regarde ca dans le journée et je vous tiens au jus...
Stoun
^
stounfr
# 21 Feb 2008 - 02:17:50
Citer
11 Posts
 Bon j'ai regardé les différents liens et voici ce que j'ai trouvé :

ma fonction envoi page php dans une div


		<script type="text/javascript">

		function envoieRequete(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");

	    

	    // 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 )

		{

		// j'affiche dans la DIV spécifiées le contenu retourné par le fichier

		document.getElementById().innerHTML = xhr_object.responseText;

		}

		}

	    // dans le cas du get

		xhr_object.send(null);

		}

		</script>


et mon code php



			<div style="position:absolute;top:260px;left:20px;width:35px;height:14px;">

				<?php

				$connexion = mysql_connect('SERVEUR', 'USER', 'PASSWORD') or die ("Connexion au serveur impossible");

				$db = mysql_select_db("db", $connexion) or die ("Sélection de la base impossible");

				$query = "SELECT * FROM residents WHERE type LIKE'Music'";

				$result = mysql_query($query) or die ("Exécution de la requête impossible");

				$total = mysql_num_rows($result);

    			// on affiche les informations de l'enregistrement en cours

    			if($total) {

    			echo '<div class="news_slider music">

            			<div class="messaging">

                		Please Note: You may have disabled JavaScript.

            			</div>

            			<a href="#skip_to_news_1" class="skip">Skip to news content.</a>

            			<a href="#" class="prev"><img src="images/prev.png" width="20" height="20" alt="Previous" title="Previous" env="images" /></a>

            			<a href="#" class="next"><img src="images/next.png" width="20" height="20" alt="Next" title="Next" env="images" /></a>

            			<div class="news_items">

               			 <a name="skip_to_news_1"></a>

               			 <div class="container fl">';

               			 while($row = mysql_fetch_array($result))

    					{

    					echo '<div class="item fl">

                        	<a href="/"><img src="images/photo.gif" width="65" height="65" alt="" class="fl" /></a>

                        	<div class="fl">

                            '.$row['nom'].'<br />

                            '.$row['activite'].'<br />

                            <a href="#" onclick="envoieRequete('montreresident.php?id=.$row['id'].','montrearticle');">Montrer</a>

                        	</div>

                    		</div>';

       					 }



    					}

    					else echo 'Pas d\'enregistrement dans cette table…';

    					mysql_free_result($result);

    	       		 echo '

                        </div>

            </div>

        </div>';

		mysql_close();

				?></div>


l'erreur retourné lors du chargement de ma page resident.php est :

Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in /homepages/3/d233168836/htdocs/residents.php on line 140

cette ligne correspond a celle ci :



<a href="#" onclick="envoieRequete('montreresident.php?id=.$row['id'].','montrearticle');">Montrer</a>


j'ai essayé avec '.$row['id']',' avec '' et ';'....
^
SiDi
# 22 Feb 2008 - 21:48:32
Citer
Les chips say le mal !
119 Posts
 
<a href="#" onclick="envoieRequete('montreresident.php?id='.$row['id'],'montrearticle');">Montrer</a>


Je crois que c'est ça. En fait, tu concatènes 'montreresident.php?id=' et $row['id'] avec ., et ensuite tu mets ta virgule (sans fermer de guillemet puisqu'aucun n'est ouvert !!), avant de placer la seconde variable. Dans ton code, tu rouvrais un guillemet...
Modifié par SiDi (22 Feb 2008 - 21:48)
http://www.2nt.free.fr msn 
^
stounfr
# 23 Feb 2008 - 16:41:50
Citer
11 Posts
 Ca marche pas, je n'ai plus cette erreur php, mais les données ne sont pas transmise d'une page à l'autre...
Je me demande bien pourquoi...
Bref je cherche toujours...
Merci de votre aide en tout cas... cligne

^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.7.9 © dew
Contacter l'administrateur - 6.7 ms - Charte