Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1546 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Envoyer une info en js pour ne pas répéter le html

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Envoyer une info en js pour ne pas répéter le html

n°2214726
polo7
Posté le 01-01-2014 à 19:13:09  profilanswer
 

Bonjour,
J'ai une grande boucle et afin d'éviter de répéter l'html modal de bootstrap, je souhaiterais l'envoyer par javascript.
Dans le code, j'ai mis 2 liens.
Comment chaque lien peut-il envoyer ses infos spécifiques, comme la valeur 1 pour Link 1 et la valeur 2 pour Link 2.
Je souhaite afficher cette valeur dans modal-body.
 

Code :
  1. <button class="btn" href="#generic" role="button" data-toggle="modal">Link modal 1</button>
  2.  <button class="btn" href="#generic" role="button" data-toggle="modal">Link modal 2</button>
  3.  <div id="generic" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  4.   <div class="modal-dialog">
  5.    <div class="modal-content">
  6.     <div class="modal-header">
  7.      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  8.      <h3 class="modal-title">Title</h3>
  9.     </div>
  10.     <div class="modal-body">
  11.      Content from link 1 or link 2 ...
  12.     </div>
  13.    </div>
  14.   </div>
  15.  </div>


 
Merci pour le tuyau !

mood
Publicité
Posté le 01-01-2014 à 19:13:09  profilanswer
 

n°2214753
rufo
Pas me confondre avec Lycos!
Posté le 02-01-2014 à 11:04:24  profilanswer
 

Regardes du côté d'Ajax et de la lib JQuery ou Prototype, par ex ;)


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2214831
polo7
Posté le 02-01-2014 à 18:32:44  profilanswer
 

J'ai cherché dans ce domaine, mais pas trouvé, il faudra que je me mettre au javascript !

n°2214864
Pablo Escr​obarbe
En exil
Posté le 03-01-2014 à 09:36:31  profilanswer
 

Pas trouvé quoi ? Tu récupères tes données grâce à une requête Ajax. En JQuery par exemple, tu peux créer totalement du contenu à la volée en fonction du contenu.

n°2215036
polo7
Posté le 05-01-2014 à 13:55:50  profilanswer
 

Comme pas trouvé de script, je m'y suis mis et avec jquery, c'est pas mal.
Voici le code fonctionnant online:

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  6. </head>
  7. <body>
  8.   <a class="target-modal " href="#modal_name" role="button" data-toggle="modal" data-content='{ "variable": "Ma valeur 1" }'>Lien 1</a>
  9.   <a class="target-modal " href="#modal_name" role="button" data-toggle="modal" data-content='{ "variable": "Ma valeur 2" }'>Lien 2</a>
  10.   <div id="modal_name" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  11.    <div class="modal-dialog">
  12.     <div class="modal-content">
  13.      <div class="modal-body">
  14.       La valeur de variable: <span id="variable"></span>
  15.      </div>
  16.     </div>
  17.    </div>
  18.   </div>
  19.  <script src="http://code.jquery.com/jquery.js"></script>
  20.  <script type="text/javascript">
  21.   $(document).on("click", ".target-modal", function () {
  22.   var variable_modal = $(this).data('content').variable;
  23.   $("#variable" ).html(variable_modal);
  24.   });
  25.  </script>
  26.  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  27. </body>
  28. </html>


 
Cependant, comment peut on écrire dans une url, j'aimerai que js écrive 214: form.php?rub=truc#anchor-214 ?

n°2215044
torwood3
Posté le 05-01-2014 à 16:45:07  profilanswer
 

Bonjour,
 
J'ai vraiment du mal à comprendre tes phrases ...
Bref, en javascript la concaténation s’effectue avec l'opérateur +  
Dans ton cas :  
   var number = 214;
   jQuery.get("form.php?rub=truc#anchor-" + number);


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
n°2215053
polo7
Posté le 05-01-2014 à 18:36:22  profilanswer
 

En effet, "écrire" ne veut pas dire grand chose. J'ai trouvé la syntaxe pour envoyer les données, mais c'est tout l'url qu'il faut envoyer.
Le but étant d'insérer un formulaire dans le modal et de retrouver la position d'origine sur la page.
Entre temps, ça fonctionne en ajoutant:

Code :
  1. var anchor_modal = $(this).data('content').anchor;
  2. $("#monformulaire" ).attr( "action", "index.php?rub=user#anchor-"+anchor_modal);


Ca permet de récupérer la valeur anchor de l'attribut data-content du lien.
Il faut bien entendu modifier le lien ainsi:

Code :
  1. data-content='{ "variable": "Ma valeur",  "anchor": "214" }'


n°2215059
torwood3
Posté le 05-01-2014 à 20:01:17  profilanswer
 

Hum... Normalement une modale ne modifie pas la position, puisque justement elle vient aussi de la page courante.
Du coup, je vois pas trop ton soucis.
 
Si tu as trouvé une solution c'est une bonne chose :)
 
Bonne soirée !


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
n°2215313
Pablo Escr​obarbe
En exil
Posté le 08-01-2014 à 10:21:29  profilanswer
 

Tu utilises quel modal ? Vu que tu utilises Jquery va voir le pluging "jquery.reveal.js" j'ai pas du tout eu ce problème quand j'ai eu des modales à faire.
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Envoyer une info en js pour ne pas répéter le html

 

Sujets relatifs
Emojis en HTML?Help ! Perdue pour projet Licence2 info
[HS] Nuit de l'info 2013 : supportez-nous ![HTML/CSS]** HEEEELP PLEASE Comment retirer un pied de page en CSS ??
[HTML/JS] Créer et télécharger un fichier CSV avec ieBalise html pour fichier .g3w
Projet de fin d'année. (Java,Html,MySQL,PHP)[JAVASCRIPT + HTML] Problème fonction Return
Faire un register et Login Pour un site HTMLMenu HTML/CSS
Plus de sujets relatifs à : Envoyer une info en js pour ne pas répéter le html


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR