AJAX
set13
Messages postés
6
Statut
Membre
-
set13 Messages postés 6 Statut Membre -
set13 Messages postés 6 Statut Membre -
Bonjour, j'ai élaboré l'architecture du nouveau site (offline pour l'instant) de notre association (Seven Set Subculture) à l'aide de CSS, notamment un menu et un sous-menu, et je souhaiterais utiliser l'ajax (httprequest...) pour qu'à l'aide du sous-menu l'utilisateur puisse afficher (et charger en toile de fond le cas échéant) les pages dans une div "contenu" sans recharger à chaque fois la page entière... J'espère avoir été clair dans ma description?! J'ai trouvé différents exemples mais je n'arrive pas à les adapter à ma page (qui est en xhtml). Je sais que ce n'est pas grand chose pour celui qui sait, mais j'aurais besoin d'un coup de pouce! Merci.
8 réponses
Bonsoir un super site cadeaux avec un tuto super :D
https://www.grafikart.fr/tutoriels/navigation-ajax-33
https://www.grafikart.fr/tutoriels/navigation-ajax-33
set13
Messages postés
6
Statut
Membre
Merci rodriguemarly, j'irai voir ça...(demain)
Slt, merci pour ce tuto, il a presque résolu mes problèmes.
J'ai un petit souci: tout fonctionne très bien mis à part que les différentes pages html que je charge débordent de la div #contenu! Comment remédier à ça??? Il faut que je précise que ma page principale est en xhtml et non en php, est-ce qu'il y a des modifications à apporter pour adapter l'ajax à ma config? Merci de m'aider.
J'ai un petit souci: tout fonctionne très bien mis à part que les différentes pages html que je charge débordent de la div #contenu! Comment remédier à ça??? Il faut que je précise que ma page principale est en xhtml et non en php, est-ce qu'il y a des modifications à apporter pour adapter l'ajax à ma config? Merci de m'aider.
Pour récupérer le contenu de ton div #contenu :
Remplace xhr.responseText par la chaine qui contient le retour de la requête AJAX. Il te suffira de faire un innerHTML de la variablecontenu dans le div #contenu :
Pour améliorer la navigation, stocke les urls visitées dans un array pour pouvoir faire un système précédent/suivant (avec AJAX, ceux du navigateur ne fonctionne pas car il n'y a aucune changement de page).
Expression = new RegExp("<div id=\"contenu\">(.+)</div>","gi");
resultat = Expression.exec(xhr.responseText);
contenu = resultat[0];
Remplace xhr.responseText par la chaine qui contient le retour de la requête AJAX. Il te suffira de faire un innerHTML de la variablecontenu dans le div #contenu :
document.getElementById('contenu').innerHTML = contenu;
Pour améliorer la navigation, stocke les urls visitées dans un array pour pouvoir faire un système précédent/suivant (avec AJAX, ceux du navigateur ne fonctionne pas car il n'y a aucune changement de page).
Slt,
excuse-moi "avion-f16", étant donné le peu d'expérience que j'ai en code et en javascript, pourrais-tu être plus explicite quant aux emplacements dans lesquels je doit insérer les lignes que tu m'a conseillées d'ajouter?
Merci et désolé pour mon manque de connaissance.
-Où dois-je insérer ces lignes (dans le code source de la page ou dans le js, et à quel endroit...) :
Expression = new RegExp("<div id=\"contenu\">(.+)</div>","gi");
resultat = Expression.exec(xhr.responseText);
contenu = resultat[0];
-Qelle est ma chaine qui contient le retour de la requête AJAX?
Remplace xhr.responseText par la chaine qui contient le retour de la requête AJAX.
-Où dois-je insérer ces lignes (dans le code source de la page ou dans le js, et à quel endroit...) :
document.getElementById('contenu').innerHTML = contenu;
-Voici mon code du fichier "navigation.js" :
$(document).ready(function(){
$("#sousmenu a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "contenu/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
alert(textStatus);
}
})
return false;
});
});
function afficher(data){
$("#contenu").fadeOut(500,function(){
$("#contenu").empty();
$("#contenu").append(data);
$("#contenu").fadeIn(1000);
})
}
excuse-moi "avion-f16", étant donné le peu d'expérience que j'ai en code et en javascript, pourrais-tu être plus explicite quant aux emplacements dans lesquels je doit insérer les lignes que tu m'a conseillées d'ajouter?
Merci et désolé pour mon manque de connaissance.
-Où dois-je insérer ces lignes (dans le code source de la page ou dans le js, et à quel endroit...) :
Expression = new RegExp("<div id=\"contenu\">(.+)</div>","gi");
resultat = Expression.exec(xhr.responseText);
contenu = resultat[0];
-Qelle est ma chaine qui contient le retour de la requête AJAX?
Remplace xhr.responseText par la chaine qui contient le retour de la requête AJAX.
-Où dois-je insérer ces lignes (dans le code source de la page ou dans le js, et à quel endroit...) :
document.getElementById('contenu').innerHTML = contenu;
-Voici mon code du fichier "navigation.js" :
$(document).ready(function(){
$("#sousmenu a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "contenu/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
alert(textStatus);
}
})
return false;
});
});
function afficher(data){
$("#contenu").fadeOut(500,function(){
$("#contenu").empty();
$("#contenu").append(data);
$("#contenu").fadeIn(1000);
})
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Voilà ton nouveau navigation.js :
« Ma » technique permet d'éviter à devoir créer un second fichier contenant que le contenu sans les menus. Ainsi, tu peux faire ta requête AJAX vers une page contenu les menus, le header, le footer, ... ça ne prendra au final que le contenu du div #contenu.
$(document).ready(function(){
$("#sousmenu a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "contenu/"+page,
cache:false,
success:function(html){
Expression = new RegExp("<div id=\"contenu\">(.+)</div>","gi");
resultat = Expression.exec(html);
afficher(resultat[0]);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
alert(textStatus);
}
});
return false;
});
});
function afficher(data){
$("#contenu").fadeOut(500,function(){
$("#contenu").empty();
$("#contenu").append(data);
$("#contenu").fadeIn(1000);
});
}
« Ma » technique permet d'éviter à devoir créer un second fichier contenant que le contenu sans les menus. Ainsi, tu peux faire ta requête AJAX vers une page contenu les menus, le header, le footer, ... ça ne prendra au final que le contenu du div #contenu.
Salut,
Désolé ça bug chez-moi!!!
Résultat:
http://sevenset.free.fr/sevenset02/home.html
Je ne comprend pas ?!
Merci de votre aide.
Désolé ça bug chez-moi!!!
Résultat:
http://sevenset.free.fr/sevenset02/home.html
Je ne comprend pas ?!
Merci de votre aide.
Je pense que tu confonds l'AJAX avec les iframes ...
Sur ta page « contenu/page6.html » (par exemple), tu mets le DTD et tout le reste (</body>, </html>) alors que ça ne sert à rien. Quand je dis "juste le contenu", c'est vraiment que le contenu proprement dit : Ce que tu veux mettre entre <div id="contenu"> et </div> sans ce qu'il y a autour (ni ces balises).
En gros, AJAX charge le contenu d'un fichier dans une chaine de caractère avec laquelle tu fait des traitements (l'afficher par exemple).
Le script que je t'ai donné va chercher le contenu entre <div id="contenu"> et </div> et pas <div class="box" id="contenu">.
Pour terminer, tu n'as pas besoin de créer une duplication de ta page avec seulement le contenu : édite l'url de la requête AJAX et crées tes pages normalement.
Sur ta page « contenu/page6.html » (par exemple), tu mets le DTD et tout le reste (</body>, </html>) alors que ça ne sert à rien. Quand je dis "juste le contenu", c'est vraiment que le contenu proprement dit : Ce que tu veux mettre entre <div id="contenu"> et </div> sans ce qu'il y a autour (ni ces balises).
En gros, AJAX charge le contenu d'un fichier dans une chaine de caractère avec laquelle tu fait des traitements (l'afficher par exemple).
Le script que je t'ai donné va chercher le contenu entre <div id="contenu"> et </div> et pas <div class="box" id="contenu">.
Pour terminer, tu n'as pas besoin de créer une duplication de ta page avec seulement le contenu : édite l'url de la requête AJAX et crées tes pages normalement.
Salut,
Désolé je suis perdu, je crois que j'ai été trop ambitieux (ajax...) pour mon niveau de néophyte!
ça ne fonctionne pas...
Et ça au fait je ne doit pas le mettre quelque part : document.getElementById('contenu').innerHTML = contenu;
Pour l'instant j'ai fais les 7 pages html test (correspondant aux 7 boutons de mon sousmenu) pour voir si ça fonctionnait, ajax tout ça... dont la page1.html avec seulement du texte sans aucune balise ni rien d'autre (comme conseillé)...
Je suis dépité!!!
Peut-être si tu connais un tuto complet du début à la fin, un bon tuto pour les nuls?!
Merci quand même pour ton savoir.
Désolé je suis perdu, je crois que j'ai été trop ambitieux (ajax...) pour mon niveau de néophyte!
ça ne fonctionne pas...
Et ça au fait je ne doit pas le mettre quelque part : document.getElementById('contenu').innerHTML = contenu;
Pour l'instant j'ai fais les 7 pages html test (correspondant aux 7 boutons de mon sousmenu) pour voir si ça fonctionnait, ajax tout ça... dont la page1.html avec seulement du texte sans aucune balise ni rien d'autre (comme conseillé)...
Je suis dépité!!!
Peut-être si tu connais un tuto complet du début à la fin, un bon tuto pour les nuls?!
Merci quand même pour ton savoir.
