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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Envoyer une info en js pour ne pas répéter le html

polo7

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 :

<button class="btn" href="#generic" role="button" data-toggle="modal">Link modal 1</button>
<button class="btn" href="#generic" role="button" data-toggle="modal">Link modal 2</button>
<div id="generic" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Title</h3>
</div>
<div class="modal-body">
Content from link 1 or link 2 ...
</div>
</div>
</div>
</div>

Merci pour le tuyau !

Publicité

rufo

Pas me confondre avec Lycos!

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

polo7

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

Pablo Escrobarbe

Retour d'exil

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.

polo7

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

Code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
<a class="target-modal " href="#modal_name" role="button" data-toggle="modal" data-content='{ "variable": "Ma valeur 1" }'>Lien 1</a>
<a class="target-modal " href="#modal_name" role="button" data-toggle="modal" data-content='{ "variable": "Ma valeur 2" }'>Lien 2</a>
<div id="modal_name" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
La valeur de variable: <span id="variable"></span>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).on("click", ".target-modal", function () {
var variable_modal = $(this).data('content').variable;
$("#variable" ).html(variable_modal);
});
</script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>

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

torwood3

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

polo7

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 :

var anchor_modal = $(this).data('content').anchor;
$("#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 :

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

torwood3

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 !

Pablo Escrobarbe

Retour d'exil

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.

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 ie	Balise 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 HTML	Menu HTML/CSS
Plus de sujets relatifs à : Envoyer une info en js pour ne pas répéter le html

Page générée en 0.084 secondes