AJAX
Fermé
set13
Messages postés
6
Date d'inscription
lundi 14 septembre 2009
Statut
Membre
Dernière intervention
23 septembre 2009
-
14 sept. 2009 à 23:26
set13 Messages postés 6 Date d'inscription lundi 14 septembre 2009 Statut Membre Dernière intervention 23 septembre 2009 - 23 sept. 2009 à 22:22
set13 Messages postés 6 Date d'inscription lundi 14 septembre 2009 Statut Membre Dernière intervention 23 septembre 2009 - 23 sept. 2009 à 22:22
8 réponses
Utilisateur anonyme
14 sept. 2009 à 23:29
14 sept. 2009 à 23:29
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
Date d'inscription
lundi 14 septembre 2009
Statut
Membre
Dernière intervention
23 septembre 2009
15 sept. 2009 à 18:01
15 sept. 2009 à 18:01
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.
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
15 sept. 2009 à 18:42
15 sept. 2009 à 18:42
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).
set13
Messages postés
6
Date d'inscription
lundi 14 septembre 2009
Statut
Membre
Dernière intervention
23 septembre 2009
16 sept. 2009 à 15:41
16 sept. 2009 à 15:41
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
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
16 sept. 2009 à 15:49
16 sept. 2009 à 15:49
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.
set13
Messages postés
6
Date d'inscription
lundi 14 septembre 2009
Statut
Membre
Dernière intervention
23 septembre 2009
19 sept. 2009 à 17:59
19 sept. 2009 à 17:59
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.
avion-f16
Messages postés
19249
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
15 juin 2024
4 503
19 sept. 2009 à 18:14
19 sept. 2009 à 18:14
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.
set13
Messages postés
6
Date d'inscription
lundi 14 septembre 2009
Statut
Membre
Dernière intervention
23 septembre 2009
23 sept. 2009 à 22:22
23 sept. 2009 à 22:22
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.
14 sept. 2009 à 23:32