A voir également:
- Faire défiler des pages php dans la même page avec un clic
- Supprimer une page word - Guide
- Page d'accueil iphone - Guide
- Traduire une page web - Guide
- Créer une page facebook - Guide
- Word numéro de page 1/2 - Guide
30 réponses
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
15 mai 2013 à 18:41
15 mai 2013 à 18:41
oui la solution sans recharger la page c'est AJAX
plus précisément jQuery Ajax
Sur un événement (un click etc..) ça appelle en arrière plan un script php sur le serveur, en lui passant un ou plusieurs paramètres, , et la réponse est écrite dans un div de ta page
plus précisément jQuery Ajax
Sur un événement (un click etc..) ça appelle en arrière plan un script php sur le serveur, en lui passant un ou plusieurs paramètres, , et la réponse est écrite dans un div de ta page
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
15 mai 2013 à 20:29
15 mai 2013 à 20:29
vas voir:
https://openclassrooms.com/fr/courses
https://openclassrooms.com/fr/courses
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
16 mai 2013 à 14:33
16 mai 2013 à 14:33
voila un chti exemple dont tu peux t'inspirer
télécharges jquery-1.3.2.min.js et mets le dans un rep jquery
code du fichier scriptPHP_reponse_a_ajax.php
télécharges jquery-1.3.2.min.js et mets le dans un rep jquery
<!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" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js ">></script>
<script type="text/javascript">
//au chargement de la page on initialise la fonction jquery ajax
$(document).ready(function() {
//quand click sur fleche moins
$("#fleche_moins").click(function(e) {
//on lit le num de la pgae qui est chargée
num=parseFloat($('#page_en_cours').val());
//on diminue de 1
num_a_afficher = num -1;
if(num_a_afficher >= 1){
//si pas en dehors de limite basse, on appelle le script php en luii passant en argument numPage=numéro de la page à afficher
$.post("scriptPHP_reponse_a_ajax.php", {numPage: num_a_afficher},
function(data) {
//ce qu'onbb fait qd on recoit la réponse du script php
//on ecrit dans le div "affichage"
$('#affichage').html(data);
//on modifie le numéro de la page en cours dans l'input caché
$('#page_en_cours').val(num_a_afficher);
});
return false;
}else{
return false;
}
});
//quand click sur fleche plus
//idem mais en incrémentant de 1
$("#fleche_plus").click(function(e) {
num=parseFloat($('#page_en_cours').val());
num_a_afficher = num +1;
num_maxi=parseFloat($('#nb_total_pages').val());
if(num_a_afficher <= num_maxi){
$.post("scriptPHP_reponse_a_ajax.php", {numPage: num_a_afficher},
function(data) {
$('#affichage').html(data);
$('#page_en_cours').val(num_a_afficher);
});
return false;
}else{
return false;
}
});
});
</script>
<style type="text/css">
#zone_navigation {
float:left;
width:120px;
border-width:1px;
border-style:dotted;
border-color:black;
}
#affichage {
float:left;
margin-left:30px;
}
.fleches span {
margin-left:20px;
margin-right:20px;
font-size:30px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="zone_navigation" class="fleches" >
<span id="fleche_moins"> < </span><span id="fleche_plus"> > </span>
</div>
<input type="hidden" id="page_en_cours" value="1" />
<input type="hidden" id="nb_total_pages" value="10" />
<div id="affichage">
</div>
</body>
</html>
code du fichier scriptPHP_reponse_a_ajax.php
<?php
//on recupére le numéro transmis par ajax
if(isset($_POST['numPage'])){
$num=$_POST['numPage'];
if(is_numeric($num)){
//on verifie que c'est bien un entier (sécurité)
//on inclue la page php correspondant à la tenue
//je suppose que tes fichiers se nomment tenue_1.php tenue_2.php etc..... et qu'ils sont dans un répertoire tenues
if(is_file('rep_tenues/tenue_'.$num.'..php')){
//si le fichier demandé existe on l'include
include ('rep_tenues/tenue_'.$num.'..php');
}else{
echo "La tenue demandée n'existe pas";
}
}
}
?>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Loader
Messages postés
58
Date d'inscription
dimanche 25 novembre 2012
Statut
Membre
Dernière intervention
8 juillet 2013
4
15 mai 2013 à 20:37
15 mai 2013 à 20:37
Merci de vos réponse si rapide :)
Je vais regarde le site, et je vous re-contacte en cas de problème.
Je vais regarde le site, et je vous re-contacte en cas de problème.
Loader
Messages postés
58
Date d'inscription
dimanche 25 novembre 2012
Statut
Membre
Dernière intervention
8 juillet 2013
4
Modifié par Loader le 15/05/2013 à 20:53
Modifié par Loader le 15/05/2013 à 20:53
Oups... Désoler, avec toutes les page du forum de CCM, je me trompe d'onglets, Vraiment désoler
Loader
Messages postés
58
Date d'inscription
dimanche 25 novembre 2012
Statut
Membre
Dernière intervention
8 juillet 2013
4
Modifié par Loader le 15/05/2013 à 20:52
Modifié par Loader le 15/05/2013 à 20:52
oups... tromper de sujet
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
15 mai 2013 à 21:05
15 mai 2013 à 21:05
C'est bien ce que tu veux faire :) Alain t'as bien dirigé !
Pour t'aider un peu, prendre ton index.php avec un menu, un containt et un footer.
Ce que tu veux, c'est quand tu veux allé par exemple dans ta page de contact.php, c'est gardé le menu et le footer vu qu'il ne change pas, et donc mettre le contenu de contact.php dans le containt actuel de la page (Mmh oula il raconte quoi lui ? oO)
Donc pour celui, il faut utilisé ajax
Ajax va te permetre d'appeler contact.php mais pas d'y aller ! Le serveur va t'envoyer le contenu et tu n'as plu qua l'affiché.
Donc en algo ca donne :
Si clique sur lien contact.php
alors je demande le contenu de contact.php
je fais un fadeOut du contenu
je remplace le contenu de ma page actuel par celui récupérer
je fais un fadeIn
Pour t'aider un peu, prendre ton index.php avec un menu, un containt et un footer.
Ce que tu veux, c'est quand tu veux allé par exemple dans ta page de contact.php, c'est gardé le menu et le footer vu qu'il ne change pas, et donc mettre le contenu de contact.php dans le containt actuel de la page (Mmh oula il raconte quoi lui ? oO)
Donc pour celui, il faut utilisé ajax
Ajax va te permetre d'appeler contact.php mais pas d'y aller ! Le serveur va t'envoyer le contenu et tu n'as plu qua l'affiché.
Donc en algo ca donne :
Si clique sur lien contact.php
alors je demande le contenu de contact.php
je fais un fadeOut du contenu
je remplace le contenu de ma page actuel par celui récupérer
je fais un fadeIn
Ah oui je vois, beaucoup de sites sont construits comme cela.
Pour expliquer un peu mieux mon cas, je fais un site pour notre groupe de reconstitution historique et je souhaite faire une page qui présente toutes les différentes tenues que nous avons et je voulais que cela soit possible de cliquer sur une petite flèche pour passer à la tenue suivante.
Il me faut des pages Php car chaque photo de tenue comporte des zones map qui font apparaitre du texte à gauche de l'écran avec d'autres photos qui présente l'équipement de la tenue sur lequel on clique!
il faut donc qu'on puisse cliquer 3-4 fois sur la flèche pour switcher sur les différentes tenues quoi.
Pour expliquer un peu mieux mon cas, je fais un site pour notre groupe de reconstitution historique et je souhaite faire une page qui présente toutes les différentes tenues que nous avons et je voulais que cela soit possible de cliquer sur une petite flèche pour passer à la tenue suivante.
Il me faut des pages Php car chaque photo de tenue comporte des zones map qui font apparaitre du texte à gauche de l'écran avec d'autres photos qui présente l'équipement de la tenue sur lequel on clique!
il faut donc qu'on puisse cliquer 3-4 fois sur la flèche pour switcher sur les différentes tenues quoi.
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
16 mai 2013 à 14:50
16 mai 2013 à 14:50
Pour ce que tu veux faire, je pense que c'est même faisable sans de l'ajax ... !
Tu peux chargé toutes tes tenues, et sur le clique de la flèches tu hide l'actuelle et tu show celle d'après
En gros :
<div id="tenues">
<div id="tenue01">
tenue 01
</div>
<div id="tenue02">
tenue 02
</div>
<div id="tenue03">
tenue 03
</div>
</div>
Quand tu cliques sur ta flèche suivante, tu slide la 1 et tu affiche la 2. Ainsi de suite
Tu peux chargé toutes tes tenues, et sur le clique de la flèches tu hide l'actuelle et tu show celle d'après
En gros :
<div id="tenues">
<div id="tenue01">
tenue 01
</div>
<div id="tenue02">
tenue 02
</div>
<div id="tenue03">
tenue 03
</div>
</div>
Quand tu cliques sur ta flèche suivante, tu slide la 1 et tu affiche la 2. Ainsi de suite
Pour répondre à "Jeremy.s", j'avais bien pensé à ça mais comment faire pour que ça affiche la 3 une fois que tu clique une 2 ème fois sur la flèche?
Merci à "Alain-42", je vais voir ça! Je pense que c'est ce que je recherchais!
Je vous poste une version de la maquette fait partiellement sous Photoshop,
Ce que j'ai pas dit c'est que lorsque l'on clique sur un équipement sur l'image du soldat, ça affiche la description à gauche. A la base je voulais le faire avec la méthode comme me le conseillait "Jeremy.s" mais ça risque de faire beaucoup de fouillis niveau des div etc... il est surement possible de le faire avec une méthode similaire à celle que tu proposes "Alain-42" ?
Voici :
http://www.servimg.com/image_preview.php?i=885&u=11154138
Merci à "Alain-42", je vais voir ça! Je pense que c'est ce que je recherchais!
Je vous poste une version de la maquette fait partiellement sous Photoshop,
Ce que j'ai pas dit c'est que lorsque l'on clique sur un équipement sur l'image du soldat, ça affiche la description à gauche. A la base je voulais le faire avec la méthode comme me le conseillait "Jeremy.s" mais ça risque de faire beaucoup de fouillis niveau des div etc... il est surement possible de le faire avec une méthode similaire à celle que tu proposes "Alain-42" ?
Voici :
http://www.servimg.com/image_preview.php?i=885&u=11154138
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
16 mai 2013 à 18:03
16 mai 2013 à 18:03
Disons que les deux méthodes sont faisables pour ton probleme, mais ensuite vient plusieurs "critères" : la vitesse de ton serveur, de ta bases de données, la taille des images, etc.
Si tu fais tout en js basique, cela va surement prendre plus de temps à charger la page au début. Mais la réaction pour switcher d'une tenue à l'autre va être rapide.
Avec l'ajax, bah c'est l'inverse, moins d'infos en arrivant sur la page, mais une requete en bdd et du traitement php entre chaque switch de tenue donc plus long.
Après saches que "Pour répondre à "Jeremy.s", j'avais bien pensé à ça mais comment faire pour que ça affiche la 3 une fois que tu clique une 2 ème fois sur la flèche? " n'est pas un problème. Quand t'es sur la deuxieme, tu as l'id tenue02, Tu sais alors que tu vas à #tenue(numero actuel ++)
Si tu fais tout en js basique, cela va surement prendre plus de temps à charger la page au début. Mais la réaction pour switcher d'une tenue à l'autre va être rapide.
Avec l'ajax, bah c'est l'inverse, moins d'infos en arrivant sur la page, mais une requete en bdd et du traitement php entre chaque switch de tenue donc plus long.
Après saches que "Pour répondre à "Jeremy.s", j'avais bien pensé à ça mais comment faire pour que ça affiche la 3 une fois que tu clique une 2 ème fois sur la flèche? " n'est pas un problème. Quand t'es sur la deuxieme, tu as l'id tenue02, Tu sais alors que tu vas à #tenue(numero actuel ++)
Ah oui exact je n'y avais pas vus comme ça. Je pensais mettre les flèches en dehors des div qui changent.
Je sais pas ce qui serait le plus simple à faire.
Après au niveau du temps de chargement, à ce niveau je ne sais pas si cela va changer vraiment grand chose? Je site sera hébergé chez OVH en tout cas.
Je pense que ce qui est mieux quand même c'est d'avoir un switch rapide mais ce que je souhaiterai c'est que ça soit pas trop prise de tête à faire, et niveau de la compatibilité Ajax est mieux non ?
Je sais pas ce qui serait le plus simple à faire.
Après au niveau du temps de chargement, à ce niveau je ne sais pas si cela va changer vraiment grand chose? Je site sera hébergé chez OVH en tout cas.
Je pense que ce qui est mieux quand même c'est d'avoir un switch rapide mais ce que je souhaiterai c'est que ça soit pas trop prise de tête à faire, et niveau de la compatibilité Ajax est mieux non ?
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
16 mai 2013 à 23:01
16 mai 2013 à 23:01
Ajax c'est "compliqué" au début ... Et disons que les deux manières sont propres et correctes.
Le plus simple reste donc de la faire en js basique. Mais si jamais ca peut être un bon entrainement pour apprendre l'ajax !
Le plus simple reste donc de la faire en js basique. Mais si jamais ca peut être un bon entrainement pour apprendre l'ajax !
Oui à voir, toujours utile d'après Ajax. Disons que c'est l'"avenir" en quelques sortes!
Je vais essayer tout ça, je viens de trouver un autre groupe de reconstitution qui ç fait quelque chose du type mais je trouve ça assez mauvais et peu attractif malheureusement...: http://www.breizhww2soft.fr/landser.php
Je vais essayer tout ça, je viens de trouver un autre groupe de reconstitution qui ç fait quelque chose du type mais je trouve ça assez mauvais et peu attractif malheureusement...: http://www.breizhww2soft.fr/landser.php
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
16 mai 2013 à 23:13
16 mai 2013 à 23:13
La solution avec ajax reste quand même plus logique à terme, suivant le nombre de tenue dans ta BDD ! Car plus il en aura, plus l'ajax sera rapide comparer au systeme classique de switcher
En comptant large il y en aurait bien 6-7 maximum. De plus, il y a aussi une catégorie armes et une autre équipement individuel qui en comporteront à peu près le même nombre. Mais c'est pas dans la même page de toute façons.
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
16 mai 2013 à 23:24
16 mai 2013 à 23:24
Ok donc finalement ca va.
Bah écoute à toi de voir, et si t'as besoin d'aide pour coder, hésite pas !
Bah écoute à toi de voir, et si t'as besoin d'aide pour coder, hésite pas !
