Partage

[JQuery] Actualisation de la page en AJAX

Recharge deux fois la page !

Sujet résolu

19 décembre 2010 à 21:47:32

Bonsoir à tous !
Je suis en train de suivre un tutoriel pour actualiser le contenu de mes pages en AJAX, donc le contenu de la div : contenu justement.

Le soucis c'est que ça me charge ma page deux fois,
C'est à dire, que j'ai deux vois le header, et deux fois le footer !

Mes pages sont au format : index.php?page=inscription

// Vérifie que la page est bien chargée
$(document).ready(function(){
    $("#footer a").click(function() {
        // Variable avec l'url de la page
        page=($(this).attr("href"));
       
        // On fait une requête ajax
       
        $.ajax ({
            url : page,
            cache: false,
            success:function(html){
               afficher(html);
            },
            error:function(XMLHttpRequest,textStatus, errorThrown) {
                alert(textStatus);
            }
        })
        return false;
    });
});

// Fonction qui va permettre d'afficher le contenu

function afficher(data){
// On veut vider le contenu d'une div
$("#contenu").empty();
// On va afficher le nouveau contenu
$("#contenu").append(data);
}

Ou est le probleme ?
Merci à tous !

Desolation

19 décembre 2010 à 23:17:13

On peut voir le HTML ? Es-tu certain d'avoir un seul et unique #contenu dans ta page au final ?

http://chez-syl.fr/

Astriel

19 décembre 2010 à 23:21:57

Au départ j'ai bien une seule div contenu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
                <link rel="stylesheet" media="screen" type="text/css" title="Design" href="css/index.css">
        <title>Test</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/navigation.js"></script>
    </head>
    <body>
        <div id="header">
        <h1>Connexion</h1>
        <label for='pseudo'>Pseudo : </label><input type='text' name='pseudo' id='pseudo' size='' maxlength=''><label for='password'>Mot de passe : </label><input type='password' name='password' id='password' size='' maxlength=''><input type='submit' value='Connectez-vous'/>    <a href="index.php?page=inscription">Inscription</a>
    <a href="index.php?page=lost-password">Mot de passe oublié</a>
    </div>
        <div id="contenu">
        <p>Test</p>
    </div>
        <div id="footer">
    <h1>Pied de page</h1>
    <a href="/mvc/" >Index</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="index.php?page=contact">Contact</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="index.php?page=mentions">Qui sommes nous</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
    </body>
</html>

Dans ma page final,
Dans le code source HTML, il n'y a bien qu'une div contenu. Par contre dans celle JS c'est pas le cas.

En même temps ce n'est pas normal ? Je rajoute toute ma page après la div contenu toute à la fin de ma fonction alors qu'il faudrait juste que je rajoute le contenu de la div contenu justement ?

OQuentinO

19 décembre 2010 à 23:34:27

Bonsoir,

Je ne suis pas un pro.

Tu passes ta page complète en argument : afficher(html);
Puis tu enlèves une partie : $("#contenu").empty();
Puis, tu rajoutes à la suite de la div contenu, la totalité de ta page. $("#contenu").append(data);

Donc ça serait logique que ça plante non ?

Quentin.

Astriel

19 décembre 2010 à 23:37:12

Bonsoir,

Le soucis c'est bien ce qu'ils disent de faire sur le tutoriel vidéo ainsi que ici :

http://top-news.fr/ajax-avec-jquery-ex [...] enu-d-un-div/

De plus avec la doc j'ai essayé :
http://jquery.jarodxxx.com/manuel/Les-attributs/html/

Mais sans grand succès non plus.

Desolation

19 décembre 2010 à 23:39:10

Je suis pas certain de tes liens MVC.

Ce que je te propose c'est d'essayer simplement ceci :

$(document).ready(function(){
    $('#footer a').click(function() {
		$('#contenu').load($(this).attr('href'));
    });
});

Si ça va pas mieux crée une page contact.html et mets le code HTML à l'intérieur, ensuite modifie ton lien href en conséquence.

http://chez-syl.fr/

Astriel

19 décembre 2010 à 23:41:45

Je viens d'essayer ta fonction.

Ca charge la page comme si l'Ajax et le Javascript n'était pas pris en compte !

De plus mes pages sont pas en HTML mais en PHP et je changerai surement les URL avec l'URL rewriting. Ca ne viendrait pas de là ?

Ou alors il ne faudrait pas juste charger le contenu de la div contenu à la place de mettre : HTML dans afficher() ?

Desolation

20 décembre 2010 à 6:36:53

Je suis allé voir sur ton site. A mon avis le problème vient du PHP, tu as dû mal placer tes isset() .

Regarde bien quand tu vas à cette adresse (index.php?page=contact) au lieu d'avoir par exemple un texte simple "Page contact" tu as tout le design, ça fait doublon. Place mieux tes accolades PHP pour afficher seulement le texte. Ton design lui ne doit pas bouger et doit être tout le temps affiché, tu as juste à jouer avec les conditions PHP pour afficher le bon texte.

http://chez-syl.fr/

Astriel

20 décembre 2010 à 10:51:01

Salut.

Ca ne viendrait pas plutôt de ce qu'à dit : Quentin ?

Tu passes ta page complète en argument : afficher(html);
Puis tu enlèves une partie : $("#contenu").empty();
Puis, tu rajoutes à la suite de la div contenu, la totalité de ta page. $("#contenu").append(data);

Je la div, puis à la suite de la div je rajoute toute la page puisque c'est HTML ! Alors qu'il faudrait juste rajouter le contenu de la div contenu non ?

Concernant les isset je n'en ai pas !

Voici comment ça marche :

<?php session_start();
include 'Controller/main.php';
$design = design($_GET['page']);
connect();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="css/<?php echo $design ?>">
        <title>Test</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/navigation.js"></script>
    </head>
    <body>
        <?php
        include'View/header.php';
        ?>
        <div id="contenu">
        <?php
        load($_GET['page']);
        ?>
        </div>
        <?php
        include'View/footer.php';
        ?>
    </body>
</html>

Et le fonction de chargement :

<?php // Fonction qui gère le chargement de la page ainsi que toutes les includes à chaque chargement
function load($page) {

    if (!empty($_GET['page']) && is_file('Controller/'.$page.'.php')) {
        model($page);
        view($page);
        include 'Controller/'.$page.'.php';
    }
    else {
        model('index');
        view('index');
        include 'Controller/index.php';
    }
}
?>

Golmote

20 décembre 2010 à 11:58:31

Euh... tes pages index.php?page=contact, etc. ne doivent contenir que le contenu hein !

Si elles contiennent une code HTML d'une page complète, avec header et tout le blabla, c'est normal qu'il soit inclus.

Recharger avec Ajax, c'est un peu le principe de l'include PHP... Si tu "include" une page complète dans une autre page complète, ça peut pas coller.

Astriel

20 décembre 2010 à 12:10:02

D'accord ... Je viens de comprendre ... Et ce n'est pas possible d'inclure que le contenu de la div ou il y a le contenu justement ?

De plus, avec la structure MVC, pas facile qu'il n'y ai que du contenu non ?

De plus la fonction Ajax de Jquery ne permet-elle pas de faire ça ? :
contextObject
This object will be made the context of all Ajax-related callbacks. For example specifying a DOM element as the context will make that the context for the complete callback of a request, like so:

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

Lien : http://api.jquery.com/jQuery.ajax/

Golmote

20 décembre 2010 à 12:28:13

Quelle structure MVC ? C'est quoi MVC ? o_O

Le contextObject, ça n'a rien à voir avec ça. C'est juste pour choisir que référencera this dans les callbacks.

Franchement, je pense qu'il est préférable que tu ne mettes que le contenu.

L'idée serait d'avoir des liens index.php?page=machin pour les sans-JS, et en jQuery, tu charges par exemple des liens index-ajax.php?page=machin avec juste le contenu quoi.

Astriel

20 décembre 2010 à 12:39:58

La structure MVC c'est la structure que j'utilise pour mon projet !
Un découpage en : Controller / Vue / Model

D'ou mes liens en : index.php?page=machin

Mais dans ces cas là comment faire pour tu charges par exemple des liens index-ajax.php?page=machin avec juste le contenu quoi ?

C'est à dire différencier avec et sans AJAX ?

Golmote

20 décembre 2010 à 12:53:57

Oui c'est exactement ça.

Quitte à mettre dans index.php?page=machin un include du contenu depuis index-ajax.php?page=machin

Le but étant juste d'avoir tes contenus séparés.

Astriel

20 décembre 2010 à 13:00:04

Le but c'est d'avoir un design fixe, et juste d'avoir le contenu dans un fichier ?

Mais dans ces cas là comment faire ça : Quitte à mettre dans index.php?page=machin un include du contenu depuis index-ajax.php?page=machin

?

Je veux dire, quand est ce qu'on doit charger la page index-ajax et quand qu'est ce qu'on charge l'index normal ?

Golmote

20 décembre 2010 à 14:04:56

Bah en gros, tu as tes pages schématisées ainsi :

<?php include 'View/header.php'; ?>
<div id="contenu">
<?php include 'index-ajax.php?page=machin'; ?>
</div>
<?php include 'View/footer.php'; ?>

index-ajax.php?page=machin contenant donc le contenu de la page index.php?page=machin.

Ensuite, quand tu as un lien l'idée est là suivante :

$(function() {
    $("#footer a").click(function() {
        // Variable avec l'url de la page
        // On construit l'url du contenu
        // grâce à l'url réelle
        page=($(this).attr("href"));
        page=page.substring(page.indexOf('?'));
        page="index-ajax.php"+page;
       
        // On fait une requête ajax
       
        $.ajax ({
            url : page,
            cache: false,
            success:function(html){
               afficher(html);
            },
            error:function(XMLHttpRequest,textStatus, errorThrown) {
                alert(textStatus);
            }
        })
        return false;
    });
});

Tout ça étant bien sûr simplement un concept à travailler et adapter à ta situation.

Astriel

20 décembre 2010 à 14:35:51

D'accord !
Mais le soucis c'est qu'avec ma structure, le design est fixe ! Et normalement, je charge bien du contenu.

Je ne sais pas si tu as vu ma fonction de chargement quelques messages plus haut ?

Golmote

20 décembre 2010 à 15:48:20

Et tu peux pas la modifier cette fonction de chargement ?

Astriel

20 décembre 2010 à 17:20:36

Et bien normalement avec ma structure, cela charge 3 fichiers.
Le fichier :
contact.php dans le dossier Controller.
Celui dans le dossier Model
Celui dans le dossier View que j'assemble pour ainsi dire.

Le tout est inclue dans la div contenu ...

Donc logiquement, je charge que du contenu avec ma structure donc ça devrait pouvoir marcher non ?

OQuentinO

21 décembre 2010 à 12:46:28

Et si tu mettais ta div contenu dans autre chose que l'index ?