Titre: Changer contenu d'une page sans recharger la page en entier
Posté par: charly22_85 le le 26-08-2011 a 11:30:37
Bonjour,
Voici le site internet de mon club : http://www.usmeilleraiefoot.fr (http://www.usmeilleraiefoot.fr)
Dans la rubrique "Toute l'actualité", j'aimerais aussi y placer les résultats de façon à avoir 2 "liens" dans cette rubrique, un lien "Actualités et un autre "Résultats".
En clair, lorsque je chargerais ma page, on tomberait sur la rubrique "Actualités" mais en cliquant sur le lien "Résultats", on accéderait à la rubrique "Résultats" sans que le reste de la page ne se recharge. Difficile à faire comprendre..
Voici un exemple sur le site de l'OM :
http://www.om.net (http://www.om.net)
Ou encore :
http://tutorialblog.org/10-javascript-ajax-tabs/ (http://tutorialblog.org/10-javascript-ajax-tabs/)
Merci de votre aide, |
Titre: Re:Changer contenu d'une page sans recharger la page en entier
Posté par: Pad le le 26-08-2011 a 11:53:38
| Ton deuxième exemple est justement ce qu'il faut que tu met en place pour avoir ce que tu souhaites... Aide toi de ce tutoriel : http://pckult.developpez.com/tutoriels/javascript/frameworks/jquery/boite-onglets-web2/ (http://pckult.developpez.com/tutoriels/javascript/frameworks/jquery/boite-onglets-web2/) |
Titre: Re:Changer contenu d'une page sans recharger la page en entier
Posté par: charly22_85 le le 26-08-2011 a 16:53:08
J'ai réussi à mettre ça en ligne :
www.usmeilleraiefoot.fr (http://www.usmeilleraiefoot.fr)
Malheureusement, je n'arrive pas à modifier les onglets "Résultats" et "Pronostics" via Kompozer.
Comment faire ? |
Titre: Re:Changer contenu d'une page sans recharger la page en entier
Posté par: charly22_85 le le 26-08-2011 a 16:53:52
www.usmeilleraiefoot.fr/index2.html (http://www.usmeilleraiefoot.fr/index2.html)
Pardon ;) |
Titre: Re:Changer contenu d'une page sans recharger la page en entier
Posté par: Pad le le 26-08-2011 a 18:31:48
tu devrais avoir un bloc du genre pour ton 1er onglet :
Code:
<div id="content_1" class="content">
<ul>
<li>...</li>
<li>...</li>
....
</ul>
</div> |
|
et ben pour les deux autres c'est la même chose, enfin presque :
Code:
<div id="content_2" class="content">
<ul>
<li>...</li>
<li>....</li>
....
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li>...</li>
<li>...</li>
....
</ul>
</div> |
|
|
Titre: Re:Changer contenu d'une page sans recharger la page en entier
Posté par: Tonyweb le le 12-09-2011 a 13:04:34
Je vais te faire une description générale étape par étape de ce que tu dois faire :
Deux parties, la partie php et la partie jquery (ajax) :
Première partie (php donc) :
Il faut que tu crée ta page index de manière a ce qu'elle fasse office de "carrefour" (lol) je m'explique :
La variable p est la page que tu souhaite affiché tu la passe par url vers ton fichiers index qui la récupère et qui va chercher le contenu lié a cette page dans un autre dossier :
www.tonsite.com?p=contact
Je récupère contact dans index.php via $_GET["p"] je vais chercher contact.php et je l'inclue dans dans l'espace destiné au contenu. Le header, menu et footer son en dur ou appelé via includes dans index.php il ne sont pas lié à la variable p (mais ils pourraient ! )
Si p est null alors je vais chercher index.php il faut découper tous tes contenus pour les mettre dans des fichiers stocké dans un dossier 'includes' par exemple ensuite tu les inclus par l'url :
www.tonsite.com?p=accueil
www.tonsite.com?p=contact
www.tonsite.com?p=faq
...
Une fois que cela marche c'est bien ! Prend un café, indente bien ton code, verifie que tu nous as pas créé une faille include toute belle ( utilise les expression régulière pour ca + la vérification de l'existence du fichier appelé dans le dossier include et cela avant tout inclusion dynamique ! )
Click sur ton menu réjoui toi de son fonctionnement et attaquons le jquery
Qui dis ajax dis jquery oublie les autres frameworks
- Télécharge jquery sur leur site
- Upload le et appel le sur ton index.php ( vu que index.php fait office de carrefour jquery sera appelé sur toute les pages car nous passons bien par index.php pour récupérer la page à charger via l'url puis pour l'inclure dans l'espace xhtml de ton contenu ! )
La tu va manger de la doc jquery :
Je t'explique théoriquement à toi de chercher :
- Lorsque l'on click sur accueil de ton menu tu attribut à ce bouton un href qui sera un lien comme ceux que je t'ai montré plus haut www.tonsite.php?p=contact pour cela utilise une fonction pour générer cette url qui prend comme argument la page.
Maintenant sur ce lien tu met un attribut id qui va comporter le nom de la page donc ici
: id="contact" en jquery maintenant :
- Lorsque un click est effectuer sur le bouton tu récupérer la valeur de l'id de celui ci dans le javascript via la fonction .attr()
- Tu va chercher cette page dans ton dossier include via la fonction $.get de jquery :
$.get("/includes/"+var_mapage, function(data) {
Ici je suis dans une fonction de callback, c'est une fonction appelé une fois son event parent éxécuter ici $.get() donc une fois que j'ai trouvé ma page je fais quelque chose ici oui mais quoi ?
Ici tu va remplacer le contenu afficher actuellement par le contenue de contact.php:
Pour cela tu utilise $(".class_de_ton_contenu").html(data);
Pour les effets c'est FadeIn, FadeOut mais sur ie c'est moche.
}
Donc je résume :
$(".tonmenu a").live("click",function(){ // Quand je click sur un a de ton menu je fais :
var ma_page = $(this).attr("id"); // je récupère la page du bouton sur lequel il y a eu le click $(this) se rapporte au a clicker
$.get("/includes/"+ma_page, function(data) {
$(".class_de_ton_contenu").html(data);
});
return false; // Force le navigateur a ne rien faire sur le click du bouton
});
Voila c'est tout con ! Ensuite tu peut ajouter supprimer des class via jquery pour mettre les boutons en hover ou pas, ALORS je voit déjà venir les pro du jquery oui c'est une façon très collégienne de faire ce qu'il souhaite faire mais sa marche et c'est la manière la plus simple je le laisserais rebondir sur cette technique de débutant par la suite.
Si tu as des questions je suis là ! :)
Ah oui la tu te dis mais pourquoi il m'a embêter avec son php plus haut et sa variable par url alors pour différentes raisons :
- Déja car cela te permet d'avoir des liens dur dans tes hrefs qui fonctionne au cas ou le user n'a pas javascript ou si il est sur un mobile ou un tablette un peu vielle
- Ensuite car cela te permet d'utiliser jquery partout sur le site sans avoir à rappeler jquery
- Tu peut ainsi réécrire tes urls dire à htaccess de remplacer www.tonsite.com?p=contact.php par www.tonsite.com/contact/ dans la barre d'adresse de cette manière :
# On lance le module de ré-écriture d'url
RewriteEngine on
RewriteRule ^contact/$ /index.php?p=contact.php
- Donc ca fait plus pro !
VOILI VOILOU j'espère t'avoir aider comme je peut, un petit like sur mon projet perso : www.openworks.fr serait sympas :)
|
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|