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

Envoyer une info en js pour ne pas répéter le html - HTML/CSS - Programmation

Marsh Posté le 01-01-2014 à 19:13:09    

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 !

Reply

Marsh Posté le 01-01-2014 à 19:13:09   

Reply

Marsh Posté le 02-01-2014 à 11:04:24    

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 Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 02-01-2014 à 18:32:44    

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

Reply

Marsh Posté le 03-01-2014 à 09:36:31    

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.

Reply

Marsh Posté le 05-01-2014 à 13:55:50    

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>
  11.   <div id="modal_name" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  12.    <div class="modal-dialog">
  13.     <div class="modal-content">
  14.      <div class="modal-body">
  15.       La valeur de variable: <span id="variable"></span>
  16.      </div>
  17.     </div>
  18.    </div>
  19.   </div>
  20.  <script src="http://code.jquery.com/jquery.js"></script>
  21.  <script type="text/javascript">
  22.   $(document).on("click", ".target-modal", function () {
  23.   var variable_modal = $(this).data('content').variable;
  24.   $("#variable" ).html(variable_modal);
  25.   });
  26.  </script>
  27.  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  28. </body>
  29. </html>


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

Reply

Marsh Posté le 05-01-2014 à 16:45:07    

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
Reply

Marsh Posté le 05-01-2014 à 18:36:22    

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" }'


Reply

Marsh Posté le 05-01-2014 à 20:01:17    

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
Reply

Marsh Posté le 08-01-2014 à 10:21:29    

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.
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed