Tutoriel Vidéo jQuery : Navigation Ajax

momzbena Il y a 2 mois Répondre

Modification : J'ai trouvé le probleme c'est, internet explorer a besoin de "var" devant chaque variable qu'on utilise sinon il na la reconnait pas comme étant une variable, ex : var page=$(this).attr("href");

momzbena Il y a 2 mois Répondre

salut, merci pour le tuto, moi j'ai un petit soucis sur Internet Explorer, pour ce qui est de IE 9 ca marche très bien mais lorsque je test sur IE 7 ou 8 ca ne marche pas.

Quand je click il va direct sur la page en question mais vu qu'elle est en réalité dans le dossier "contenu" il ne la trouve pas apparemment c'est le script qui ne se lance pas

coolternet Il y a 5 mois Répondre

J'ai beau regarder et tester les tuto de navigation en ajax mais je trouve pas le moyen de faire afficher mes page de format .php...

Si une personne pourrait m'éclairer se serait pas mal

senateur225 Il y a 6 mois Répondre

xalut
j'ai un petit soucis. mon code marche mais je veux recuperer un partie dans la page qui se charge kan on click sur un lien parceque j'arrive pas a controler cela avec l'url-rewritting. donc je veux savoir comment faire cela. PLEASE HELP ME

edandweb Il y a 7 mois Répondre

Bonjour je sais que c'est un peu tard, mais comme beaucoup dans mon site je n'avais pas besoin d'utiliser d'url rewriting, mes url sont de types index.php?p=test&cat=7
Et je n'arrivais pas a recharger juste la partie du site qui m'interesse. Apres avoir cherche j'ai compris qu'il suffisait d'extraire de data juste la div ou n'importe quel autre element avec une simple ligne de code en jquery:
Exemple:
$("#vol_nom").fadeOut(600, function(){
var breadcrumb = $(data).find("#vol_nom").html();
$("#vol_nom").empty();
$("#vol_nom").append(breadcrumb);
$("#vol_nom").fadeIn(700);
});

J'espère que ça aidera pour ceux qui ont eu du mal.

Crak Il y a 8 mois Répondre

Bonjour
J'ai repris le précédent tutoriel et je n'est donc que des page PHP et quand je clique j'ai une double inclusion de ma page a partir du lien :

<a href="ajouterModel">Ajouter Modele</a>

et du code JQ suivant :
$( "a.boutton-choix").button();
$( "a.boutton-choix").click(function(){
var href = $(this).attr('href');
$('div.bloc').load(href);
return false;
});

j'ai légèrement du mal a saisir le fonctionnement du .htaccess car je ne voie pas comment distingué une requête ajax d'un chargement de page "normal".

Ps: et t'il possible de modifier l'url après un lien en ajax?

Yavuz Il y a 9 mois Répondre

Bonjour,

Je tiens à vous remercier car c'est un tuto très explicite et clair.

Par contre j'aurais une question : Pensez-vous qu'il est possible d'avoir un bouton lecture et stop (plutôt le code) qui fait défiler les pages et bien sur le stopper ?

Je souhaiterais l'adapter pour un défilement de références.

Merci dans tous les cas.

Gionta21 Il y a 10 mois Répondre

Bonjours a tous j'ai un gros problème !
quand je mets rien a la fin de url ex:http://localhost/site/
j'ai automatiquement une erreur mon include 404.html

Adam_316 Il y a 1 an Répondre

Tout dabors merci pour ce tuto et ce site est excellent.
Mais j'ai un petit ( même gros ) soucis.
Ca ne fonctionne pas avec IE ...

jponline Il y a 1 an Répondre

petit soucis sis les pages dans le dossier contenu sont en .php ça pose probleme au niveau du fichier js vu qu'il s'attend a un .html

ACHAT DE VIN Il y a 1 an Répondre

J'ai des problemes avec IE sur ce tuto, plutot bizarre parcequ'avec tout les autres ca marche plutot bien !

amoric69 Il y a 1 an Répondre

Il semblerait que les liens doivent se situer à la racine et ne pas déclarer le lien ce cette maniere :
<a href ="?p=apropos"></a>

Comment faire ?? J'ai beau modifier mais n'y parviens pas ...
Quelqu'un a une réponse ??

Guilhem Il y a 1 an Répondre

J'ai un petit problème moi ^^". Je les posté dans les questions mais peut être que beaucoup ne vont pas là-bas ^^.

http://www.grafikart.fr/questions/536

france poker en ligne Il y a 1 an Répondre

merci pour le plug-in!

pronostic sportif Il y a 1 an Répondre

très bon site merci!

toarii Il y a 1 an Répondre

Bonjour, merci pour ce super tuto, j'ai trouver comment changer l'address lors du changement des pages grace au plug-in de http://www.asual.com/.

Si sa peut vous aider.

Disage Il y a 1 an Répondre

merci pour le tuto,
petit révision clair simple et en français, tu cartonnes

adelking.othmane Il y a 1 an Répondre

merci pour tes tutos !

Credit en ligne Il y a 1 an Répondre

merci pour le partage

raskarkapak Il y a 1 an Répondre

Au passage merci pour tes tutos !
Tout fonctionne parfaitement mis à part que je n'arrive pas à activer ma lightbox dans du contenue ajax :s

raskarkapak Il y a 1 an Répondre

j'ai maladroitement modifié le code en mettant du .livequery partout, l'ajax fonctionne toujours mais livequery ne change rien.
Mon code :
$j(document).ready(function() {
$j("#2 a") .livequery("click",function(){
page=$j(this).attr("href") ;
$j.ajax({
url: "content/portfolio.php",
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown) {
alert(textStatus) ;
}
})
return false;
});
});

function afficher(data){
$j("#content").livequery(function(){ $(this).fadeOut})(500,function(){
$j("#content").livequery(function(){ $(this).empty})();
$j("#content").livequery(function(){ $(this).append})(data);
$j("#content").livequery(function(){ $(this).fadeIn})(1000);
})
}

richar_n Il y a 1 an Répondre

Bonjour, déjà encore bravo pour ce magnifique tuto.
Juste une question:
J'ai repris la base du dernier tuto sur "décomposer un site en php" (voir http://www.grafikart.fr/tutoriels/decomposer-site-php-102)pour faire ce tuto hors aprés la modification du .htaccess dés que je tape sur un lien du menu j'ai un "error".
Ya t'il un point qui diffère si on a utilisé le second tuto?

Merci d'avance.

roulette en ligne Il y a 1 an Répondre

Salut merci pour ce tutoriel sa aide pas mal!

bonus casino Il y a 1 an Répondre

merci pour le tuto c'est sympa!

Betclic Il y a 1 an Répondre

merci pour le partage

Cherine Il y a 1 an Répondre

Salut
Pour jeffban
ajoute ces lignes peut être que ça va marcher


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml " xml:lang="fr" lang="fr">

red-ace Il y a 2 ans Répondre

Pour la réécriture pour navigation ajax avec JQuery, y a ce plugin => http://www.asual.com/jquery/address/
Je ne l'ai pas essayé personnellement, mais il a l'air de bien marcher.

jeffban Il y a 2 ans Répondre

Bonjour,
merci pour ce tutoriel très intéressant. Je l'ai essayé et il fonctionne bien sur firefox mais la fonction attr() semble posé problème sur IE. Suis-je le seul dans ce cas? Avez-vous une solution?
Merci

Diana Il y a 2 ans Répondre

Faudra penser à écrire des livres, PHP, Jquery...
Vous gagneriez des sous avec vos cours.
Peut être en projet !

casino en ligne Il y a 2 ans Répondre

Merci pour le partage de cet article .......

bill Il y a 2 ans Répondre

la fonction afficher ne fonctionne pas pour moi car j'affiche mes pages en MVC par l'intermédiaire de 3 dossiers logiquement modeles/, vues/ et controleurs/.

il y a une page index à la racine pour tous les règlages et une page template ou je charge le contenu avec ob_get_contents();

la page en question dans la div contenu s'efface une demi seconde et réapparaît et les liens suivent donc la fonction ne marche pas.

Quelqu'un aurait il une idée ?

d'avance, merci;)

arde Il y a 2 ans Répondre

Bonsoir, j'ai pris comme base pour la navigation de mon site, mais il y a un problème avec le contenu d'une page qui contient un slider horizontale images, une fois que j'essaie de le faire défiler marche plus et quand j'utilise un nav sans le method du tuto ça fonctionnent, vous aurez une idée d'ou ça peux venir le bug ?

Merci

Silexx Il y a 2 ans Répondre

je fais un double post puisque j'ai écrit un tas de truc pour aider certain apparement ce n'est pas passez :s

Raf Il y a 2 ans Répondre

Bonjour, j'ai un petit problème :
je n'ai pas de fichier .htaccess et mais liens ressemble à sa
<a href="?page_indown=types_sources.php&id=4">exemple</a>

dans ma page j'inclus la variable page_indown qui est le fichier et voila mon script :

<!--
$(document).ready(function(){
$("#content-drawer li a").click(function(){
var page_indown = $(this).attr("href");
$.ajax({
url: page_indown,
cache: false,
success: function(html){
displayNavDown(html);
},
error: function(XMLHttpRequest,TextStatus,errorTrown){
alert(TextStatus);
}
});
return false;
});
});

function displayNavDown(dataLoad) {
$("#result-contents").fadeOut(500, function() {
$("#contents_download").css("height","502px");
$("#result-contents").empty();
$("#result-contents").append(dataLoad);
$("#result-contents").fadeIn(200);
$("#contents_download").css("height","auto");
});
}

-->

LE probleme est que sa m'affiche toute ma page j'ai eu beaux chercher j'ai pas trouvé merci d'avance

Titi Il y a 2 ans Répondre

Bon tutoriel mais j'avoue le faite que l'url ne change pas c'est inutilisable en production comme cela , mais ça permet de comprendre certaines choses merci à toi

kohan95 Il y a 2 ans Répondre

Salut merci pour ce tutoriel
mais voila ya pas une autre solution pour le bug qui recharge deux fois la page??
car moi je n'ai pas fais le tutoriel de la décomposition en php en plus je veux appliquer ce tutoriel à un autre projet en asp
merci d'avance

Drayark Il y a 2 ans Répondre

Hico, vérifie ton code avant de parler de problèmes de compatibilité. Utilise les liens absolus sa évite bien des problèmes d'appel de script.

coldragon Il y a 2 ans Répondre

Heu, tu as vérifié tes chemins ? Si tu avais les fichiers à ces emplacements ?

hico Il y a 2 ans Répondre

Bon, problème résolu, ça venait de l'index je crois.

Par contre, tu aurais du préciser qu'il y a une certaine incompatibilité avec la zoombox.
Enfin, je ne sais pas, mais je n'arrive plus à afficher mes images dans la zoombox, ça me renvoie directement sur le lien de l'image.

Conflit de script js ? Pourtant, j'ai bien mis ceci dans la page ou sont mes miniatures :
<script type="text/javascript" src="../zoombox/jquery.js"></script>
<script type="text/javascript" src="../zoombox/zoombox.js"></script>

mais apparemment, ça ne veut pas.

hico Il y a 2 ans Répondre

Bonjour à tous,

Avant toute chose, merci pour ce que tu réalises, c'est vraiment extra.
Cependant, j'ai un petit souci à l'étape du htaccess.
J'ai bien activé le "rewriting_module" de Apache et mis le .htaccess à la racine
Mes pages sont en php et toutes situées à la racine.

Evidemment, la page se remplie deux fois, et ça fait 3h que je cherche en vain.
Pas moyen de régler ce problème.

Des idées ?

Merci d'avance

dalas Il y a 2 ans Répondre

SVP regarde mes codes si ils sont corrects

index

<div id="content">
<?php
$d="page/";
if(isset($_GET['p'])){
$p=strtolower($_GET['p']);
if(preg_match("/^[a-z0-9\-]+$/",$p)&& file_exists($d.$p.".html")){
include $d.$p.".html";
}
else{
include $d."404.html";
}
}
else{
include $d."index.html";
}
?>

</div>

Navigation.js

$(document).ready(function(){
$("#container a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "page/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
alert(textStatus);
}
})
return false;
});
});

function afficher(data){
$("#content").fadeOut(500),function(){
$("#content").empty();
$("#content").append(data);
$("#content").fadeIn(1000);}}

dalas Il y a 2 ans Répondre

sa marche pas pour moi

Wyllou Il y a 2 ans Répondre

Bonjour. Très sympa ce tutoriel.

Mais je voudrais savoir comment faire retourner du php dans la fonction $.ajax. Car j'appelle un page qui va récupérer des données via une requête sql, pour les afficher ensuite.Et la fonction me retourne rien. Sauf si j'ajoute les balises <hmtl></html> pour tester, là il m'affiche bien.
Donc est-il possible de retourner une echo php?

Merci d'avance pour votre réponse.

fo0rnik Il y a 2 ans Répondre

Merci pour se super tuto!
Comment je pourrais changer le style du lien qui affiche la page actuelle car ducoup la méthode que j'utilisais en php ne fonctionne plus avec la navigation ajax et on ne sait pas sur quelle page on se trouve.

Robin Il y a 2 ans Répondre

Avec des page en php, ça marche moins bien.
Les fichiers qui 'require' les core.php etc ne sont plus chargés quand on utilise ce modules.

peterthedrummer Il y a 2 ans Répondre

OH me**e j'étais telement omnubilé par le faites que je faisais sa sur un carrousel et que cela aller sureme ntpas marcher que je n'est que survoler le faites d'avoir un autres problèmes ailleurs ...
En tout cas merci beaucoup Badbart, tu sauve mon site pour le TPE ^^

peter

Badbart Il y a 2 ans Répondre

clic ça existe pas. C'est click !

peterthedrummer Il y a 2 ans Répondre

Bonjour je suis dans une impasse dès le début du tuto :s

Mon problème et que mes lien pour le menu son dans un carrousel et donc je n'arrive pas à prendre mes lien dans le code javascript ...

voila mes codes en esperant que vous allez pouvoir m'aider :

javascript:

$(document).ready(function(){
$(".lien a").clic(function(){
alert($(this).attr("href"));
return false;
});
});


Html:

<html>
<head>
<title>Bienvenue sur mon site !</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="carrousel.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="navigation.js"></script>

</head>
<body>
<div id="conteneur">
<div id="menu"></div>
<div id="carrousel">
<div id="slide1" class="slide">
<div class="visu">
<div class="lien">
<a href="partie1chap1.html">partie1chap1</a>
<a href="partie1chap2.html">partie1chap2</a>
<a href="partie1chap3.html">partie1chap3</a>
</div>
<img src="img/slide1.jpg" />
</div>
<div class="title">
titre1
</div>
</div>

(...+ 2 slides)

</div>
merci peter

alex2f Il y a 2 ans Répondre

Bonjour, super tuto, vraiment bravo !

Tout marche très bien pour moi au niveau de la navigation mais par contre j'ai un léger un problème.
Une fois que l'on a cliqué sur un lien dans le menu une nouvelle page, par exemple requete.html, la page s'affiche dans le <div id="contenu">.
Le problème est que dans cette nouvelle page je souhaite mettre en place des fonctions ajax mais celle ci ne fonctionne jamais alors que si je charge la page requete.html, en tapant directement l'adresse dans le navigateur, les fonctions marchent !

Je suis bloqué depuis quelques temps et un petit coup de main ne serait pas de refus !

Merci beaucoup

harryko Il y a 2 ans Répondre

Bonjour,
Je viens de suivre le tutorial, mais le problème est que lorsque je clique j'obtiens une erreur à chaque fois.
J'ai donc ajouté un alert(page); qui me renvoit "undefined".
Je pense que cela provient de l'url rewriting, auriez vous des pistes??

Merci d'avance

fab1105 Il y a 2 ans Répondre

J'ai fais le tuto à fond, ça marche impeccable, mais y'aurait-il un moyen de faire la même chose en incluant des page.php ? J'ai tout essayé, j'ai changer la règle dans le .htaccess j'ai modifié les scripts, mais pas moyen que ça fonctionne avec du contenu en php et j'aurai bien aimé que ça marche... Quelqu'un aurait-il une solution ?
Merci.

fab1105 Il y a 2 ans Répondre

Ah oui c'est vrai j'avais pas lu et j'avais survolé le tuto -:) Ben j'ai plus qu'a me mettre au boulot alors.

Lazor Il y a 2 ans Répondre

Super tuto et bonne explication, merci a toi l'ami

Baptiste Il y a 2 ans Répondre

salut!
j'ai fais un truc sur mon site où il y a deux découpages:
- un classique comme toi pour les pages du site,
- un autre découpage pour faire un module:
j'ai donc créé un autre dossier qui s'appelle "modules" et qui s'appelle avec la variable 'm': mon url ressemble donc à : index.php?p=index&m=nomdumodule

Donc en temps normal ça va, mais je voulais fluidifier la vision des modules, je fais donc ce système mais je bloque au moment de sélectionner la page:
en effet page=$(this).attr("href"); récupère toute lrd variables, pas que m=nomdumodule ...

commet faire svp!
sinon y a t il un autre systeme ajax pour faire ceci? en fait ça ressemble au pied de page sur le site apple: http://www.apple.com/fr/itunes/


merci!!

++

alexletyran Il y a 2 ans Répondre

Salut,
Si j'ai bien utiliser Firebug.
L'erreur doit venir de:
reference to undefined property l.ActiveXObject
[Break on this error] (function(){var R=/((?:\((?:\([^()]+\)|[...(J,typeof K==="string"?K:K+"px")}})})();
du fichier jquery.js (ligne 19)

Lol voila...

puxian Il y a 2 ans Répondre

Merci beaucoup je vais voir sa dans la journée ^^
encore merci !

puxian Il y a 2 ans Répondre

Problème régler pour l'espace ...
Pour se qui est du reste toujours le message d'alert ...

puxian Il y a 2 ans Répondre

même problème

puxian Il y a 2 ans Répondre

Très utile

BORK Il y a 2 ans Répondre

Merci beaucoup !

super tutoriel qui montre les bases de jquery ensuite avec ceci on est capable d'utiliser les animations javascript pour nimporte quoi =)

anthos59 Il y a 2 ans Répondre

Bonjour,

Serait-il possible d'avoir une petite explication rapide de comment l'intégrer avec cakephp svp ?

Je ne cherche pas le code, juste les grandes lignes. car j'ai cru comprendre qu'il fallait utiliser les elements pour inclure quelque chose mais dans ce cas là comment doit-on gérer les liens ? et comment gère-t-on l'url dans le navigation.js ?

Merci d'avance !

Dr Rodney Mckay Il y a 2 ans Répondre

J'ai trouvé la solution à mon souci.

il suffit juste de modifier la chaine de caractères avec la ligne suivante (dans mon cas) :

page.substr(7,page.length-11)+"php"


Par contre la fonction Afficher ne me donne pas un rendu fluide. Il y a une impression de saccade quand elle vide le contenu...
Si vous avez une idée ?...

Dr Rodney Mckay Il y a 2 ans Répondre

bonjour à vous,


J'ai un souci pour adapter cet navigation à mon site. Je fait un urlrewriting avec plusieurs variables. J'ai deux menus donc je fait passer le numéro de menu (M=1ou2) et le titre de ma page un peu comme dans le tutoriel sur le découpement d'un site en php.
D'une url : /page-1-accueil.html je traduit en : pages/index.php?M=1&page=accueil

Le souci c'est que je n'ai pas d'idée pour arriver à remplir la clause "url" avec la variable $page qui me donne page-1-accueil.html alors que mon fichier de contenu se nomme /contenu/Acceuil.php

ça serai vraiment aimable à vous de me donner une piste. Merci d'avance

marnik Il y a 2 ans Répondre

@negurah: regarde du coté de livequery

Krusty Il y a 2 ans Répondre

Bonjour, je voudrais savoir ou on peut trouver les sources de ce tuto ?
merci

delo Il y a 2 ans Répondre

C'est vraiment génial

jason Il y a 2 ans Répondre

Super tutoriel, explication clair et compréhensible de tous, petit hic je ne trouve pas le dossier source a télécharger :s

Ritter jack Il y a 2 ans Répondre

Salut,

très bon tuto ! mais je ne trouve pas le lien pour DL les sources ... ><'

AlexSet Il y a 2 ans Répondre

Slt, j'ai un petit souci: tout fonctionne très bien mis à part que les différentes pages html que je charge déborde 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.

sc62 Il y a 2 ans Répondre

Salut, je trouve se tuto super bien fait et avec un effet génial!
Le problème ces qu'on ne peu pas inclure de fichier Php par exemple un formulaire de contact, dans la page ou je ni arrive pas si vous avez une solution je suis preneur.

Merci

cyril6789 Il y a 2 ans Répondre

Je trouve tout ça génial.... mais il faudrait prévoir une version texte du tuto, parce qu'en l'écoutant une fois, on le trouve génial, et après on à juste besoin de se souvenir d'un truc du tuto, mais on doit se retaper toute la vidéo pour trouver le passage qui nous interresse... Donc par exemple, juste mettre tous les fichiers utilisés en ligne de code en dessous de la vidéo serait vraiment génial !
Merci !

Syl20 Il y a 3 ans Répondre

Merci pour tes tutos. Grâce à toi j'ai fait un grand pas en avant.

Helix Il y a 3 ans Répondre

Merci et bravo pour ce tuto que je me suis permis de mettre en application sur mon site. Par contre, j'ai un petit soucis que j'aimerais résoudre. Lorsque je n'utilise pas ce script, les liens cliquables pour aller vers d'autres sites internet fonctionnent parfaitement. Par contre, dès que j'utilise ce script, ces mêmes liens ne fonctionnent plus et j'ai donc une erreur lors du chargement de la page. Pourrais-tu me dire ce qu'il faudrait modifier pour que ces fameux liens vers des sites externes fonctionnent?

Merci d'avance et encore bravo pour tes excellents tutos.

DarkNight Il y a 3 ans Répondre

@Grafikart: Salut, je suis tombé sur ton tuto, il est trés bien mais une question car je crée mon site mais le probléme est le suivant : au 1er chargement d'une page de news tout est bon, au second chargement (avec un lien) sa plante il me demande une connection alors que faire pour dire au script de garder ma connection a ma base de donné ou alors lui dire reconnecte toi !


j'ai tester :

if(preg_match("/^[a-z0-9\-]+$/",$page) && file_exists($dos.$page.".php")){
include "system/config.php";
mysql_connect($mysql_host, $mysql_user, $mysql_password);
include $dos.$page.".php"; //Affiche ma page
}

Mais aucune connection on été refaite ...

Aragnide Il y a 3 ans Répondre

Bonjour, merci et bravo pour ce tutoriel :p

J'aurai besoin d'une ame genereuse, qui pourrai m'aider pour l'URL rewriting.

Voila, j'ai "legerement" modifier le script :

$(document).ready(function(){
$("#menu a").click(function(){
page=$(this).attr("href");
$.ajax({
url: page, // Modification, inclure la page passer en parametre
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
afficher("XMLHttpRequest"+XMLHttpRequest+"textStatus"+textStatus+"errorThrown"+errorThrown);
}
})
return false;
});
});

J'essaye d'inclure directement la page passer en parametre, pour ce, j'utilise l'url rewriting

Je prend example le lien :

"programmation.html"

lie avec :

"RewriteRule ^programmation\.html$ /index.php?corps=tutoriels.php&titre=Programmation&categorie=programmation [L]"

Il n'y a aucun probleme sans l'ajax, mais rien ne passe avec :D
Sauf que j'ai crue comprendre, qu'avec l'utilisation de l'url rewriting, l'on pouvait inclure du php sans probleme, quelqu'un serait eclaircir ma lanterne ?

Cordialement.

Shaw Il y a 3 ans Répondre

Petite question qui a déjà été posée, il n'y a vraiment aucun moyen de faire en sorte que l'url soit visible ? Si non, c'est plutôt gênant =/

Shaw Il y a 3 ans Répondre

Bonjour à tous, comme d'habitude un très bon tutoriel, cependant pour ceux qui aurai une erreur du type : 403 Forbiden, c'est à cause du htaccess, rajoutez simplement la ligne :
Options +FollowSymlinks
à la fin du fichier.

Bonne journée à tous !

Dr Rodney Mckay Il y a 3 ans Répondre

Il y a un autre problème avec AJAX, l'utilisateur ne peut pas cliquer sur "page précédente", lorsque l'on fait des redirections de ce type sur une arborescence plus importante ça devient très désagréable pour la navigation.

Il faut je pense l'utiliser avec parcimonie. L'exemple montré dans le tutoriel est très adapté.

Si quelqu'un a une solution pour pouvoir utiliser "précédent" avec AJAX je suis preneur mais moi je n'ai toujours pas trouvé.

s-wf Il y a 3 ans Répondre

desoler pour se double poste
mais j'ai une autre question
dans mon dossier contenu mes pages sont en PHP donc sa m'affiche tjrs l'erreur
j'ai fait un teste pour voir et ça c'est avérai juste
j'ai essayé de modifier comme ça :

success:function(html){
afficher(html);
mais ça donne rien :'(

s-wf Il y a 3 ans Répondre

Bonjours,
d'abord merci pour tes super tuto
j'ai une question pourquoi tu n'a pas mis d'antislash \ avant le point ?

RewriteEngine on
RewriteRule ^([a-zA-Z0-9\-]*).html$ index.php?p=$1 [L]

bast_65 Il y a 3 ans Répondre

bonjour,
très interessant comme tuto, j'ai regardé un peu la doc jquery et je me demandé, si ce que tu veux c'est juste charger une page, la fonction load() ne serai pas plus indiqué.
Autre question, tu explique que le problème de cette méthode est que la barre d'adresse ne change jamais du coup, cela ne gêne t-il pas aussi au référencement , il me semblait que les url comptais vachement pour le référencement (d'ou l'utilité de l'url rewriting non ?).
bravo en tous cas pour le tuto qui fait une très belle entrée dans le monde compliqué de l'ajax.

anthony Il y a 3 ans Répondre

bah apparemment le js ne comprend pas l'url rewriting

le js recherche à tout prix pages/lapage.html alors qu'elle est "simuler" par l'url rewriting.

Je cherche, je cherche mais pour le moment rien ! Seule solution pas de navigation ajax pour l'instant

anthony Il y a 3 ans Répondre

je comprend pas la

je tape l'url (www.lesite.com/lapage.html) dans la barre d'adresse, ça marche !
Je clique dans le menu, j'ai erreur lors du chagement de la page

D'où cela peut venir ? ? ? ? ?

Fedora Il y a 3 ans Répondre

Dernier question: svp
j'ai une formulaire a une page chargé dans la div contenu a partir de jquery
le problème que je n'arrive pas a récupérer les paramétrés de $_POST ?? y a t'il une idée ?
Merci

Fedora Il y a 3 ans Répondre

ok merci Grafikart , j'ai enfin le trouver
voila ve que j'ai fait
dans le fichier navigation.js jé ajouter la fonction :
__________________________________________________________
function assignecontenue(data){
$("#contenu a").click(function(){
$("#top").append('<div class="loader"></div>'); // On ajoute le loader en haut
page=$(this).attr("href");
$.ajax({
url: "contenu/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
afficher("erreur lors du chagement de la page");
}
})
return false;
});
}
_______________________________________

et puis jé fait un appel a cet fonction dans la fonction afficher
___________________________
function afficher(data){
$(".loader").remove(); // On supprime le loader
$("#contenu").fadeOut(500,function(){
$("#contenu").empty();
$("#contenu").append(data);
$("#contenu").fadeIn(1000);
assignecontenue(data); // voila l'appel

})
___________________________

enfin merci pour vous et Mr Bill

Fedora Il y a 3 ans Répondre

Bonjour Grafikart,
je veut dire merci a ces tutos , que dieux t'offre tout ce que tu veux.

Ensuite j'ai un petit problème et ce le même chose de Mr Bill mais je n'arrive pas a le résoudre S.V.P aider moi.
Merci

Sorrow Il y a 3 ans Répondre

Désoler pour le double post mais en fait je pense qu'avec ce tuto je ne peux pas faire nu "smooth" des id des news :s

Sorrow Il y a 3 ans Répondre

Salut,

C'est bizarre j'ai essayer de faire un fondu sur des news :

$(document).ready(function(){
$("#fond-home .select-news a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "page/" +page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus, errorThrown){
afficher("erreur lors du chagement de la page");
}
})
return false;
});
});

function afficher(data){
$("#news").fadeOut(500,function(){
$("#news").empty();
$("#news").append(data);
$("#news").fadeIn(1000);
})
}

Mais comme dans mon lien j'ai une id de news (que je change avec l'url rewriting sa passe de index.php?page=home&id=54 en home-54.html) sa bug complet. Je ne voie pas comment y remedier, une idée ? (http://www.wankil.fr/home)

Merci.

anthony Il y a 3 ans Répondre

J'ai suivi à la lettre le tuto

Les pages ce charge mais il n'y a aucun effet, D'où le problème peut venir

Bulbaga Il y a 3 ans Répondre

Bonjour, et tout d'abord merci pour ce superbe tutorial qui m'a fait bien progressé.
Maintenant je bloque sur un point : j'ai à l'intérieur des pages html qui se charge, des animations flash. Tout fonctionne mais sous IE j'ai un cadre qui apparait autour des animations avec comme instruction : "cliquer pour activer ce controle". J'utilise un petit javascript pour faire disparaitre ce message et que l'animation fonctionne mais celui si ne semble pas passer lorsque j'utilise ajax.

Manik Il y a 3 ans Répondre

je l'avais déjà regardé, le site marche très bien en php, je veux l'ajaxiser juste parce que j'ai un lecteur mp3, pour éviter de reload à chaque changement de page.

Bill Il y a 3 ans Répondre

Ça y'est !! J'ai enfin réussi ! :d
C'était pas évident mais après une nuit de sommeil et tes précieux conseils j'ai réussi à faire marcher tout ça (bon je sais pas si ma méthode et simple/correcte mais l'important c'est que ça marche :p)

Encore merci pour ton aide

Bill Il y a 3 ans Répondre

Oui, je sais, d'ailleurs je ne te demandais pas de code source ou autre mais juste une piste pour avancer ^^'
En tout cas merci de ton aide

J'ai enfin réussi à tout refaire marcher... J'ai pas trop compris pourquoi ça ne marchait plus jusqu'à ce que je vois que j'avais écrit "alerte" au lieu de "alert" -_-'
Donc forcément ça ne m'affichait aucun message :P

En tout cas, encore merci Grafikart

Bill Il y a 3 ans Répondre

Ben justement, je bloque sur la façon de réassigner le comportement à chaque nouveau lien chargé >_<
J'ai beau retourné le code dans tous les sens, y'a quelque chose qui m'échappe là...

PS : est-ce que la pagination peut encore fonctionner avec la navigation ajax ?

PS2 : bon... voilà que plus rien ne marche maintenant... je crois que je vais en rester là pour cette nuit :D

Bill Il y a 3 ans Répondre

Bonjour, pour ma part, j'ai un petit souci, la navigation marche correctement mais lorsque, par exemple, je clique sur un lien que le contenu a affiché, la navigation ne marche plus et il me fait une redirection standard...

Pour être plus clair, j'ai une base de données avec une liste de DVD.
Lorsque je clique sur mon menu, il y a lien appelé "Liste" qui m'affiche la liste de mes DVD et pour chaque DVD, il y a un lien vers une page qui m'affiche le détail du DVD sur lequel j'ai cliqué seulement il ne me fait plus de fadeOut/fadeIn et l'url s'affiche dans la barre d'adresse (comme s'il ne se passait rien en fait) donc je voulais savoir comment faire pour que la navigation soit active pour les liens affiché dans le contenu... Merci... Je ne sais pas si je suis bien clair :s

PS : ce site est une véritable mine d'or, ça m'a beaucoup aidé à me remettre dans le bain ^^
PS2 : les pages que j'utilise sont des .php et non des .html, je ne sais pas si ça joue beaucoup mais je le précise quand même

Manik Il y a 3 ans Répondre

j'ai tenté de split pour remplacer ".html" par ".php", la page se charge mais comme une page html, le php n'est pas executé.. useless quoi

Manik Il y a 3 ans Répondre

Si mon dossier "contenu" contient des pages ".php" et non ".html" qu'est ce que je dois modifier? Dois je modifier le javascript ou le .htaccess?

j'ai essayé mais je n'y arrive pas!

merci de votre aide :D

Xavier Il y a 3 ans Répondre

bravo pour ce tutoriel, vivement le prochain expliquant comment informer le navigateur que la page à changé pour qu'on puisse se servir de ses fonctions de retour.

Qi Il y a 3 ans Répondre

salut, chez moi ca marche pas pareil sous ie et firefox, sous firefox parfait mais ie ca change pas d'une navigation sans ajax

Tof Il y a 3 ans Répondre

@Graphikart : Merci

Tof Il y a 3 ans Répondre

Salut, j'ai copier tes fichier pour essayer chez moi, mais mon serveur wamp me renvoi l'erreur 500.

Master-Of-Chocolate Il y a 3 ans Répondre

Salut,

Je suis vraiment très impressionné par ton niveau en devellopement web ! Tes tutoriaux sont vraiment très bien expliqués et j'arrive à m'y retrouver !! :-)
J'aurais cependant une proposition, si tu pouvais nous faire un tutoriel pour utiliser les sessions PHP et la variable httpRequest, pour faire un espace membre sans rechargement de page comme ce tutoriel !

Enfin après tout ce n'est qu'une proposition !

En tout cas MERCI pour tout le temps que tu prends pour nous expliquer des choses aussi attentivement et simplement,

Amicalement,
Master-Of-Chocolate.

YaYa Il y a 3 ans Répondre

Merci infiniment pour cet excellent tuto !
Par contre impossible de bien le faire tourner dans explorer (avec png semi-transparent dans le background du contenu).
J'ai eu beau essayer plusieurs hacks, impossible

Benbox69 Il y a 3 ans Répondre

Excellent tuto, c'est justement ce que je cherchais a faire .
Cependant après l'avoir adapté sur mon site, j'ai un problème avec une page qui contient d'autres fonctions javascript, entre autre l'affichage d'une map google et le cryptage d'une adresse mail.
As-tu une idée pour pouvoir effectuer ces fonction sans bug (sous FF la page devient toute blanche et sur IE les fonctions sont simplement zapées)

Merci
Ben

impaz Il y a 3 ans Répondre

Bonjour, merci beaucoup pour ton tuto il est très bien réalisé
Cependant j'ai un petit problème, mes lightbox en javascript ne fonctionnent plus :/
Serais tu pourquoi et comment y remédier stp ?
Merci d'avance

Pico Il y a 3 ans Répondre

Bonjour,
Tout d'abord merci pour les tutoriels qui sont d'une excellente qualité !
Je me demandais comment inclure dans un script permettant la navigation par les ancres les effets de slide ou de fade par exemple ?
Aussi connaissez vous un bon tuto pour la navigation par les ancres ?
J'ai essayer certains mais je ne sais pas ou placer les effets ???

Merci d'avance.

Tithomme75 Il y a 3 ans Répondre

Bonjour et merci pour ce super tuto qui permet d'entrevoir les possibilités d'ajax!
Petite question:
Est-il possible de créer un premier menu qui, selon le "bouton" sur lequel a cliqué le visiteur, ouvre un autre menu. Autre menu permettant d'afficher un contenu (texte par exemple).

Menu1 -> Menu2(différent selon le choix fait dans menu1) -> Texte (différent selon le choix fait dans menu2)

Merci d'avance et encore bravo!

Mika Il y a 3 ans Répondre

Trés bon tutoriel. Bravo. Félicitations pour tout le bon contenu du blog que je visite régulieremment.

Konkis Il y a 3 ans Répondre

Merci beaucoup, super tes Tips!
Pense surtout à bien expliquer les points sensibles plus en détails, tu vas parfois trop vite sur l'essentiel je pense.
Ici ce serait :
- le "contenu/" qui est filtré par htaccess et donc la page non affichée entierement
- Le fait que le site marche à la fois avec et sans Javascript.

Continue, j'attends les prochains tutos

Eidolon Il y a 3 ans Répondre

Bonjour,

et merci pour votre travail, ça m'a permis de découvrir et apprendre à utiliser un peu le javascript et l'AJAX qui, il faut bien le dire, change la vie de l'utilisateur.
Continuez comme ça

dev21 Il y a 3 ans Répondre

Cool tout ça ! tu peut nous mettre sur une piste pour améliorer le référencement des pages ? c'est à dire que l'URL change même avec la navigation Ajax. Merci

artkabis Il y a 3 ans Répondre

Merci pour ce partage, le tutoriel est vraiment clair et ceci donne vraiment envie d'utiliser ajax vs jquery. Bonne continuation et encore une fois beau travail

Axelboy Il y a 3 ans Répondre

Un grand merci pour ce tutoriel ainsi que pour les précédents. C'est extra de pourvoir recevoir de bonne information et partique. Encore merci. J'apprécie beaucoup ton dévouments et l'énergie que tu y mets. Bonne continuation

cam385 Il y a 3 ans Répondre

Oua c'est cool, ça a l'air assez puissant comme outils. C'est comme ça qu'on fait des petites fenêtres qui s'affichent au dessus d'une page, comme sur facebook lorsque l'on fait une demande d'amis par exemple?

Par contre j'ai pas trop compris d'où sortait le "html", dans "success:function(html){".
Et "url: contenu/..." ça sert a quoi exactement?

Merci

swiss-power Il y a 3 ans Répondre

Par contre, j'ai un problème lors de l'utilisation d'un formulaire. En effet
comme on ne peux pas entrer l'adresse dans le navigateur le action="" ne fonctionne pas.

Je sais pas si c'est compréhensible ^^

Emilie Il y a 3 ans Répondre

Génial et merci beaucoup pour le tutoriel. Je l'ai testé avec mon petit projet et cela marchait bien. Mais, j'ai eu des soucis avec l'encodage. Les lettres diacritiques (é, à, â, ...)ont été transformées.L'ensemble de mon site a été encodé en iso-8859-1 et les fichiers codés en PHP en 8-bit. Pourriez-vous m'aider à trouver une solution? Merci d'avance pour ton aide.

Stekino Il y a 3 ans Répondre

Encore bravo pour ces tutos !!

si tu n'arrêtes pas d'en faire je sens que je ne pourrais jamais publier mon site car on a toujours envie d'en faire plus et de l'améliorer...

mais continue comme ça, tu expliques très bien et des tutos de cette qualité et accessible gratuitement sur le net se font rare...

Bonne continuation

swiss-power Il y a 3 ans Répondre

Vraiment sympa comme effet, on peut l'utiliser à pleins d'endroits différents,
ça peut être très utile, merci.


Je dirais juste un petit truc (petite "critique"), la compréhension est parfois
pas terrible terrible, peut-être articuler un peu plus et mettre le micro plus
loin de la bouche ^^

Cya

mariouma2410 Il y a 3 ans Répondre

merci infinement joujou

h7u Il y a 3 ans Répondre

bravo et merci raton laveur pour tes tutos si intéressants.
D'ici quelques temps grâce à toi, je vais pouvoir créer mon premier site totalement dynamique...
Continue comme ça c'est excellent ...

doo Il y a 3 ans Répondre

je vois enfin a quoi peut servir ajax!

A.ryan Il y a 3 ans Répondre

Merci beaucoup Grafikart. c'est parfait .