11548 sujets

JavaScript, DOM et API Web HTML5

Problème Prototype Affichage Page

Bonjour,

je suis en train de faire mon site avec "prototype.js"

L'index fonctionne très bien ; voici un exemple test que j'ai fait :
http://www.treillages-boiseries-lambrequin.fr/
Par contre si on clique sur le lien ( voir en haut ) la page qui s'affiche me donne un résultat bizarre ??....

Pourtant cette page a été faite sur le même modèle que la page d'index
(seuls les liens ont été modifiés ).

L'index se trouve à la racine du site et cette page est située dans un sous dossier.
Et le document prototype.js se trouve à la racine du site avec l'index.


Voici les 3 parties de ma page :

La page Html basique :

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="/../prototype.js"></script>
<script type="text/javascript" src="antiquites-divers.js"></script>
</head>

<body>
<form method="get" action="antiquites-divers.php" id="greeting-form">
<div>
<label for="greeting-name">Cliquez ici</label>
<input id="greeting-name" type="text" />
<input id="greeting-submit" type="submit" value="Dis moi bonjour!" />
</div>
<div id="bonjour"></div>
</form>
</body>

</html>


Le javascript :

Event.observe(window, 'load', init, false);

function init(){
$('greeting-submit').style.display = 'none';
Event.observe('greeting-name', 'keyup', dis_bonjour, false);
}

function dis_bonjour(){
var url = 'antiquites-divers.php';
var pars = 'greeting-name='+escape($F('greeting-name'));
var target = 'bonjour';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}

Et le Php :

<link rel="stylesheet" type="text/css" href="../cmsstd.css" />
<title>Antiquités Garnier</title>

<?php include('../head.php'); ?>
<?php include('../menu.php'); ?>

<table class="gallery clearfix; tabfoto">


<tbody>
<tr>
<td>
<a href="../objets/antiquites-divers/paire-heurtoirs-fin-xixeme.html">
<img alt="" style="border: 0px solid ; width: 200px; height: 155px;" src="https://lh4.googleusercontent.com/-udCyOWgMg2E/TeSsT_GgKFI/AAAAAAAAQy0/U9KlNg__wF4/s912/IMG_5123f.JPG"><br>

<br>
Paire de heurtoirs fin XIX<sup>ème</sup> début XX<sup>ème</sup>
</a>
</td>


<td>
<a href="../antiquites-divers/epee-matador-fin-xixeme.html">
<img alt="" style="border: 0px solid ; width: 150px; height: 200px;" src="http://lh5.ggpht.com/_Odxxb7GB6bo/TLqe7rj8oVI/AAAAAAAANbg/dp6te1me5rs/s640/IMG_1990aaaaa.JPG"><br>

<br>
Epée de matador fin XIX<sup>ème</sup>
</a>
</td>

<td>
<a href="../objets/antiquites-divers/barbiere-lavabo-bateau-fin-xixeme.html">
<img alt="" style="border: 0px solid ; width: 133px; height: 200px;" src="https://lh5.googleusercontent.com/-lK1xiACIFio/TnodPp8w8hI/AAAAAAAARtA/YuLnjlB7bDY/s800/IMG_6395.JPG"><br>

<br>

Barbière lavabo de bateau fin XIX<sup>ème</sup>
</a>
</td>


</tr>

<tr>
<td>
<a href="../objets/antiquites-divers/lutrin-napoleoniii.html">
<img alt="" style="border: 0px solid ; width: 150px; height: 200px;" src="https://lh6.googleusercontent.com/-L1rurp_IdAw/Tgw9PFQBZpI/AAAAAAAARBw/7j_KfYWW240/s640/IMG_5492.JPG"><br>

<br>
Lutrin Napoléon III
</a>
</td>

<td>
<a href="..objets/objets-de-vitrine/chenets-anciens.html">
<img alt="" style="border: 0px solid ; width: 200px; height: 150px;" src="http://lh6.ggpht.com/_Odxxb7GB6bo/TO9LeUWBFCI/AAAAAAAAN80/0D2U9HOQRpU/s912/IMG_2574.JPG"><br>

<br>

Paire de chenets d'époque Louis XIV</a><br>
<span style="font-weight: bold; font-style: italic;">RESERVE</span><a href="..objets/objets-de-vitrine/chenets-anciens.php">
</a>
</td>

<td>
<a href="../objets/antiquites-divers/socle-albatre-xixeme.html">
<img alt="" style="border: 0px solid ; width: 138px; height: 200px;" src="https://lh3.googleusercontent.com/-3PggXfQyy4s/Tgw-TKzK_nI/AAAAAAAARGw/YMOMzcivR7E/s640/IMG_5582.JPG"><br>

<br>

Socle en albâtre XIX<sup>ème</sup>
</a>
</td>
</tr>


</tbody>
</table>

<?php include('../footer.php'); ?>
Bonjour,
blanka12 a écrit :
Par contre si on clique sur le lien ( voir en haut ) la page qui s'affiche me donne un résultat bizarre ??....
Je n'arrive pas à savoir de quelle bizarrerie il s'agit ? ^^'
Ahah,
Je suis très certainement un gros boulet, mais je ne vois toujours pas le problème ^^'

A quoi sert la première page ? (celle avec le Cliquez ici)

Si ça doit donner le deuxième lien que tu m'as donné, pourquoi ne pas amener directement à cette page ?

Pourquoi prototype.js ne fonctionnerait-il pas avec la seconde page ?

Moi, d'après le code que j'ai lu, tout se passe comme il faut ^^'
- Tu appelles la page HTML qui ne contient que ton formulaire, donc il n'affiche que ça, logique...
- Au chargement, tu caches le submit et ajoute un listener sur le champ "greeting-name" qui va charger la page PHP quand on écrira quelque chose dedans, ce qui se produit bien... Ta page est affichée à l'endroit que tu demandes Oo

Donc j'ai toujours du mal à comprendre le soucis ^^'
Non, non, c'est moi qui ne suis pas du tout claire !!!!

Je vais essayer de faire mieux....

Tout d'abord mon but est :
la réactualisation automatique de mes pages et donc sans avoir à les recharger manuellement.

Pour cela j'utilise Prototype.js.

Pour travailler avec Prototype j'ai trois documents :
-un en html basique qui est la page de référence :
qui appelle : le doc prototype.js ; ma page javascript et le contenu de ma page en php ;
-un en php où se trouve uniquement le contenu de ma page et le CSS ( donc pas de référence à javascript ou à prototype ; prototype ne pourra donc pas fonctionner )
-et un en javascript.

La Page html est donc celle qui est le lien avec les autres et celle qui doit s'afficher.
( Avec la page php le contenu s'affiche parfaitement par contre prototype ne pourra pas s'exécuter. )

Sur ma page html je ne veux pas voir marqué "cliquez ici" mais je veux voir le contenu présent sur ma page php.

Pour avoir ce résultat quelle modification dois-je faire sur mon code ?

Merci pour tes lumières...
Ca doit recharger la page toutes les x secondes tout seul ? Si oui, tu peux faire quelque chose du type :
<meta http-equiv="refresh" content="x">
Mais c'est pas très conseillé de forcer le rechargement d'une page comme ça ^^'

Si ce que tu souhaites faire, c'est juste modifier le contenu de ta page lors d'une certaine action (comme le clic sur un lien), alors tu devrais pouvoir faire quelque chose du genre:
HTML
<body onload="chargerPage()"><div id="content"></div></body>
function chargerPage () {
    var url = 'tapage.php';
    var target = 'content';
    var myAjax = new Ajax.Updater(target, url, {method: 'get'});
}
En fait, ce qui me perturbe le plus, c'est ce "Cliquez ici" qui est là, mais que tu veux pas utiliser, pourquoi ne pas commencer par le supprimer ? ^^'
Gothor a écrit :
Pourquoi prototype.js ne fonctionnerait-il pas avec la seconde page ?

Modifié par Gothor (18 Feb 2012 - 16:08)
Comme tu as du voir j'ai un site de vente.

Je change et je rajoute très souvent une photo, un texte, etc...
Ce que je veux : c'est que mes clients en venant visiter mon site, voient les nouvelles photos et textes sans avoir à réactualiser la page.

Est-ce possible de faire cela avec Prototype et dans ce cas qu'est ce que je devrais changer dans ce code ( j'ai pris ce code dans un tutoriel mais visiblement je ne suis pas au point !! )

Ou est-ce que ton code serait plus simple et aussi efficace pour le même résultat ?
( le code avec le changement toutes les x secondes, comme tu as du le comprendre, ne convient pas dans mon cas. )
Si je comprends bien :
ce code est mis dans une page html, appelle le contenu de la page et le réactualise.
Ma page étant en plusieurs parties comment faire ?
Je viens d'essayer avec ces deux codes ci-dessous.

Ma page index qui se trouve à la racine du site fonctionne parfaitement mais mon autre page qui se trouve dans une sous catégorie ne marche pas du tout ???????


doc html :

<script type="text/javascript">
function chargerPage () {

var url = 'antiquites-divers.php';

var target = 'content';

var myAjax = new Ajax.Updater(target, url, {method: 'get'});

}

</script>


<body onload="chargerPage()"><div id="content"></div></body>


et doc php :

<div id="content">

<link rel="stylesheet" type="text/css" href="../cmsstd.css" />
<title>Antiquit&eacute;s Garnier</title>

<?php include('../head.php'); ?>
<?php include('../menu.php'); ?>


<table class="gallery clearfix; tabfoto">



<tbody>




<tr>



<td>
<a href="../objets/antiquites-divers/paire-heurtoirs-fin-xixeme.html">
<img alt="" style="border: 0px solid ; width: 200px; height: 155px;" src="https://lh4.googleusercontent.com/-udCyOWgMg2E/TeSsT_GgKFI/AAAAAAAAQy0/U9KlNg__wF4/s912/IMG_5123f.JPG"><br>


<br>



Paire de heurtoirs fin XIX<sup>&egrave;me</sup> d&eacute;but XX<sup>&egrave;me</sup>
</a>
</td>

.....


</tbody>
</table>

<?php include('../footer.php'); ?>
</div>
Sujet clos
Aller à