Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

ONGLET GÉNÉRÉ EN PHP ET REQUETE AJAX


Information sur la source

Catégorie :Javascript / DHTML Classé sous : onglet, tab, AJAX, xmlhttprequest, dynamique Niveau : Débutant Date de création : 29/08/2008 Date de mise à jour : 12/09/2008 16:34:18 Vu / téléchargé: 7 971 / 771

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
script qui génère des onglets,le contenu et les titres des onglets sont géré par MySQL,le script AJAX fait une requete sur une page PHP qui va chercher les donnée sur la BDD.

j'ai commenter la source  en espérant que sa puisse aider :)
 

Source

  • <?php
  • include('./connection/connection.php');//inclu les paramètres de connection à la base de donnée
  • if (!$connect)//si pas connecter a la base de donnée déclenche une érreur SQL
  • die("Erreur de connection à MySQL: " . mysql_error());
  • if (!mysql_select_db($database_connect, $connect))//si base non trouvée déclenche une erreur SQL
  • die("Erreur base de donnée non trouvée: " . mysql_error());
  • ?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <link href="./onglet.css" rel="stylesheet" type="text/css" />
  • <?php
  • echo "<script type=\"text/javascript\">\n";//génération du des paramètre pour le javascript qui seron utilisé par le script AJAX
  • echo "<!--\n";
  • $requete='SELECT * FROM multionglet';//sélectionne la table pour la gestion du contenu
  • $requeteongletjs= mysql_query($requete, $connect) or die("Erreur table non trouvée:".mysql_error());//déclenche une erreur si la table n'est pas trouvé
  • $ongletjs = mysql_fetch_object($requeteongletjs);//sélectionne le premier enregistrement de la table
  • $tabonglet=array(0 => array("onglet"=>$ongletjs->onglet,"titre"=>$ongletjs->titre,"contenu"=>$ongletjs->contenu));//stock dans un tableau a 2 dimension les donnée de la table
  • $compteur=1;//variable qui stock le nombre d'onglet a afficher
  • $valeur="'".$ongletjs->onglet."'";//stock dans la variable l'ID des onglets
  • while ($ongletjs = mysql_fetch_object($requeteongletjs))//requete pour lister toute la table
  • {
  • $valeur=$valeur.",'".$ongletjs->onglet."'";
  • $tabonglet[]=array("onglet"=>$ongletjs->onglet,"titre"=>$ongletjs->titre,"contenu"=>$ongletjs->contenu);
  • $compteur++;
  • }
  • echo"compteur=".$compteur.";\n";//variable transformer en javascript pour utilisation avec le script AJAX pour avoir le nombre d'onglet
  • echo "tabu=[".$valeur."];\n";//variable qui va stocker toute les ID transmit pour le script AJAX
  • echo "//-->\n";
  • echo "</script>\n";
  • ?>
  • <script type="text/javascript" src="onglet.js"></script>
  • <title>onglet</title>
  • </head>
  • <body>
  • <table border="0" width="400" align="center">
  • <tr>
  • <td>
  • <?php
  • echo " <ol id=\"tabnav\">\n";
  • echo " <li><a href=\"javascript:onglet('".$tabonglet[0]["onglet"]."');\" class=\"active\" id=\"".$tabonglet[0]["onglet"]."\">".$tabonglet[0]["titre"]."</a></li>\n";//génère l'onglet actif
  • $i=1;
  • while ($i<$compteur)
  • {
  • echo " <li><a href=\"javascript:onglet('".$tabonglet[$i]["onglet"]."');\" id=\"".$tabonglet[$i]["onglet"]."\">".$tabonglet[$i]["titre"]."</a></li>\n";//génère les autres onglets
  • $i++;
  • }
  • echo " </ol>\n";
  • echo " <div id=\"contenu\" class=\"tabtour\"><br/>".$tabonglet[0]["contenu"]."<br/><br/></div>\n";//génère le div qui va contenir les données de l'onglet
  • ?>
  • </td>
  • </tr>
  • </table>
  • </body>
  • </html>
  • <?php
  • mysql_close($connect);//fermeture de la connection SQL
  • ?>
<?php
include('./connection/connection.php');//inclu les paramètres de connection à la base de donnée
    if (!$connect)//si pas connecter a la base de donnée déclenche une érreur SQL
       die("Erreur de connection à MySQL: " . mysql_error());	   
if (!mysql_select_db($database_connect, $connect))//si base non trouvée déclenche une erreur SQL
       die("Erreur base de donnée non trouvée: " . mysql_error());
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="./onglet.css" rel="stylesheet" type="text/css" />
<?php
echo "<script type=\"text/javascript\">\n";//génération du des paramètre pour le javascript qui seron utilisé par le script AJAX
echo "<!--\n";
$requete='SELECT * FROM multionglet';//sélectionne la table pour la gestion du contenu
$requeteongletjs= mysql_query($requete, $connect) or die("Erreur table non trouvée:".mysql_error());//déclenche une erreur si la table n'est pas trouvé
$ongletjs = mysql_fetch_object($requeteongletjs);//sélectionne le premier enregistrement de la table
$tabonglet=array(0 => array("onglet"=>$ongletjs->onglet,"titre"=>$ongletjs->titre,"contenu"=>$ongletjs->contenu));//stock dans un tableau a 2 dimension les donnée de la table
$compteur=1;//variable qui stock le nombre d'onglet a afficher
$valeur="'".$ongletjs->onglet."'";//stock dans la variable l'ID des onglets
while ($ongletjs = mysql_fetch_object($requeteongletjs))//requete pour lister toute la table
{
	$valeur=$valeur.",'".$ongletjs->onglet."'";
	$tabonglet[]=array("onglet"=>$ongletjs->onglet,"titre"=>$ongletjs->titre,"contenu"=>$ongletjs->contenu);
	$compteur++;
}
echo"compteur=".$compteur.";\n";//variable transformer en javascript pour utilisation avec le script AJAX pour avoir le nombre d'onglet
echo "tabu=[".$valeur."];\n";//variable qui va stocker toute les ID transmit pour le script AJAX
echo "//-->\n";
echo "</script>\n";
?>
<script type="text/javascript" src="onglet.js"></script>
<title>onglet</title>
</head>
<body>
<table border="0" width="400" align="center">
  <tr>
  	<td>
<?php

echo "		<ol id=\"tabnav\">\n";
echo "			<li><a href=\"javascript:onglet('".$tabonglet[0]["onglet"]."');\" class=\"active\" id=\"".$tabonglet[0]["onglet"]."\">".$tabonglet[0]["titre"]."</a></li>\n";//génère l'onglet actif
$i=1;
	while ($i<$compteur) 
		{
					echo "			<li><a href=\"javascript:onglet('".$tabonglet[$i]["onglet"]."');\" id=\"".$tabonglet[$i]["onglet"]."\">".$tabonglet[$i]["titre"]."</a></li>\n";//génère les autres onglets
					$i++;
		}
echo "		</ol>\n";
echo "		<div id=\"contenu\" class=\"tabtour\"><br/>".$tabonglet[0]["contenu"]."<br/><br/></div>\n";//génère le div qui va contenir les données de l'onglet
?>
	</td>
  </tr>
</table>
</body>
</html>
<?php
mysql_close($connect);//fermeture de la connection SQL
?>

Conclusion

tous est dans le zip,tester sous IE7,firefox 2 et 3,safari sans aucun problème

PS:j'ai vue que sur l'onglet actif en bas a gauche il manque 1 pixel pour je ne c'est trop quel raison je vais essayer de trouver la solution
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

29 août 2008 19:15:27 :
correction du titre :)
29 août 2008 21:33:29 :
correction sur le pixel manquant en bas à gauche (c'était dans la feuille de style :) )
12 septembre 2008 16:33:07 :
mise a jour du code suite au bug rencontrer sous easyphp.
12 septembre 2008 16:34:18 :
Mise a jour du code suite au bug rencontrer sous easyphp

Commentaires et avis

signaler à un administrateur
Commentaire de viki53 le 29/08/2008 19:09:55

C'est "onglet généré". ;)

Et pourquoi XML ? J'ai regardé vite fait et j'en vois pas là ...

signaler à un administrateur
Commentaire de PHPLizardo le 29/08/2008 19:12:50

Je n'ai pas encore consulté tes sources mais je te remercie d'avoir posté ton projet. Cela m'a donné une bien bonne idée.

signaler à un administrateur
Commentaire de djmmix le 29/08/2008 19:14:08

ha oui dans le tag désolé je me suis tromper ^^' et je c'est pas si je peut modifier le titre :'(

signaler à un administrateur
Commentaire de djmmix le 29/08/2008 19:16:25

titre et tag modifié suite au remarque de VIKI53

signaler à un administrateur
Commentaire de djmmix le 29/08/2008 19:17:21

on est la pour sa PHPLizardo :)

signaler à un administrateur
Commentaire de bma1980 le 12/09/2008 12:54:10

Bonjour

en essayant d'exécuter le code j'ai une erreur "Notice: Undefined offset: 3 in c:\program files\easyphp1-8\www\onglet\onglet.php on line 45"
je sais que ce 3 est un index introuvable mais je sais pas comment résoudre.
Merci de m'aider.

signaler à un administrateur
Commentaire de djmmix le 12/09/2008 16:30:57

bonjour BMA1980 apparament sous easyphp il fait une boucle while suplémentaire
(je viend e tester sous easyphp 2.0b1) chose etrange mais facilement contournable,alors que sous wamp server il effectue bien le nombre de boucle indiquer (même su mon site distant d'ailleur) donc n'aillaint pas tester sous esayphp je n'avai pas vue ce bug  pour le corrigé va a la boucle while -avant:while ($tabonglet[$i])  -après:while ($i<$compteur)
et la plus de bug sous easyphp :) je vais corrigé ma source  pour evité tout autre bug.

signaler à un administrateur
Commentaire de bma1980 le 17/09/2008 14:49:05

Merci DJMMIX,
je viens de contourné le problème chez moi en modifiant la ligne 45 comme suit  "while ($tabonglet[$i] && $i<3 )" et j'ai ajouter un 4ième enregistrement dans la table, je sais que c'est pas une solution mais j'ai plus l'erreur.

signaler à un administrateur
Commentaire de djmmix le 17/09/2008 22:52:32

Salut bma1980 ,

au pire retélécharge ma source car j'ai fait les modifications nécessaire pour que même si tu rajoute un onglet dynamiquement que tu ne sois plus laiser par ce problème car la aparament tu ne peu géré que onglet et pas plus alors que le script est pas limiter.

Enfin après tout c'est toi qui vois ^^

signaler à un administrateur
Commentaire de calfou le 07/04/2009 09:25:56 9/10

Salut,

Ta source est bien expliqué, j'ai eu aucun mal à l'adapter à mon site et je voulais juste te dire merci pour cette source. Après quelques modifs, chacun des onglets peut avoir une autre fonction que de donner ce qu'il y a dans la table multionglet.

Exemple :
- Onglet 1 -> recup du texte dans la table multionglet
- Onglet 2 -> recup des derniers commentaires dans ma table commentaires
- Onglet 3 -> recup des derniers articles
ect.

Franchement merci pour la source

Ah oui, pourquoi écris tu <br/> au lieu de <br />?

signaler à un administrateur
Commentaire de djmmix le 19/05/2009 16:15:08

salut CALFOU,

merci pour cet encouragement, bien sur on peut adapter le contenu suivant ce qu'on a envi, moi j'ai donné une petite base de donnée a titre d'exemple mais comme dit précédément on peut tres bien l'adapter au besoin ;)

pour <br/> question d'habitude et sa ne change en rien la validation XHTML 1.0 transitional du W3C (oui j'ai testé sa validité sur WC ^^ )

signaler à un administrateur
Commentaire de djmmix le 19/05/2009 16:16:52

W3C pas WC pardon,
si les admins peuvent modifier sa merci ^^'

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

AJAX PHP send var [ par cedriclomb ] Bonjour,Bon la j'y pige que couik !Alors voila le problème, je cherche a envoyer un fomulaire à PHP avec AJAX et une méthode POST, j'ai fait des reche Pb de sécurité avec Ajax et XMLHttpRequest [ par cz1702 ] Bonjour &#224; tous,est il possible d'ouvrir une page sur un autre domaine que celui du site en cours avec XMLHttpRequest (sans contraindre l'utilisat XmlHttpRequest (AJAX) [ par BenXbox ] Salut à tous, Je cherche à actualiser une page avec le XmlHttpRequest(AJAX) toutes les 20 secondes. Cette page s'appel EnLigne.php Merci d'avance. Menu deroulant dynamique ajax [ par ns_deux ] Bonjour, Je cherche à faire un menu deroulant dynamique qui va interroger ma base mysql en temps réel. J'aimerais que, lorsque je cliques sur mon menu navigation avec ajax [ par speedylol ] bonjour je me demandais si quelqu'un aurais une idée pour changer la fin du script pour naviger avec le centre dans une veuille de style css a la GET onglet dynamique!!!!!!!!!!! [ par hicham_899 ] bonjour j'ai entrain de chercher comment faire un page web qui contient des onglets(comme site de fnac) dynamique sachant que l' administrateur de sit recuperer un input de type radio dans ajax [ par moumourourou ] Salut,j'ai un formulaire ou j'ai 2input radioje veux récupérer le input choisis pour faire une requête de sélection d'une base de donnéedonc si vous v dynamique ou statique? [ par kanathan90 ] Je voudrais écrire une page Web qui crypte un message entré par un utilisateur.étant donné que le messsage ne devrait pas parcourir le réseau sans êtr comment spprimer une ligne de tableau dynamique? [ par bkhbkh ] bkh je cherche comment supprimer une ligne de tableau dynamique et aussi leurs données de la tableau comme par exemple le cas de boite mail reçu où on récupérer une variable dynamique [ par rah5dieu5soleil ] bonjour, comme le sujet l'indique, je souhaiterais récupérer la valeur d'un champ dynamique ce, grâce à une entrée de texte dans une zone prévue à ce


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


HTC G1

Entre 449€ et 449€


Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,780 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.