Rechercher : dans
Par :

Script AJAX pour changer contenu d'un cadre

Dernière réponse le 5 fév 2008 à 21:56:11 Mysterious_fea, le 14 jan 2008 à 19:57:20 
 Signaler ce message aux modérateurs

Bonjour,
Cela doit être un des trucs "bateau" de l'AJAX, mais je n'arrive pas à trouver le code.
J'ai un petit cadre à droite de ma page (le cadre plus) et j'aimerais mettre tout en bas un lien "Encore plus..." qui modifierait le contenu du cadre avec autre chose : comme un défilement, mais seulement avec deux états possibles : le premier contenu et le second contenu. J'aimerais également dans le second contenu mettre en haut du cadre un lien pour revenir au premier.

Je crois que ça dois avoir quelque chose à voir avec visibility ou display, mais aucune idée du code !
Merci pour vos réponses (une fois de plus !)
Ciao

Configuration: Windows XP
Firefox 2.0.0.11

Meilleures réponses pour « Script AJAX pour changer contenu d'un cadre » dans :
Changer le mot de passe via un script VoirChanger le mot de passe via un script passwd Traditionnellement avec la commande "passwd" et son option "--stdin", au travers d'un "tube" (pipe en anglais), ce qui donne la syntaxe suivante :echo -e "new_password\nnew_password" | (passwd --stdin...
VB6 : Changer l'image du bureau + écrire dans le régistre VoirIntroduction Comme dit dans le titre ces quelques lignes de code permettent de changer l'image du bureau et de l'inscrire dans le régistre. Initialisation du projet Ouvrir un nouveau projet Dans la forme coller les composants suivants... '1...
AJAX (Asynchronous Javascript And XML) VoirIntroduction à AJAX AJAX (Asynchronous Javascript And XML, traduisez Javascript asynchrone et XML) est une méthode de développement web basée sur l'utilisation d'un script Javascript pour effectuer des requêtes web à l'intérieur d'une page web...
Commandes Linux VoirTableau des principales commandes Linux Commande Description équivalent DOS ls liste le contenu d'un répertoire dir cd change de répertoire cd cd .. répertoire parent cd.. mkdir crée un nouveau...

1

Dalida, le 14 jan 2008 à 20:18:20

Salut,

qu'est-ce que tu as fait jusque là ?

tu as lu des tutos ?
une fois que tu as le JS pour envoyer la requête, reste plus qu'à faire un JS pour insérer le retour.

pour le "encore plus…" tu peux le faire avec CSS.

j'avais fais un exemple pour une autre discussion.

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

2

Mysterious_fea, le 14 jan 2008 à 21:07:16
  • +1

En fait la seule chose que je voudrais faire, c'est qu'en cliquant sur le lien "Encore Plus" en bas du cadre ("Plus..."), le contenu du cadre change (en fait c'est pour afficher d'autres "Plus"), et qu'une fois qu'on a cliqué sur "Encore Plus..." et que le contenu a changé, un lien retour vers le premier contenu soit inclu en haut. Je n'arrive pas à trouver ce genre de script dans les tutos.

Ou est le truc dans ton exemple ? le texte qui apparaît onmouseover ?

Répondre à Mysterious_fea

3

Dalida, le 14 jan 2008 à 22:27:03
  • +1

Re,

oui mon exemple c'est juste le {:hover}, tu peux le faire sur {:active} ça fait un faux clic.

ton contenu, il sera déjà chargé sur la page et il faut juste afficher/masquer ou tu auras besoin d'aller chercher le contenu sur le serveur ?

dans les deux cas tu peux le faire avec Javascript mais dans le second il faut utiliser 'HTTPRequest' et donc ça devient de l'Ajax.

pour JS, tu vas utiliser une fonction que tu auras codé et tu vas l'appeler sur l'évènement 'onclic' de la balise du "Encore plus".

tu t'orientes vers ça ?

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

4

Mysterious_fea, le 16 jan 2008 à 22:01:30

Je vais essayer d'étudier ton code et d'écrire mon code, mais plus tard. Merci beaucoup.
Rien à voir : quelle est la vraie syntaxe de "implode()" en PHP.
J'écris :

	$options = $_GET['options'];
	$optionsfinal = implode(":", $options);
et il me retourne l'erreur
"Warning: implode() [function.implode]: Invalid arguments passed in C:\programmes\wamp\www\Spider's Web\contact.php on line 170"

J'ai essayé en remplaçant les guillemets par des ' ', et en changeant le contenu par une virgule, un tiret, mais rien à faire.
Le pblem vient peut être de $options. Je l'ai récupéré comme ça :
<label for="animflash">Animations flash
    <input type="checkbox" value="checkbox" name="options[]" id="animflash" />
    </label><br />
	<label for="fid">Fid&eacute;lisation des visiteurs
    <input type="checkbox" value="checkbox" name="options[]" id="fid" />
    </label><br />
	<label for="pub">Adsense
    <input type="checkbox" value="checkbox" name="options[]" id="pub" />
    </label><br />
	<label for="prom">Promotion du site
    <input type="checkbox" value="checkbox" name="options[]" id="prom" />
    </label>

Merci
Ciao

Répondre à Mysterious_fea

5

Dalida, le 17 jan 2008 à 13:12:40

Salut,

"Warning: implode() [function.implode]: Invalid arguments passed in C:\programmes\wamp\www\Spider's Web\contact.php on line 170"
tu as passé un mauvais argument.

string implode ( string $glue, array $pieces )

le premier est une chaîne, le deuxième un tableau.
ton premier argument est nien une chaîne, donc c'est que le deuxième n'est pas un tableau.
$optionsfinal = implode(":", $options);

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

6

Mysterious_fea, le 18 jan 2008 à 19:31:33

Whaou jcomprend rien à ce que tu dis là !
Pourquoi as-tu réécri mon code ?
Quel code dois-je mettre ?
J'ai essayé sans succès string implode()
Merci de préciser

Répondre à Mysterious_fea

7

Mysterious_fea, le 18 jan 2008 à 19:49:34

Je corrige mon message sur le JS, car entre temps j'ai trouvé, et c'était pas bien compliqué. En tout cas, merci pour tes conseils, ça m'a fait avancer.
Alors, j'ai défini deux div "interchangeables", evanescent et evanescent2.
Par défaut, evanescent est en display:block et evanescent2 en display:none.
Le lien en bas de evanescent est comme ça :

<a href="#" onClick="document.getElementById('evanescent2').style.display='block';document.getElementById('evanescent').style.display='none';">Encore plus...</a>

Et le lien de "retour", situé dans evanescent2, est comme ça :
<a href="#" onClick="document.getElementById('evanescent').style.display='block';document.getElementById('evanescent2').style.display='none';">Back in black...</a>

Et voilà ! merci pour ton aide.
Par contre j'attend toujours avec impatience des précisions sur implode()...
Merci !

Répondre à Mysterious_fea

8

Mysterious_fea, le 20 jan 2008 à 15:44:51

Alors, what about implode ?

Répondre à Mysterious_fea

9

Mysterious_fea, le 20 jan 2008 à 18:55:51

Autre petit problème CSS (je vais pas ouvrir un nouveau post pour ça) :
comment définir le :hover d'un lien comme ça :

<a href="#" class="lien01">Lien</a>

J'ai essayé
a:hover.lien01
et
a.lien01:hover
mais ça marche pas !

Répondre à Mysterious_fea

10

Mysterious_fea, le 20 jan 2008 à 19:03:37

No résolu !

Répondre à Mysterious_fea

11

Mysterious_fea, le 22 jan 2008 à 20:47:15

STP 3 problèmes !

(1) précisions sur implode()
(2) syntaxe CSS a:hover
(3) est-ce quand même fonctionnel si j'enlève "href="#"" à un lien affichant un cadre onmouseover (comme dans ton exemple) ? Parce que ça fait bouger la page en entier donc c'est pas génial. Ca marche sous FF2, mais je ne suis pas sûr sous les autres navigateurs. Est-ce grave ?

Merci encore
Ciao

Répondre à Mysterious_fea

12

Dalida, le 24 jan 2008 à 19:40:57

Salut,

désolé me suis absenté quelques jours.

1) 'implode()'

2) ':hover{}'

3) ça devrait fonctionner sauf sous IE 6 (ça doit encore peser 40% du marché) si la balise n'est pas <a>.
si ça fait bouger ta mise en page, c'est peut être qu'il y a une bordure. ce ne serait pas avec une image ?

en plus l'attribut 'href' te permet d'envoyer vraiment vers une page au cas où JS est inactif (rare).

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

13

Mysterious_fea, le 24 jan 2008 à 22:04:34

1 et 2 : merci je vais potasser
3 : En fait, c'est juste que si je scroll la page un peu vers le bas et que je clique sur le lien JS, il suit également le lien "#" qui remonte la page en haut. C'est juste ça. j'ai remarqué que tu avais laissé "#" sur ton exemple, mais il n'y avais pas de srollage possible, donc pas de problème)
Merci
a+

Répondre à Mysterious_fea

14

Dalida, le 24 jan 2008 à 22:11:31

Ah vi !

en JS, en plus de l'appel à ta fonction il faut ajouter une instruction pour indiquer à la page qu'il ne faut pas propager l'évènement.

onclick="ma_fonction(); return false;"

et pour ':hover{}' as-tu tenté sans le 'href' ?

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

15

Mysterious_fea, le 25 jan 2008 à 19:54:27

Pour la définition de :hover pour une classe de lien, c'est OK
Pour implode, ça va toujours pas !
Faut-il mettre ça :

string implode  ( string $glue  , array $pieces  )
?
Il faut laisser string ou le remplacer par quelque chose ?
Ou alors il faut mettre ça :
$array = array('nom', 'email', 'telephone');
$comma_separated = implode(",", $array);
?
Dans ce dernier cas, cela ne marche pas, mais c'est surement parce que je n'ai pas défini l'array. J'ai seulement mis ça dans mon formulaire :
<label for="animflash">Animations flash
    <input type="checkbox" value="checkbox" name="options[]" id="animflash" />
    </label><br />
	<label for="fid">Fid&eacute;lisation des visiteurs
    <input type="checkbox" value="checkbox" name="options[]" id="fid" />
    </label><br />
	<label for="pub">Adsense
    <input type="checkbox" value="checkbox" name="options[]" id="pub" />
    </label><br />
	<label for="prom">Promotion du site
    <input type="checkbox" value="checkbox" name="options[]" id="prom" />
    </label>

?
Comment collecter la chaîne des valeurs d'options dans une variable ?
Je ne comprend vraiment pas, peux-tu m'écrire le code en entier parce que là...


Pour le JS, je vais laisser href="#" au cas où.
Merci

Répondre à Mysterious_fea

16

Mysterious_fea, le 25 jan 2008 à 21:49:35

Autre petit truc (encore du JS !). Je fais afficher un petit cadre du genre "Plus d'infos" au passage sur un lien. Comment positionner le coin bas gauche du cadre sur le curseur ?
Merci

Répondre à Mysterious_fea

18

Dalida, le 25 jan 2008 à 21:52:39

Je ne sais pas.

tu utilises quoi comme code ?

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

19

Mysterious_fea, le 25 jan 2008 à 22:14:31

En fait c'est même pas du JS.
Voilà le HTML :

<a href="#" class="readmore"><img src="images/hum.png" class="readmore" /><span>Hallo !</span></a>

Et le CSS :
a.readmore span{
position:absolute;
display:none;
width:150px;
background-color:#E53000;
border:1px solid #FFAO17;
padding:5px;
color:#FFFFFF;
}

a.readmore {
cursor:crosshair;
}

a.readmore:hover {
background-color:transparent;
}

a.readmore:hover span{
display:block;
}

img.readmore{
	width:15;
	height:18;
	border:0;
	}


Je ne sais pas comment positionner le span...

Répondre à Mysterious_fea

20

Dalida, le 25 jan 2008 à 22:18:39

Il est en positionnement absolu donc tu peux le caler par rapport aux bords haut, droit, bas ou gauche du conteneur parent (qui doit être à {position:relative;} s'il ne s'agit pas de <body>).
donc tu dois pouvoir passer :

a.readmore span{
position:absolute;
bottom:0;
left:0;
display:none;
width:150px;
background-color:#E53000;
border:1px solid #FFAO17;
padding:5px;
color:#FFFFFF;
}

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

21

Mysterious_fea, le 25 jan 2008 à 22:22:07

Marche pô !
La position absolute s'applique à la page (donc le cadre ne retrouve en bas à droite de la page elle-même)
Et pourtant absolute est le seul moyen de ne pas faire bouger le contenu aux alentours.

Répondre à Mysterious_fea

22

Dalida, le 25 jan 2008 à 22:23:53

conteneur parent (qui doit être à {position:relative;} s'il ne s'agit pas de <body>)
as-tu mis le conteneur référent à {position:relative;} ?

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

23

Mysterious_fea, le 25 jan 2008 à 22:26:54

Ca ne change rien (j'ai défini position:relative à la div du contenu). Mon lien se trouve dans une liste à puce. Faut-il définir la position à la liste à puce ?

Répondre à Mysterious_fea

24

Dalida, le 25 jan 2008 à 22:38:37

Possible que le lien ait besoin d'être à {display:block;}.

sinon rappelle moi l'URL, je regarderai.

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

25

Mysterious_fea, le 25 jan 2008 à 23:31:31

Voilà le lien.
Comme tu le vois le cadre se place à gauche toute...

Répondre à Mysterious_fea

26

Dalida, le 25 jan 2008 à 23:43:05

Oups, avais pas bien lu dès le départ.

en CSS tu ne peux pas le placer par rapport au curseur, uniquement par rapport au cadre conteneur.

si tu le veux sur le curseur il faut le faire en JS.

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

17

Dalida, le 25 jan 2008 à 21:51:37

Salut,

1/ ce que tu avais au dessus, c'est la définition de la fonction (celle du manuel PHP).
donc pour chaque élément, il te donne son type, il ne faut pas le reprendre quand tu utilises la fonction.

$array = array('nom', 'email', 'telephone');
$comma_separated = implode(",", $array);

ce code doit fonctionner.

2/ pour savoir ce qu'il retourne il faut que tu définisses l'attribut 'value' de tes <input>.
<label for="animflash">Animations flash
    <input type="checkbox" value="animflash" name="options[]" id="animflash" />
    </label><br />
	<label for="fid">Fid&eacute;lisation des visiteurs
    <input type="checkbox" value="fid" name="options[]" id="fid" />
    </label><br />
	<label for="pub">Adsense
    <input type="checkbox" value="pub" name="options[]" id="pub" />
    </label><br />
	<label for="prom">Promotion du site
    <input type="checkbox" value="prom" name="options[]" id="prom" />
</label>

ensuite tu auras un tableau dans le '$_POST' à l'index 'options'.
$checked_values= $_POST['options'];

tu peux tester avec :
print_r( $_POST['options'] );

dans ton cas si tu coches le premier et le troisième, '$checked_values' contiendra 'animflash' et 'pub'.
ce qui doit être représenté comme ça par 'print_r()' :
$checked_values => array( 'animflash' , 'pub' )

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

27

Gihef, le 26 jan 2008 à 02:12:08

Bonjour,

Je ne sais pas si c'est encore dans le sujet (je n'ai pas tout lu ;-), mais je suis revenu sur un truc que j'essayais depuis quelques temps.
J'en ai fait un petit bricolage d'amateur qui affiche un contenu différent dans une <div>.
À tester.


++
Si vous savez l'améliorer, je suis preneur.
Comme par exemple récupérer le contenu d'une autre <div> cachée pour la passer à la fonction plutôt que de devoir contruire ces var bizarres…

--

Répondre à Gihef

28

Dalida, le 26 jan 2008 à 11:11:24

Salut Gihef,

tu peux mettre ton texte dans un <div> caché (j'ai embarqué le style).

<div id="hidden" style="display:none;">
	<div id="hautdiv"><\/div>
	<h3 class="h">Du texte de 2e main<\/h3>
	<p>Du texte de 2e main main main<\/p>
	<p>Du texte de 2e main main main main main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main main main main main main main main main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main main main main main main main main main main main main main main main<\/p>
	<p>Du texte de 2e main main main main main main main main main main main main main main main main main main main<\/p>
	<p id="remonte"><a href="#hautdiv">&uarr; HAUT &uarr;<\/a><\/p>
</div>

et tu transvases direct de l'un à l'autre.
document.getElementById("clic").innerHTML=document.getElementById("hidden").innerHTML;

au passage, regarde ça, pas de JS mais un joli coup de CSS.

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

29

Mysterious_fea, le 26 jan 2008 à 21:40:22

Pour le implode, c'est bon, tout marche, merci beaucoup !
Pour le :hover, c'est pareil !
Par contre, pour le point d'interrogation t'aurais une piste STP ?

Merci merci merci encore !
Ciao

Répondre à Mysterious_fea
Collection CommentÇaMarche.net