utilisation .empty() et append()

Bonjour,

j'ai un probleme d'utlisation de empty() et append():

j'ai une carte geographique, dessus: des points indiquant des lieux, à la droite de la carte j'ai deux blocs :1) texte, 2) gg maps.
Ainsi lorsque je clique sur l'un d'entre eux (points) je voudrais que jquery efface (vide) d'abord ce qui est contenu dans les blocs afin d'y ajouter un nouveau contenu (lieux geographique). et ce pour chaque point de ma carte.

voici mon code qui ne marche pas: (j'ai bien tenté 5 à 6 scenarios de syntaxe mais aucun ne marche. :cry:

Code:

---

$('#point-localisation-VER').click(function(){ $('.zone').empty().show(); $('#local-VER,#gg-VER').show();});

---

la classe "zone" est la div qui contient tout les id de type "local-lieux geographique" et "gg-lieux geographique"

Il nous eût été utile de voir le htlm associé afin de voir sur quelle structure su travaille ...

Bonjour SpaceFrog, désolé je pensais que seul mon jquery avait un probleme de syntaxe ou fonction:

voici le html:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<div id="carte">   <div id="point-localisation-VER" class="point" ></div> <div id="point-localisation-SQY" class="point" ></div> <div id="point-localisation-VEL" class="point"></div> <div id="point-localisation-LCSC" class="point" ></div> <div id="point-localisation-SG" class="point"></div> <div id="point-localisation-C" class="point"></div> <div id="point-localisation-ML" class="point"></div> <div id="point-localisation-S" class="point" ></div> <div id="point-localisation-M" class="point"></div> <div id="point-localisation-B" class="point"></div> <div id="point-localisation-JJ" class="point" ></div>   </div> <div id="info-localisation"> <?php  include('Adresse.php'); ?> </div> <div id="info-sup"> <?php  include('Googlemaps.php'); ?> </div>

---

la page Adresse.php:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<div class="zone"> <div id="local-VER"> <?php query_posts('p=329'); while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; ?> </div>   <div id="local-SQY">   </div> etc..... </div>

---

la page Googlemaps.php:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="zone"> <div id="gg-VER"> <?php query_posts('p=333'); while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; ?> </div> <div id="gg-SQY"> <?php query_posts('p=321'); while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; ?> </div> etc..... </div>

---

Citation:

---

je pensais que seul mon jquery avait un probleme

---

Oui, il y en a déjà un...
D'après ton titre :

Citation:

---

utilisation .empty() et append()

---

Mais dans ton code

Code:

---

$('.zone').empty().show();

---

point de trace de .append()... alors du coup, vouloir faire apparaitre un élément que tu viens de vider, c'est un peu ballot ! :aie:

ok, j'ai bugger dans mon message, j'ai fait tellement de tests qu'au final je vous expose mal les éléments de mon probleme:

Voici mon script qui ne marche pas

Code:

---

$('#point-localisation-VER').click(function(){$('.zone').empty().append(); $('#local-VER,#gg-VER').show();});

---

a présent pouvez-vous me guider vers la bonne syntaxe pour effectuer ma fonction : effacer un contenu puis en afficher un autre lors d'un clique ?
1ere question

j'ai egalement essayé ceci: (en vain)

Code:

---

$('#point-localisation-VER').click(function(){$('.zone').empty().append(function(){ $('#local-VER,#gg-VER').show();});});

---

Code:

---

$('#point-localisation-VER').click(function(){$('.zone').empty().prepend(function(){ $('#local-VER,#gg-VER').show();});});

---

merci par avance pour votre aide
Personne ne peut m'aider ?

toujours pareil au niveau de ton append()
il est vide ... tu n'appendes rien ...

désolé ppour le dernier post, :oops:

je n'arrive toujours pas effectuer ma fonction, voici mes tentatives:

Code:

---

$('#point-localisation-VER').click(function(){$('.zone').empty().append($('#local-VER,#gg-VER'));});

---

Code:

---

$('#point-localisation-VER').click(function(){$('.zone').empty().append($('.zone')); $('#local-SQY, #gg-SQY').show();});

---

qui ne marchent pas !!!

j'ai la berlue ou tu essayes d'appender un div dans un select ?
tu parles bien de balise select ???

tu n'as pas la berlu, maintenant reste à savoir si mon choix de empty et append est juste ?

je me suis référé à ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10

Exemple 3: Ajoute un élément DOM à la suite du contenu de chaque paragraphe.   $("p").append( $("#foo")[0] ); Code de test:   <p>I would like to say: </p><b id="foo">Hello</b> Résultat:   <p>I would like to say: <b id="foo">Hello</b></p>

---

le probleme c'est que ne vois pas comment faire autrement pour effacer un contenu et ensuite y ajouter un autre lors d'un clique.

j'attends ton conseil

par contre je n'utilise pas du tout de balise select.
je precise: j'ai des points(lieux geographiques) à chaque fois que je clique dessus, je veux pouvoir (tout d'abord) effacer le contenu de deux div et (ensuite) afficher dans ces meme div un nouveau/autre contenu.

si tu ne peux pas me donner de réponse, peux tu au moins m'aiguiller sur la fonction jquery la plus à même de répondre à mon problème?

merci

dans un select tu ne peux appender que des options ...

Spacefrog , que vient faire l'histoire du select puisque je n'en utilise pas ?

aurais-tu une idée de qu'elle fonction je dois utiliser pour effectuer ma fonction?

Citation:

---

j'ai la berlue ou tu essayes d'appender un div dans un select ?
tu parles bien de balise select ???

---

Citation:

---

tu n'as pas la berlu,

---

:koi:

Donc du coup je n'ai toujours pas compris ce que tu cherches a faire ...

j'essaie bien d'appender une div mais en aucun cas dans un select.
Mais ça se trouve ce n'est pas la bonne fonction jquery à utiliser dans ce cas là?

le select dont tu parles c'est bien: une liste de choix deroulant, n'est ce pas ?
je n'utilise pas du tout ça !!

je reexplique (mais relire mon premier post):

j'ai une carte geographique , dessus sont placés des points (indiquant des lieux precis) , à la droite de la carte, j'ai deux blocs(l'un en dessous de l'autre): 1/ texte (coordonnées du lieu) , 2/ carte ggmaps.

au clique d'un des points je veux pouvoir effacer le contenu des deux blocs et afficher les informations relatives au point (lieu precis)

append() insère un element DOM

ce que tu insères est déja présent sur la page ??
si tu appendes un element existant, ça revient à le deplacer ...

sinon ça reste flou ton explication ...

t'as pas un screen ?

j'ai compris le probleme, mais dans ce cas la existe t-il un solution pour effectuer ce que je veux ?

et oui, ce que j'insere est present dans deux pages php séparé que j'include

voici le screen ||
\/

pointe avec une methode ajax au survol du point vers une page php qui te retourne le contenu

regarde en particulier du coté de .load()

Spacefrog, peut-on recuperer une partie precise d'une page php en ajax, par exemple une div ?

j'ai essayé ceci: (marche pas)

Code:

---

1 2 3

$('#point-localisation-VER').click(function(){ $('.zone').load('#local-VER,#gg-VER'); });   $('#point-localisation-VER').click(function(){ $('.zone').load('/ #local-VER,#gg-VER'); });

---

a partir de ces indications

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Example: Load the main page's footer navigation into an ordered list. <!DOCTYPE html> <html> <head> <style> body{ font-size: 12px; font-family: Arial; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body>   <b>Footer navigation:</b> <ol id="new-nav"></ol>   <script> $("#new-nav").load("/ #jq-footerNavigation li"); </script>   </body> </html>

---

est-ce possible, peut-on adapter le code ?

le contenu de tes zones il vient d'ou ???
il est deja sur l a page dans des divs cachés ou tu veux aller le rechercher sur le serveur ???

si c'est sur des div cachés
sur le click tu remplis la zone avec le contenu de la zone cachée

Code:

---

$('#point-localisation-VER').click(function(){ $('.zone').html( $('#local-VER').html() ); });

---

merci bcp spacefrog, on avance , mais

il y a un bug et ne comprends pas pourquoi:
au clique: apparait bien le contenu des deux blocs,
mais au deuxieme clique (soit le même, soit un autre lieu) le script s'arrete, tout devient blanc (le contenu s'efface).

voici la mise a jour du script:

Code:

---

$('#point-localisation-VER').click(function(){ $('.zone1').html($('#local-VER').html()); $('.zone2').html($('#gg-VER').html()); });

---

a priori si je comprend ton but, il serait intéressant de factoriser le click...

Code:

---

1 2 3 4 5

$('[id^="point-localisation"]').click(function(){ cible=$(this).attr('id').match(/-[^-]+$/) $('.zone1').html($('#local'+cible).html()); $('.zone2').html($('#gg'+cible).html()); });

---

pour ce qui est du blocage après le premier click, à priori il n'y a pas de raison.
Il faudrait voir le code intégral après modification

SpaceFrog je te remercie sincerement pour tout tes conseils et reponses :ccool:, je vais essayer ta suggestion , mais pourrais-tu me donner un dernier renseignement : en m'expliquant comment marche ton script car j'ai du mal à l'interpreter. De plus dés qu'il s'agit de faire des opérations (meme banale) je ne suis plus a l'aise.

Au final, je vais sans doute laisser tomber cette technique et plutot utiliser une popup. (uniquement pour des raisons de facilité d'utilisation pour le client).

C'est pas bien compliqué ...

explication de code :
$('[id^="point-localisation"]'). = tous les elements dont l'id commenc par "point-localisation"

ensuite sur le click de l'element on recupère la fin de l'id

Code:

---

cible=$(this).attr('id').match(/-[^-]+$/)

---

en récupérant tous les caractères finaux n'etant pas un "-" et le signe - les précédant
du coup ça nous permet de commer le contenu de

Code:

---

$('#local'+cible)

---

qui est le div contenant les infos relatives au point cliqué ...
dans .zone1
et l'autre dans .zone2

Code:

---

1 2 3 4 5

$('[id^="point-localisation"]').click(function(){ cible=$(this).attr('id').match(/-[^-]+$/) $('.zone1').html($('#local'+cible).html()); $('.zone2').html($('#gg'+cible).html()); });

---

merci spacefrog bonne continuation