xAjax , besoin d'aide siouplé !

rafraichir le div centrale

27 juillet 2009 à 14:18:25

Bonjour !

j'aurai besoin d'aide c'est assez urgent ! ... je sais pas si il y a des connaisseurs/utilisateurs d'xAjax ?
J'ai longuement fouillé le forum et lu les tutos pour trouver une solution mais je suis toujours empétrée..

je voudrais faire un truc qui a pourtant l'air simple :euh:

:

--> Charger mon div centrale quand on clic sur les boutons du menu sans recharger toute la page (et du coup sans faire clignoter ni rejouer tous les swf au debut..)
Les exemple concrêts qu'on trouve concernent toujours plutôt des 'rafraichissemenents automatiques' ( genre mini-chat typiquement)..
ça se faisait tout simplement avec ces fameuses frames (non c pas bien

)... je suis étonnée de voir qu'il n'y a pas un autre truc aussi simple pour ca.. o_O

- j'ai regardé le tuto sur les caches mais je suis pas sûre que cette méthode règle mon pb...

- quand à faire jouer les swf à partir d'une certain point, j'y songe mais ça me parait un peu prendre le problème à l'envers (c'est à dire paramétrer tous les divs qui ne doivent pas se recharger pour qu'ils aient l'air de ne pas avoir bougé au lieu de ne charger que le div central..)

-ne m'embrouillez pas trop avec du JS ou du Ajax, je n'y connais trop rien :euh:

- et enfin pour ce qui est de xAjax, comme dit plus haut j'ai lu le tuto, mais je me suis bien empêtrée :

<?php
		
        
function incl()
{
        $reponse = new xajaxResponse();
        
        // code à exécuter en asynchrone
        $pages = array(
          'page1' => 'page1.php',
            'page2' => 'page2.php',
              'page3' => 'page3.php',
                'page4' => 'page4.php',
  	
		if (isset($_GET['page']) && array_key_exists($_GET['page'], $pages)) 
		{
			include($pages[$_GET['page']]);
		}
        
        
        // Appel d'une méthode xAjax pour modifier le contenu de la page
        $reponse->assign('corps', 'innerHTML', $pages[$_GET['page']]);
        return $reponse;
}

require_once('./xajax_core/xajax.inc.php');    
$xajax = new xajax(); 
$xajax->register(XAJAX_FUNCTION, 'incl');
$xajax->processRequest();
?>

<!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" />
                <?php $xajax->printJavascript(); ?>
              
        </head>
        <body>
                <div id="menu">
                <?php include("menu.php"); ?>
                </div>

                <div id="corps">
                </div>
  	       
                <div id="news">
                <?php include("news.php"); ?>
                </div>


                <div id="pied_de_page">
                <?php include("bas.php"); ?>
                </div>

je me doute qu'il y a un joli bazard au niveau de ma fonction php à éxecuter :euh:

mais à deffaut je mets humblement ce code pour faire mieux comprendre ce que j'essaye de faire ... ça pourra aider si qq1 veut me répondre..

en gros je voudrais que ce qui s'affiche dans le div 'corps' change en fonction du numero de page qu'on récupère dans l'url quoi...sans recharger les autres div o_O

merci d'avance pour vos lumières

louf404

27 juillet 2009 à 15:13:51

Pour commencer, xAjax permet de faire de l'ajax en php donc si tu veut des réponse avec cette librairie, le forum approprié est celui de php.
Sinon pour ton problème je te conseille une chose très simple : utiliser les iframes (qui sont différente des frames).
l'avantage est que avec cette technique pas besoin de javascript !
Il suffit juste de récupérer avec l'url la page demandée, et ensuite de la transmettre à l'iframe qui va charger le script sans recharger la page parente

Mais bon vrai dire il y a quand même besoin de récupérer la page avec l'url et pour ça si on ne veux pas recharger la page il faut utiliser du JS :euh:

et la page à chargé doit être marquée à l'aide des ancres (exemple : 'site.php#forum')
Voici un exemple et une fonction qui récupère la page à chargé :
Tout d'abord ce code JS à mettre à la fin du <body>

function changeUrl()
{
    var links = document.getElementsByTagName('a');
    for(var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            var url = document.location;
            url = url.slice(url.lastIndexOf('#') + 1);
            document.maFrame.src = url + '.php';
            return true;
        }
    }
}
window.onload = changeUrl();

Il faut juste que tu modifie le 'maFrame' par le 'name' que tu as donné à ton iframe
Et un lien pour ouvrir la page 'forum.php' :

<a href="#forum">accéder au forum</a>

Tout simplement

L'utilisation des ancres n'est pas obligatoire mais quand on utilise AJAX, ça permet que quand l'utilisateur revient en arrière, ça affiche le contenu chargé précédemment au lieu de revenir à l'index...
Ce code je ne l'ai pas testé, si quelque chose ne marche fait le moi savoir.

lily-zerotte

27 juillet 2009 à 15:43:05

Citation : louf404

Pour commencer, xAjax permet de faire de l'ajax en php donc si tu veut des réponse avec cette librairie, le forum approprié est celui de php.

ben j'en viens justement, et là-bas on me suggère de venir poser ma question ici !

c'est à devenir fou !

Citation : louf404

Sinon pour ton problème je te conseille une chose très simple : utiliser les iframes (qui sont différente des frames).

bon je vais me pencher alors sur ces iframes (comment on les mets en place ?), et voir avec ton exemple .. merci en tt cas

EDIT : et au fait l'iframe c'est pas un peu la même chose que faire un 'include' en PHP dans un <div> ?

louf404

27 juillet 2009 à 16:03:37

Citation : lily-zerotte

ben j'en viens justement, et là-bas on me suggère de venir poser ma question ici ! c'est à devenir fou !

Ah...

Sinon bonne nouvelle

J'ai testé ça marche pas :lol:

Par contre j'ai une pseudo-solution qui marche parfaitement (et cross-browser aussi je crois, testé sur FF et IE), et en plus pas besoin de javascript o_O

<a target="maFrame" href="forum.php">accéder au forum</a>
<iframe src="acceuil.php" width="500" height="300" name="maFrame"></iframe>

Je dit pseudo-solution, parce que le problème est quelle ne respecte pas les standards je crois (je vais essayer de voir ce qui ne vas pas à mon ancienne technique et si je trouve ce sera préférable à cette technique)
EDIT : les iframe sont pareille que les include php excepté le fait que l'on peut les actualiser sans actualiser la page qui la contient

lily-zerotte

27 juillet 2009 à 16:20:31

Citation : louf404

Ah...

en fait du côté PHP on me dit que "la possibilité de "garder" en mémoire la position d'une animation Flash, ce n'est pas en PHP, mais plutôt coté Javascript." (du coup si tu as des solutions de ce côté là aussi, par curiosité ça m'intérresse..)

Citation : louf404

Sinon bonne nouvelle
J'ai testé ça marche pas

ah ben d'accord ! :lol:

Citation : louf404

Par contre j'ai une pseudo-solution qui marche parfaitement (...) le problème est quelle ne respecte pas les standards je crois

mmmmh ... c'est vrai que j'ai un peu envie de trouver des solutions 'propres' que je pourrais réutiliser sur du long-terme, même si j'ai aussi assez envie de torcher de mon **¥@&#&!$¥** de problème vite fait !!

birdy42

27 juillet 2009 à 16:28:23

Le problème, avec les iframe, c'est justement qu'elles ne gardent pas le lien... faudrait alors utiliser une double-action lors du click (?)
Celle que tu as proposé, là, avec le target, et la deuxième, qui envoie une ancre dans l'url, ce qui permettrait ensuite de récupérer la page (avec ta fonction JS) lors du chargement...
Ce serait bien, mais je suis pas sûr qu'on peut

louf404

27 juillet 2009 à 16:35:10

Bon j'ai fait des test, j'ai réussit à faire marcher ma 1ère solution :
En fait le problème est que ça exécute la fonction avant d'afficher l'ancre, donc ça peut pas marcher :-°

Pour corriger le problème on peut faire un setTimeout mais bon c'est pas génial parce que si on a un PC qui date de 95, ça peut dépasser le temps que l'on a mis, et si on met trop de temps, ça se voit...
Je pense être sur une piste pour une solution "parfaite" :-°

...

birdy42

27 juillet 2009 à 16:44:29

Pas trop le temps ce soir, mais si pas d'autres pistes d'ici là, je regarde demain ce que je peux faire...

lily-zerotte

27 juillet 2009 à 16:47:40

merci c bien sympa de vous pencher sur le pb

...n'oubliez pas que j'y capte pas grand chose en JS et qu'il faut pas lésinner sur la description de ce qui se passe dans le code et comment le placer etc.. :euh:

(je suis pas une zero pour rien moi au moins, je sais pourquoi je traine sur ce site ! :soleil:

)

louf404

27 juillet 2009 à 16:53:20

J'ai modifier la 1ère solution pour que ça marche :

<a href="#forum">accéder au forum</a>
<iframe src="acceuil.php" width="500" height="300" id="maFrame"></iframe>
<script type="text/javascript">
function changeUrl()
{
    var links = document.getElementsByTagName('a');
    for(var i = 0; i < links.length; i++) {
        links[i].onclick = function(event) {
            var elmt = (event.srcElement || event.target);
			url = elmt.href;
			window.location = url;
			url = url.slice(url.lastIndexOf('#') + 1) + '.php';
			document.getElementById('maFrame').src = url;
        }
    }
}
window.onload = changeUrl();
</script>

Ça fonctionne très bien, ça change l'iframe et ça rajoute l'ancre, sauf que je ne sais pourquoi quand on revient en arrière, ça enlève l'ancre mais n'affiche pas le contenu précédent :euh: