Rechargement de page en Ajax. Mais en double

Question

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 !

Nic0- · Answer

Salut,

Je suis pas trop spécialiste, mais,

Tu passes ta page complète en argument : « afficher(html);  »
Puis tu enlèves une partie, « $("#contenu").empty(); »
Puis, tu rajoute à la suite de la div contenu, la totalité de ta page. « $("#contenu").append(data);  »

Donc ton résultat est logique oui, il faudrait je pense ne passer en argument que le contenu et non toute la page, (afficher();)
Ou au contraire, au lieu de n'effacer que #contenu, effacer toute ta page, mais je pense que niveau ressource c'est moins performant.

Ça devrait te donner des pistes à creuser. Désolé j'en sais pas forcément plus.

Darius · Answer

Oui mais le soucis c'est que c'est ce qu'ils disent de faire ici :

http://top-news.fr/ajax-avec-jquery-exemple-changement-du-contenu-d-un-div/

Nic0- · Answer

J'ai regardé vite fait, si tu click directement sur les liens corrrespondant, tu tombes sur une page uniquement avec le contenu, en gros il n'y a pas de header sans sa page, il ne se soucis pas à parser le résultat donc.

Exemple: http://top-news.fr/demos/ajax-jquery/contenu2.html

Nic0- · Answer

Regarde peut être de ce côté là pour ne sélectionner que la partie contenu de ta page :
https://api.jquery.com/id-selector/

Zero · Answer

C'est peut-être les liens PHP ?

Darius · Answer

J'ai essayé en mettant 

var test = document.getElementById("contenu") ainsi qu'une alert quand je clique sur un lien ça affiche : 
[Object HTMLDivElement]

Nic0- · Answer

Il utilise cette fonction pour la requete ajax, dans son exemple :
https://api.jquery.com/jQuery.ajax/

Ça devrait te donner des pistes.
Le fait que les pages soit en html ou php n'auras pas d'influence sur le résultat.

Nic0- · Answer

context:
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");
      }});

Nic0- · Answer

Sinon, cette fonction pourrait t'intéresser dans le même style:
https://api.jquery.com/load/

Rechargement de page en Ajax. Mais en double

9 réponses

Discussions similaires

Newsletters