Discussion :

[babahou]

Bonjour,

débutant JavaScript Ajax, je me met au Jquery

Je réalise actuellement un site des plus classique avec entête sidebar et pied de page et un bloc 'tabContent' au milieu dans lequel je souhaite affiché toutes les pages du site

J'essaie donc de faire pointer tout mes lien <a href que se soit du menu (mes différentes rubriques) ou du top menu (login, s'enregistrer) ou encore de mon sidebar/footer vers ce bloc 'tabContent'
chaque lien étant une page à part et non une succession de blocs cachés

voici mon HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="global">
<?php include("entete.php");?>
<section id="Menuglobal">
  <nav>
    <ul id="nav">
      <li><a href="?p=accueil">Home</a></li>
      <li><a href="?p=quartier">Le Quartier</a></li>
      <li><a href="?p=transport">Appart</a></li>
      <li><a href="?p=partenaire">Partenaire</a></li>
      <li><a href="?p=foto">Photos</a></li>
      <li><a href="?p=formulaire_livredor">Livre dOr</a></li>
      <li><a href="?p=contact">Contact</a></li>
    </ul>
  </nav>
<?php include ("dispTabcontent.php");?>
</section>
<?php include("sidebar.php");?>
<div id="tabContent" class="blocmenu">
</div>
</div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/menupos.js" type="text/javascript"></script>
</body>

mon php qui correspond a l' include("dispTabcontent.php")

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
        if(isset($_GET['p']) && !empty($_GET['p'])) {
                $p = htmlentities($_GET['p']);
                 
                switch($p) {
                        case 'accueil': $tabContent = 'Contenu de la page "accueil"';
                        break;
                        case 'quartier': $tabContent = 'Contenu de la page "quartier"';
                        break;
                        case 'transport': $tabContent = 'Contenu de la page "transport"';
                        break;
                        case 'partenaire': $tabContent = 'Contenu de la page "partenaire"';
                        break;
                        case 'foto': $tabContent = 'Contenu de la page "foto"';
                        break;
                        case 'formulaire_livredor': $tabContent = 'Contenu de la page "formulaire_livredor"';
                        break;
                        case 'contact': $tabContent = 'Contenu de la page "contact"';
                        break;
                        case 'register': $tabContent = 'Contenu de la page "register"';
                        break;
                        case 'lost': $tabContent = 'Contenu de la page "lost"';
                        break;
                        default: $tabContent = 'Page inconnue';
                        break;
                } 
                echo $tabContent;
        }
?>

et mon JS qui correspond à menupos.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function() { // le document est chargé
    var $tabContent_div = $('#tabContent div'); // on recupere le contenu du div
    var page = $('#nav li a:first').text(); // le nom de la page demandée par défaut c'est Accueil
 
    $("a").live('click', function(event) {  // l'utilisateur clic sur un lien
 		event.preventDefault() // stop le comportement par défaut du lien
 
		var url = $(this).attr('href'); // on récupère le href de la page demandée
		var pageDemandee = $(this).text();  // on récupère le nom de la page demandée
 
        // si on appelle une page qui n est pas celle affichée
        if(pageDemandee != page) {            
            page = pageDemandee;// on met en mémoire la page à la place de defaut index
 
            // chargement dans la div
            $.ajax({
                url: url,
                cache: false,
                success: function(html) {
                   $tabContent_div.hide().html(tabContent).fadeIn("slow");		
                }
            });
        }
        return false;
    });
});

Le résultat de ce code est que les requêtes sont bien effectué (vu avec firebug) mais rien ne s'affiche dans mon bloc.

Je pense que le soucis peux provenir du php dans le sens ou mon switch répertorie tout les liens alors qu'ils sont dans des structures différentes( menu+include pour l'instant. Il y'a donc peut être un problème de famille avec les parents enfants, et cousin cousine
Mais j'ajouterai si le problème ne vient pas de la, au fur et mesure de la construction du site les autres du sidebar ou pied de page, etc.)

Ou bien du success de ma fonction JQuery qui est mal rédigé du faite que je dois surement me mélanger les pinceaux entre remplacer le contenu dans la balise et remplacer la balise par une autre, plus je parcours les tutos et les exemples de code plus je me mélange les pinceaux, je viens donc vous demander conseils.

Ou bien mais la c'est a vous de me le dire

[SpaceFrog]

Deux remarques ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 success: function(html) {
                   $tabContent_div.hide().html(tabContent).fadeIn("slow");		
                }

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var $tabContent_div = $('#tabContent div');

ton div id tabContent ne contient pas de div .... or ton selecteur en cherche un

essaye :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var $tabContent_div = $('#tabContent');

Ensuite sur ton ajax rajoute un dataType html ...
et appende le retour plutot que d'en faire un html()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('#tabContent_div').empty().hide().append($(tabContent)).fadeIn("slow");

[babahou]

Bonjour,

merci SpaceFrog pour t'es suggestions tout a fais juste. J'ai donc modifié comme tu la proposé

le résultat est qu'il m'affiche la page complète dans mon bloc principal avec re entête sidebar pied de page

j'ai tenté aussi de laisser tel quel en créant une div vide dans le tabContent, mais ça ne règle rien.

Déjà au niveau de la méthode qu'est ce qui est mieux
- d'appeler le contenu de pages php externes dans mon bloc comme j'essaie de le faire la?
- cacher les divs à la suite sur la page index et faire plutôt un script qui ne ferait apparaitre que celui appeler avec un jeu de slide ?
- ou encore de mettre tout mes php sur le même fichier externe et appeler les div id en changeant mes lien <a href="?p=accueil" par <a href="pagephp/?p=accueil"

enfin comme je débute je manque d’expérience