This question already has answers here:
How to select html nodes by ID with jquery when the id contains a dot?
(8 answers)
Closed 2 years ago.
I'm trying to retrieve an element with jquery, but I can't ... The element with the corresponding id is created and present on my source code, however, with the correct selector, it remains undefined.
my html:
<div id='container-journal'>
<!--Pour scroll jusqu'au nouveau texte-->
<button id='btn-scroll'>Scroll</button>
<input type="text" id='scroll_to' value="{{scroll_to}}" >
<div id="cadre-sommaire" class="list-group">
{{sommaire_html|safe}}
</div>
<div id='cadre-textes' data-spy="scroll" data-target="#cadre-sommaire" data-offset="30" class="scrollspy-example">
{{textes_html|safe}}
<div id='to-be-continued'>
<img id="image-stylo" src="{% static 'aventures/stylo_plume.png' %}" alt="un stylo plume">
</div>
</div>
</div>
The searched element is located in the variable textes_html.
When the input has the value: '#cha-3-sit-4.2'
My source gives me the element: <p id="cha-3-sit-4.2" class="texte-chap-situ heros-concernes">...</p>
JS code:
$(function() {
$('#container-journal').on('click', '#btn-scroll', function() {
var scroll_to = $('#scroll_to').val()
if (scroll_to.length) {
$('#cadre-textes').animate({
scrollTop: $(scroll_to).offset().top
}, 1000);
}
})
})
I guess the reason is because the DOM is created from a variable, but I don't understand why this is a problem. Sorry, I'm a beginner.
Thx !
add:
Im using Django
Here the created source:
<div id='container-journal'>
<!--Pour scroll jusqu'au nouveau texte-->
<button id='btn-scroll'>Scroll</button>
<input type="text" id='scroll_to' value="#cha-3-sit-4.2" >
<div id="cadre-sommaire" class="list-group">
<a class='list-group-item list-group-item-action chapitre sommaire' href='#chapitre-1'>Chapitre 1 : Préparatifs</a><a class="list-group-item list-group-item-action tour sommaire" href="#chap-1-situ-1" >Se préparer pour le ...</a><a class='list-group-item list-group-item-action chapitre sommaire' href='#chapitre-2'>Chapitre 2 : La grande plaine</a><a class="list-group-item list-group-item-action tour sommaire" href="#chap-2-situ-2" >La grande champignon...</a><a class='list-group-item list-group-item-action chapitre active sommaire' href='#chapitre-3'>Chapitre 3 : La forêt enchantée</a><a class="list-group-item list-group-item-action tour sommaire" href="#chap-3-situ-1" >Choix du chemin dans...</a><a class="list-group-item list-group-item-action tour sommaire" href="#chap-3-situ-4" >La vieille cabane</a>
</div>
<div id='cadre-textes' data-spy="scroll" data-target="#cadre-sommaire" data-offset="30" class="scrollspy-example">
<hr class='hr-tour'><h3 class='journal-h' id='chapitre-1'>Chapitre 1 : Préparatifs</h3><hr class='hr-tour'><span class='texte-chap-situ'>Vous vivez dans un petit village à l'orée d'un bois, mais aujourd'hui n'est pas un jour comme les autres. Aujourd'hui, vous partez à l'aventure. <br>Aujourd’hui, vous partez défier un dragon et vous comptez bien revenir avec un trésor!</span><br><br><hr class='hr-tour'><h4 class='journal-h' id='chap-1-situ-1'>Se préparer pour le voyage</h4><hr class='hr-tour'><p class="tours">Tour n° 1.</p><br><p id="cha-1-sit-1.0" class="texte-chap-situ heros-concernes">Polux, pantouffle et mirouffle.</p><p class="texte-chap-situ">Pour trouver le dragon, vous allez rencontrer de nombreux dangers. Il faut donc bien vous préparer et pour cela une petite visite dans le village s'impose !</p><br><hr class='hr-tour'><h3 class='journal-h' id='chapitre-2'>Chapitre 2 : La grande plaine</h3><hr class='hr-tour'><span class='texte-chap-situ'>Alors que vous quittez le village, vous découvrez un vaste paysage, mais pas des plus faciles à parcourir.</span><br><br><p class="tours">Tour n° 2.</p><br><hr class='hr-tour'><h4 class='journal-h' id='chap-2-situ-2'>La grande champignonnière</h4><hr class='hr-tour'><p class="tours">Tour n° 3.</p><br><p id="cha-2-sit-2.0" class="texte-chap-situ heros-concernes">Polux, pantouffle et mirouffle.</p><p class="texte-chap-situ">Vous entrez dans la grande champignonnière. Tout est sombre et humide partout autour de vous, des petites silhouettes tapies dans l'ombre semblent vous observer. Elles sont de plus en plus nombreuses.</p><p class="texte-chap-situ">Vous avez déjà entendu parler de ces créatures, et êtes convaincus qu'elles sont parfaitement inoffensives. Vous vous souvenez avoir lu qu'elles sont très craintives et sensibles au bruit.</p><br><p class="journal-heros"><em><strong>Polux</strong> souhaite essayer de leur parler.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/reussite.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">Pas très sûr de toi, tu essaies d’entrer en contact avec les petites créatures. Tes paroles résonnent dans la champignonnière, les silhouettes se bouchent les oreilles et finissent par disparaître. Alors que tu t’apprêtes à repartir, un peu déçu, tu remarques l’une d’entre elles venant à toi et poussant d’étranges chaussons faits de feuilles et d’écorce. Ils sont très confortables, mais surtout, tes pas ne font plus aucun bruit.</div></div><hr><br><p class="journal-heros"><em><strong>Mirouffle</strong> souhaite courir et essayer de les semer avec l'aide de <strong>Pantouffle</strong>.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/echec.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">D’un coup, vous vous élancez et vous mettez à courir le plus vite possible sans regarder derrière vous. Vous vous rendez rapidement compte que les petites créatures ne vous encerclaient pas réellement, mais qu’en réalité, la forêt en est remplie. Sans pour autant les voir, vous sentez l’agitation causée par votre fuite et en comprenez un peu tard la raison : vous piétinez de nombreux champignons, et cet acte de destruction semble les affoler.</div></div><hr><br><p id="cha-2-sit-2.1" class="texte-chap-situ heros-concernes">Pantouffle et mirouffle.</p><p class="texte-chap-situ">La limite de la champignonnière n’est plus très éloignée et il est fort probable qu’on ne te suivra pas en dehors, mais devant l’attitude de plus en plus agitée des petites silhouettes, vous réfléchissez à la meilleure démarche à suivre…</p><br><p class="journal-heros"><em><strong>Pantouffle</strong> souhaite arrêter de courir.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/reussite.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">Comprenant l’agitation crée par ta fuite, tu décides de t’arrêter. Les créatures se calment à leur tour, leurs visages restent fermés, mais elles ne font pas signe de vouloir s’approcher. Après quelques instants, tu reprends lentement la route en faisant bien attention à ne pas piétiner les champignons, tu comprends vite que cette attitude est plus raisonnable et ressens l’apaisement des petites silhouettes environnantes. Elles te surveillent jusqu’à la sortie de la champignonnière, que tu n’es pas malheureux de quitter.</div></div><hr><br><p class="journal-heros"><em><strong>Mirouffle</strong> souhaite continuer à courir.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/reussite_critique.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">Tu redoubles d’effort et parviens à sortir de la champignonnière. Tu es épuisé et a besoin de te reposer un bon moment afin de récupérer de tes émotions.</div></div><hr><hr class='hr-tour'><h3 class='journal-h' id='chapitre-3'>Chapitre 3 : La forêt enchantée</h3><hr class='hr-tour'><span class='texte-chap-situ'>Vous laissez enfin la grande plaine derrière vous. Il fait chaud et vous ne seriez pas mécontent d’arriver en forêt si vous ne vous étiez pas un minimum renseigné sur ce qui vous attend. Autrefois rayonnante et pleine de vie, la Forêt Enchantée est désormais plongée dans l’obscurité et le silence, on la surnomme d’ailleurs maintenant la « Forêt Maudite ». Force est de constater qu’il ne reste plus grand-chose de l’ancienne magie, pure et bienfaisante. Les créatures que l’on y rencontre ne sont pas toutes malsaines, non, mais disons que la tendance n’est clairement plus aux bénédictions.</span><br><br><hr class='hr-tour'><h4 class='journal-h' id='chap-3-situ-1'>Choix du chemin dans la forêt</h4><hr class='hr-tour'><p class="tours">Tour n° 4.</p><br><p id="cha-3-sit-1.0" class="texte-chap-situ heros-concernes">Polux, pantouffle et mirouffle.</p><p class="texte-chap-situ">Arrivés dans la forêt, trois choix s’offrent à vous.<br>Le premier sentier mène aux anciennes sources d’eau chaude, autrefois très appréciées des voyageurs. Malheureusement, Kaa, un python d’une taille gigantesque, a décidé d’en faire son territoire. Le second sentier, à l’opposé du premier, risque de vous mener tout droit chez Verrula, une sorcière méchante et hideuse comme il se doit. Enfin, il est possible d’éviter ces sentiers, la progression en sera plus difficile et semée d’obstacles, mais les mauvaises rencontres moins certaines.</p><br><p class="journal-heros"><em><strong>Pantouffle</strong> souhaite le sentier de la sorcière avec l'aide de <strong>Mirouffle et Polux</strong>.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/reussite.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">En vous engageant sur ce chemin, vous vous remémorez ce que vous savez sur la sorcière. Verrula est installée dans la forêt depuis bien longtemps, il semble qu’elle se soit elle-même tournée vers le côté obscur progressivement, comme la forêt. Ainsi tout n’est pas perdu, peut-être lui reste-t-il un peu de gentillesse. Quoi qu’il en soit, elle a la fâcheuse tendance à se servir des aventuriers de passage comme cobayes pour ses expériences. Oh, ils finissent tous par ressortir de la forêt un jour ou l’autre… Il paraît que le dernier est rentré chez lui avec un nez de cochon.</div></div><hr><hr class='hr-tour'><h4 class='journal-h' id='chap-3-situ-4'>La vieille cabane</h4><hr class='hr-tour'><p class="tours">Tour n° 5.</p><br><p id="cha-3-sit-4.0" class="texte-chap-situ heros-concernes">Polux, pantouffle et mirouffle.</p><p class="texte-chap-situ">Vous vous engagez sur le sentier de la sorcière et remarquez très vite, à votre grand plaisir, que cette partie de la forêt semble avoir gardée un peu de son charme d’autrefois. Les arbres paraissent plus verts, moins serrés les uns contre les autres et le chemin en meilleur état. Bref, la promenade commence bien.<br>Bientôt vous découvrez une petite cabane en bois au bord du chemin. Le moins que l’on puisse dire, c’est qu’elle n’inspire pas confiance, elle est dans un sale état mais sa construction, robuste, ne laisse pas de place au doute quant à sa solidité. Ici et là sont accrochés aux murs d’étranges outils dont vous n’avez aucune idée de l’utilité, vous vous demandez d’ailleurs s’ils ne sont pas purement « décoratifs ». Vous remarquez aussi que diverses parties animales y sont accrochées, ce qui a pour effet de vous inquiéter davantage.<br>S’agit-il de la maison de la sorcière ? Celle-ci paraissant abandonnée, votre curiosité vous pousse à vous en approcher. Vous allez jusqu’à poser l’oreille contre la porte, à l’affut d’un bruit.<br>« Crrrrôôôôaaaaaa, crôa crôôaaaaaa ! » Un bruit infernal retentit alors derrière la porte, suivi de tapotements frénétiques contre la paroi. Vous sursautez et faites un bond en arrière. La créature enfermée dans cette cabane semble en grande détresse, son attitude indique clairement un appel à l’aide ! Mais vous n’avez plus vraiment de doute quant à la propriétaire des lieux, cette cabane appartient à la sorcière.</p><br><p class="journal-heros"><em><strong>Polux</strong> souhaite entrer dans la cabane avec l'aide de <strong>Pantouffle</strong>.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/reussite.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">Quelque soit l’animal qui se trouve derrière cette porte, il a besoin de votre aide et vous ne pouvez pas vous résigner à passer votre chemin. La peur au ventre, vous essayez d’ouvrir discrètement la porte. Malheureusement, elle semble fermée de l’intérieur et vous n’avez pas d’autre choix que de rentrer en force. Elle cède facilement et vous vous retrouvez propulsés à l’intérieur. <br>Ce que vous découvrez est plus étrange encore qu’à l’extérieur : des ingrédients inconnus, des ustensiles de cuisine, des fioles et bocaux aux contenus douteux, de vieux livres poussiéreux sur des étagères bancales… Et une marmite posée dans la cheminée, au-dessus d’un feu mourant.</div></div><hr><br><p class="journal-heros"><em><strong>Mirouffle</strong> souhaite continuer son chemin.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/reussite.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">La prudence est de mise dans une telle situation. Quel que soit l’animal qui se trouve derrière cette porte, vous estimez que le risque de tomber nez à nez avec la sorcière est trop élevé, il pourrait d’ailleurs s’agir d’un piège, ou réveiller la sorcière de sa sieste... Vous n’avez aucune envie de vous attarder sur les lieux et vous vous éloignez en courant de la vieille cabane.</div></div><hr><br><p id="cha-3-sit-4.1" class="texte-chap-situ heros-concernes">Polux et pantouffle.</p><p class="texte-chap-situ">Les croassements vous ramènent à la réalité, le seul être vivant que vous trouvez en ce lieu ressemble à un corbeau, le bec bien trop gros, les ailes atrophiées et à moitié déplumé. Pas de sorcière à l’horizon, c’est un grand soulagement. Mais le corbeau ne vous laisse pas de répit, il sautille vers un objet d’apparence ronde et cristalline et le tapote du bec, vous indiquant de le prendre. Au moment ou l’un de vous saisit l’objet, une faible lueur s’en dégage et il est assailli par des paroles : « Aide-moi ! Aide-moi ! La fiole ! La fiole ! »<br>Vous comprenez que le corbeau surexcité peut vous parler par l’intermédiaire de cet objet magique.</p><br><p class="journal-heros"><em><strong>Polux</strong> souhaite rester pour aider le corbeau.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/reussite.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">Ce pauvre animal te semble louche. Pourtant tu ne peux pas te résoudre à l’abandonner et décides de rester l’aider.</div></div><hr><br><p class="journal-heros"><em><strong>Pantouffle</strong> souhaite quitter les lieux et prendre l'objet.</em></p><div class="row" style="margin: 0;"><div class="col-3" ><img class="img-result-journal" src="/static/aventures/reussite.png" alt="Image correspondant au résultat de l'action."></div><div class="journal-texte-tour col-9">Cette situation ne te plaît pas, le corbeau ne t’inspire rien de bon. Tu préfères quitter les lieux sans trainer et glisses l’objet magique dans ta poche avant de sortir, le corbeau te poursuit quelques instants en te demandant de reposer l’objet, enfin en t'invectivant de tous les noms d’oiseaux ! Tu finis par le chasser plus vigoureusement et te sauves en courant, pas très fier de ton attitude.</div></div><hr><br><p id="cha-3-sit-4.2" class="texte-chap-situ heros-concernes">Pantouffle et mirouffle.</p><p class="texte-chap-situ">Vous courez un bon moment avant de vous considérer en sécurité, cette cabane était vraiment effrayante. Vous êtes fatigué d’avoir autant couru et avez besoin de refaire le plein d’énergie. Il faut marcher encore un peu avant de trouver un endroit acceptable pour une petite pause.<br>L’endroit est idéal, ensoleillé, placé au bord d’une rivière, un ancien banc usé par le temps et datant d’une époque où il faisait bon se promener en ce lieu, et cerise sur le gâteau, un magnifique pommier rempli de fruits mûrs.</p>
<div id='to-be-continued'>
<img id="image-stylo" src="/static/aventures/stylo_plume.png" alt="un stylo plume">
</div>
</div>
If my DOM is not fully loaded, how can I wait until my variable is loaded before executing my function?
edit2:
The consol errors:
Uncaught TypeError: $(...).offset() is undefined
<anonymous> http://127.0.0.1:8000/static/aventures/js/chapitre.js:252
jQuery 8
dispatch
handle
add
ke
each
each
ke
on
<anonymous> http://127.0.0.1:8000/static/aventures/js/chapitre.js:247
jQuery 13
e
t
setTimeout handler*l/<
c
fireWith
fire
c
fireWith
ready
B
EventListener.handleEvent*
<anonymous>
<anonymous>
chapitre.js:252:33
<anonyme> http://127.0.0.1:8000/static/aventures/js/chapitre.js:252
jQuery 8
dispatch
handle
(Asynchrone : EventListener.handleEvent)
add
ke
each
each
ke
on
<anonyme> http://127.0.0.1:8000/static/aventures/js/chapitre.js:247
jQuery 13
e
t
(Asynchrone : setTimeout handler)
l
c
fireWith
fire
c
fireWith
ready
B
(Asynchrone : EventListener.handleEvent)
<anonyme>
<anonyme>
<anonyme>
If you are getting Uncaught TypeError: Cannot read property 'top' of undefined it means your event handler is executing.
I think the problem is that the variable scroll_to is not a DOM node, instead, you are just saving the value inside the node ($('#scroll_to').val())
What if you try:
$(function() {
$('#container-journal').on('click', '#btn-scroll', function() {
var scroll_to = $('#scroll_to')
if (scroll_to.val().length) {
$('#cadre-textes').animate({
scrollTop: scroll_to.offset().top
}, 1000);
}
})
})
Related
What I want my code to do is when I pass with my mouse on my text, the next letters of the alphabet appear. Not in the console, in the text on my website. How can i do that?
this is an exemple for what i want : the text become unreadable
var conteneur = document.querySelector('.texte2')
var textBalise = conteneur.textContent.replace(/(\S)/g,'<span class = x>$1</span>')
conteneur.innerHTML = textBalise
var $spans = document.querySelectorAll('span')
function nextLetter(ch) {
if (!ch.match(/[a-zA-ZäöüßÄÖÜ]/i)) return ch;
else if (ch === 'Z') return 'A';
else if (ch === 'z') return 'A';
return String.fromCharCode(ch.charCodeAt(0) + 1);
}
for (var $span of $spans) {
$span.addEventListener('mousemove',(e) => {
console.log(e.target)
console.log(nextLetter(e.target.textContent))
});
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Peut-on encore être graphiste au pays des Templates ?</title>
</head>
<body>
<div class ="texte2">
<p>Avec l’arrivée du numérique, on doit visionner les documents sur des machines et des écrans différents. Cette différence de support de visualisation est déjà bien connue avec le cinéma. En effet visionner un film en salle ou chez vous est totalement différent. Mais avec l’intermédiaire technique que sont nos ordinateurs, les différences se font encore plus importantes, différence de résolution, du nombre de couleur, de taille, de vitesse d’affichage… Nous avons un codage de l’information puis un décodage avec toutes les variations que cela peut entraîner.</p>
<p>L’arrivée du langage HTML, qui est qu’un langage de description de page. Ce langage donne des indications au navigateur, qui va lui-même interpréter ces pages afin de les afficher au mieux sur votre machine. Suivant votre navigateur, votre système d’exploitation, votre vitesse de connexion, votre écran, vos polices de caractères installées… la formalisation de la page peut être très différente (codage/décodage).</p>
<p>C’est la première fois dans l’Histoire (graphique) que le graphiste/typographe perd le contrôle du choix de la police de caractères. En effet en Html, c’est l’utilisateur final qui choisi sa police de caractère et sa taille dans les préférences de son navigateur.</p>
<p>L’arrivée des CSS a aussi précipité les choses. Dorénavant la forme est totalement séparée du contenu. Il est techniquement très facile de changer la formalisation d’un même contenu sur le Web (savoir si cela à du sens est une autre question). Un des exemples le plus célèbre est sans nul doute : le Zen Garden de Molly Holzschlag.</p>
<p>Dans le monde du jeux vidéos nous avons exactement le même processus, la résolution, l’aspect graphique, la vitesse… du jeu vont différer suivant votre machine. Les concepteurs de jeux ont pris en compte ce genre de contraintes depuis longtemps.
L’arrivée des Mods dans les jeux avec Counter Strike par exemple. Le jeu vendu est souvent une démo technique avec la possibilité de faire ses propres "maps". On donne alors à la communauté des joueurs la possibilité de prendre la parole (ou le fusil ;-) il devient alors coauteur d’un jeu. Attention quand je parle de coauteur, ce n’est pas au sens on nous pouvons le comprendre dans le domaine du cinéma ou de la littérature. De plus je vous passe les problèmes juridiques que cela peut engendrer, suis-je le propriétaire de ma Map, de mon avatar, de mon aventure… ?</p>
<p>Le succès (médiatique) de Second life est un autre un très bon exemple. Des développeurs ont mis à disposition un univers et des outils aux internautes. Petit à petit, les gens ont commencé à développer de petits univers, des objets, des animations… puis un biotope s’est développé presque naturellement (je vous passe mon jugement sur l’aspect formel de Second Life;-).
L’équipe de Linden lab (les créateurs de Second life), n’a pas imposé un univers fini, elle a au contraire juste posé les bases : un espace virtuel, un langage de script et la possibilité de sauvegarder et d’échanger vos créations virtuelles (vous faisant croire que l’on peut devenir riche sur Second Life, très grande idée Marketing). Pas d’histoires pas de scénario, pas de jeux, juste un grand espace vide, une sorte de grand Légo plein de promesse.
ps : Si Second Life vous intéresse, lisez absolument le roman de Neal Stephenson : Snow Crash (le ridicule titre français est Le samouraï virtuel). Vous aurez la source d'inspiration principale des créateurs de Second Life. Vous pouvez aussi jeter un ? il sur un des précurseurs français : le deuxième monde d’Alain et Frédéric Le Diberder + Cryo (à partir de 1994).</p>
<p>Il faut bien sûr citer les systèmes de blog, les Flickr, Ebay et autres MySpace permettant à presque n’importe qui de faire son propre site web, faire sa boutique en ligne et de diffuser photos, vidéos, texte ... très rapidement, facilement et gratuitement (dans la majorité des cas). Nous pourrions continuer longtemps les exemples.</p>
<p>Nous arrivons donc à un moment ou le commanditaire désire naturellement contrôler le contenu (ce qui est normal) mais aussi le contenant de A à Z sur son site web. Le graphiste/designer voit donc son « pouvoir » se déplacer et migrer vers d’autres responsabilités.</p>
<p>ps : Une autre raison peu avouable de cette récente demande de plus grand contrôle de la part des commanditaires, est l’abus de certaines Web Agency (pas de noms ;-) durant la période de la bulle internet (avant 2000), ayant franchement escroqué de nombreux clients en sur-facturant la moindre modification dans leurs sites web après la mise en ligne. Les commanditaires étaient souvent pieds et mains liés devant les agences, car ils n'avaient pas un accès technique direct à leurs sites (les agences donnant souvent des prétextes techniques totalement faux).</p>
</div>
</body>
</html>
.x:hover{
color : "red";
}
You are almost there!
Try:
e.target.innerHTML = nextLetter(e.target.textContent)
as the final line of your event listener function (ie after, or instead of, logging the output of nextLetter() to the console).
It certainly makes the words on the page nonsense pretty fast!
var conteneur = document.querySelector('.texte2')
var textBalise = conteneur.textContent.replace(/(\S)/g,'<span class = x>$1</span>')
conteneur.innerHTML = textBalise
var $spans = document.querySelectorAll('span')
function nextLetter(ch) {
if (!ch.match(/[a-zA-ZäöüßÄÖÜ]/i)) return ch;
else if (ch === 'Z') return 'A';
else if (ch === 'z') return 'A';
return String.fromCharCode(ch.charCodeAt(0) + 1);
}
for (var $span of $spans) {
$span.addEventListener('mousemove',(e) => {
console.log(e.target)
console.log(nextLetter(e.target.textContent))
e.target.innerHTML = nextLetter(e.target.textContent)
});
}
<div class ="texte2">
<p>Avec l’arrivée du numérique, on doit visionner les documents sur des machines et des écrans différents. Cette différence de support de visualisation est déjà bien connue avec le cinéma. En effet visionner un film en salle ou chez vous est totalement différent. Mais avec l’intermédiaire technique que sont nos ordinateurs, les différences se font encore plus importantes, différence de résolution, du nombre de couleur, de taille, de vitesse d’affichage… Nous avons un codage de l’information puis un décodage avec toutes les variations que cela peut entraîner.</p>
<p>L’arrivée du langage HTML, qui est qu’un langage de description de page. Ce langage donne des indications au navigateur, qui va lui-même interpréter ces pages afin de les afficher au mieux sur votre machine. Suivant votre navigateur, votre système d’exploitation, votre vitesse de connexion, votre écran, vos polices de caractères installées… la formalisation de la page peut être très différente (codage/décodage).</p>
<p>C’est la première fois dans l’Histoire (graphique) que le graphiste/typographe perd le contrôle du choix de la police de caractères. En effet en Html, c’est l’utilisateur final qui choisi sa police de caractère et sa taille dans les préférences de son navigateur.</p>
<p>L’arrivée des CSS a aussi précipité les choses. Dorénavant la forme est totalement séparée du contenu. Il est techniquement très facile de changer la formalisation d’un même contenu sur le Web (savoir si cela à du sens est une autre question). Un des exemples le plus célèbre est sans nul doute : le Zen Garden de Molly Holzschlag.</p>
<p>Dans le monde du jeux vidéos nous avons exactement le même processus, la résolution, l’aspect graphique, la vitesse… du jeu vont différer suivant votre machine. Les concepteurs de jeux ont pris en compte ce genre de contraintes depuis longtemps.
L’arrivée des Mods dans les jeux avec Counter Strike par exemple. Le jeu vendu est souvent une démo technique avec la possibilité de faire ses propres "maps". On donne alors à la communauté des joueurs la possibilité de prendre la parole (ou le fusil ;-) il devient alors coauteur d’un jeu. Attention quand je parle de coauteur, ce n’est pas au sens on nous pouvons le comprendre dans le domaine du cinéma ou de la littérature. De plus je vous passe les problèmes juridiques que cela peut engendrer, suis-je le propriétaire de ma Map, de mon avatar, de mon aventure… ?</p>
<p>Le succès (médiatique) de Second life est un autre un très bon exemple. Des développeurs ont mis à disposition un univers et des outils aux internautes. Petit à petit, les gens ont commencé à développer de petits univers, des objets, des animations… puis un biotope s’est développé presque naturellement (je vous passe mon jugement sur l’aspect formel de Second Life;-).
L’équipe de Linden lab (les créateurs de Second life), n’a pas imposé un univers fini, elle a au contraire juste posé les bases : un espace virtuel, un langage de script et la possibilité de sauvegarder et d’échanger vos créations virtuelles (vous faisant croire que l’on peut devenir riche sur Second Life, très grande idée Marketing). Pas d’histoires pas de scénario, pas de jeux, juste un grand espace vide, une sorte de grand Légo plein de promesse.
ps : Si Second Life vous intéresse, lisez absolument le roman de Neal Stephenson : Snow Crash (le ridicule titre français est Le samouraï virtuel). Vous aurez la source d'inspiration principale des créateurs de Second Life. Vous pouvez aussi jeter un ? il sur un des précurseurs français : le deuxième monde d’Alain et Frédéric Le Diberder + Cryo (à partir de 1994).</p>
<p>Il faut bien sûr citer les systèmes de blog, les Flickr, Ebay et autres MySpace permettant à presque n’importe qui de faire son propre site web, faire sa boutique en ligne et de diffuser photos, vidéos, texte ... très rapidement, facilement et gratuitement (dans la majorité des cas). Nous pourrions continuer longtemps les exemples.</p>
<p>Nous arrivons donc à un moment ou le commanditaire désire naturellement contrôler le contenu (ce qui est normal) mais aussi le contenant de A à Z sur son site web. Le graphiste/designer voit donc son « pouvoir » se déplacer et migrer vers d’autres responsabilités.</p>
<p>ps : Une autre raison peu avouable de cette récente demande de plus grand contrôle de la part des commanditaires, est l’abus de certaines Web Agency (pas de noms ;-) durant la période de la bulle internet (avant 2000), ayant franchement escroqué de nombreux clients en sur-facturant la moindre modification dans leurs sites web après la mise en ligne. Les commanditaires étaient souvent pieds et mains liés devant les agences, car ils n'avaient pas un accès technique direct à leurs sites (les agences donnant souvent des prétextes techniques totalement faux).</p>
</div>
Firstly i would say sorry because my english isn't so good but i will try my best.
So i will explain you my problem, i would like to show all my divs when the users click on a button. It's really complicate for me becase there is a lot of id. It's like a drop menu.
My code :
$("#content_caract_1").hide();
$("#content_caract_2").hide();
$("#content_caract_3").hide();
$("#content_caract_4").hide();
$('#btnd').click(function() { // Au clic sur un élément
$(".forbutton").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1').click(function() { // Au clic sur un élément
$("#content_caract_1").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click(function() { // Au clic sur un élément
$("#content_caract_1bis").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis2').click(function() { // Au clic sur un élément
$("#content_caract_1bis2").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis3').click(function() { // Au clic sur un élément
$("#content_caract_1bis3").toggle(400); // chache ou affiche a une vitesse constante (400)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnp" value="Tout plié">
<input type="button" id="btnd" value="Tout déplié">
<div id="caract1">
<h2>Etape 1 : Les enjeux et le parcours</h2>
</div>
<div class="forbutton">
<div id="content_caract_1">
<p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis
ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>
<div id="caract1bis">
1.1 Enjeux du programme Appolo</br>
</div>
<div id="content_caract_1bis">
<p>test</p>
</div>
<div id="caract1bis2">
1.2 Retour d'experience</br>
</div>
<div id="content_caract_1bis2">
<p>test</p>
</div>
<div id="caract1bis3">
1.3 Votre parcours
</div>
<div id="content_caract_1bis3">
<p>test</p>
</div>
</div>
</div>
There is 4 block like this, i would like to click on the button et show all the things inside the block.
Thanks to you had read me ! If you need more precision, im here to answer.
Thanks
Nico
You could assign a class to everything you need to be "toggable"
<div class="toggable">
one
</div>
<div class="toggable">
two
</div>
<button id="hide-stuff">
toggle
</button>
Then catch the all in one call like this
$('#hide-stuff').click(function() {
$('.toggable').toggle();
})
You are toggling your parent div on button click and hiding all its children on page load. Just toggle parent div on page load.
<script>
$(".forbutton").hide();
//$("#content_caract_1").hide();
//$("#content_caract_2").hide();
//$("#content_caract_3").hide();
//$("#content_caract_4").hide();
$('#btnd').click( function() { // Au clic sur un élément
$(".forbutton").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1').click( function() { // Au clic sur un élément
$("#content_caract_1").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click( function() { // Au clic sur un élément
$("#content_caract_1bis").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis2').click( function() { // Au clic sur un élément
$("#content_caract_1bis2").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis3').click( function() { // Au clic sur un élément
$("#content_caract_1bis3").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$("#content_caract_1").find("div").hide();
$('#btnp').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").show();// chache ou affiche a une vitesse constante (400)
});
$('#btnd').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").hide();// chache ou affiche a une vitesse constante (400)
});
I have following data in JSON format and I want to parse in in JavaScript.
{"id":"897868990272958","posts":{"data":[{"id":"897868990272958_965738636819326","message":"As you are now aware, Federal elections have to be financed by personal donations only. To support my campaign, there is still tickets for my cocktail of Aug.27. at Balmoral's Community center. A 75% tax credit will be given for the net value of the ticket after expenses (+/- 33,75$ back into your pockets).\n\nComme vous le savez, les élections fédérales ne sont financées que par des dons personnels. Afin d'encourager ma campagne, il reste toujours des billets pour le cocktail du 27 août au centre communautaire de Balmoral. Un crédit d'impôt de 75% vous sera retourné sur la valeur net du billet après dépenses (+/- 33,75$ de retour dans vos poches).\n\nTo reserve tickets/pour réserver des billets: 753-6121.","comments":{"data":[{"id":"965738636819326_966081753451681","message":"je t'encourage mon rene mes indisponible ce soir"}],"paging":{"cursors":{"after":"MQ==","before":"MQ=="}}}},{"id":"897868990272958_965083470218176","message":"Hier, Haut-Madawaska !\n\nVisite d'entreprises et quelques poignées de mains à Clair et Baker Brook. Une visite éclaire à Saint-Hilaire et Edmundston puis, en soirée, rencontre avec le conseil municipal du Lac Baker. Le Haut-Madawaska est un exemple d'entrepreneurship et d'esprit d'initiative. Le chômage y est à zéro et on manque de travailleurs. Pas besoin d'envier la Beauce. À preuve, cette Coopérative qui vient de naitre à Clair et dont l'objectif ultime est de créer de l'emploi à partir de nos ressources à portée de main, et de miser sur la transformation. Bravo à tous ces convaincus et bénévoles qui ne jurent que par le mouvement coopératif et l'esprit communautaire.\n\nBravo aussi au conseil municipal et au maire suppléant du Lac Baker pour leur dévouement et l'énergie qu'ils mettent à protéger et développer ce bijoux de village.\n\nÀ entendre les gens que nous croisons, dans la rue ou dans les usines, nous recevons une oreille très attentive au Plan des libéraux, relativement à la classe moyenne. Il ne fait aucun doute, le vent tourne !"},{"id":"897868990272958_962429560483567","message":"Venez me rencontrer pour un cocktail !!!\nPour réserver votre billet, communiquez avec nous au quartier général libéral au 753-6121 (15 rue water, Campbellton NB)\n****************************************\nCome and meet me for a cocktail !!!\nTo reserve your tickets, please contact us at the liberal campaign office at 753-6121 (15 Water street, Campbellton NB)"},{"id":"897868990272958_961763833883473","message":"Hier, 18 août, visite de deux conseils municipaux coup sur coup !\n\nD'abord Balmoral. Comme d'autres municipalités de taille équivalente que j'ai déjà rencontrées, un conseil maitrisant ses dossiers avec des projets responsables et raisonnables à portée de réalisation. Il ne manque que la collaboration du fédéral qui n'est que trop absent. Bravo pour ce dynamisme.\n\nEnsuite Dalhousie. Comment ne pas lever son chapeau au maire Tremblay et ses conseillers et conseillères. Ils se battent pour notre petite ville du Restigouche-Est qui a subi des pertes de revenus «drastiques» suivant la fermeture du moulin et celle du plan thermique d'ÉNB. They are facing big challenges and they will have difficult decisions to take. We know the town's council will take those decisions in the best interest of it's community in mind. I will be there with an attentive ear to support their projets."},{"id":"897868990272958_961114093948447","message":"Aujourd'hui, Saint-Léonard au Rendez-vous des artistes !\n\nGrosse chaleur d'été, de beaux tableaux, de belles sculptures, des artistes extraordinaires et des gens qui nous laissent toujours entendre que... le vent tourne ! Je suis revenu à la maison avec ce tableau de circonstance en cette fin de semaine du 15 août. Merci à l'artiste-peintre Péruse. Surtout, toutes nos félicitations aux bénévoles qui ont encore fait un succès de ce rendez-vous des artistes.\n\nWarm day at «Le rendez-vous des artistes\". We saw beautiful paintings, sculpturs, and talked with interesting artists. And how pleasant it was to meet people. They surely let us know that the tide is turning ! I came back home with this beautiful painting right on the point for the ending weekend of the Acadian day. Thanks to artist-painter Péruse. Also, congratulations to all volunteers that made this artists gathering a success."}],"paging":{"previous":"https://graph.facebook.com/v2.4/897868990272958/posts?limit=5&fields=comments.limit%2815%29%7Bcomments%7Bmessage%7D,message%7D,message&since=1440606601&__paging_token=enc_AdD9KfoIkGsvwvKGKPHUvyEPbhuF2RoK63BKHTPw7tovNNMLZAZApH668RXKwpdMnnp7D6psZAc7wZAh0DlYIFoNPsjXjzfML0qyh30Oasasv9pyZAAZDZD&__previous=1","next":"https://graph.facebook.com/v2.4/897868990272958/posts?limit=5&fields=comments.limit%2815%29%7Bcomments%7Bmessage%7D,message%7D,message&until=1439765409&__paging_token=enc_AdDayGW6NPPTZA7gGT2HgRGZAVqinlc7ijLdPwYbZBexBpuBejfIzGdM42uW1GbO8epju5j8dDNv8qJ1lY8SMLZBZBQ3J0cIywdzQclw8KmqXv8HWlgZDZD"}}}
When I use the console of Google Chrome to do that it gives me an error. I want to write following lines:
var json = MY_DATA;
JSON.parse(json);
But when I want to assign my data to json the console gives me following error
Uncaught SyntaxError: Unexpected identifier(…)
What is the problem?
It looks like your JSON is already parsed to an object. You then try to parse it again and it is confused.
This is a pretty common mistake.
Some functionalities in jQuery automatically parse JSON and don't need to be explicitly told to.
#Adosi has already answered this correctly but I was adding an example so I'll include it anyway as it's too long for a comment. Add this to your code and open up your browser's console.
console.clear();
// your original data
var json = MY_DATA;
console.info("var json is a", typeof json);
console.log('json.id:', json.id);
// when json is stored as a string, it needs to be parsed.
// let's convert it back into a string and see what happens
var json_needing_parsing = JSON.stringify(json)
console.info("var json_needing_parsing is a", typeof json_needing_parsing);
console.log('json_needing_parsing.id:', json_needing_parsing.id); //undefined
// That didn't work. Let's parse it.
var json_parsed = JSON.parse(json_needing_parsing);
console.info("var json_parsed is a", typeof json_parsed);
console.log("json_parsed.id:", json_parsed.id);
Here it is in action. http://jsfiddle.net/qn9xkt7c/ (because the Stack Snippet editor was cross at me for the giant json object)
I'm using a jQuery "homemade" script (that I found here) and I'de like to start this one when the scroll reaches the tab block (the blue and grey block at the end of the page).
Here is a live version
My HTML :
<section id="Block" class="container-fluid block">
<div class="row accordeon">
<div class="blue">
<ul class="nav nav-tabs" id="myTab">
<li class="active">1 - Déposez un projet appel d’offre et recevez en moyenne 10 devis</li>
<li>2 - Comparez les devis et négociez librement</li>
<li>3 - Choississez le prestataire que vous voulez, quand vous voulez</li>
<li>4 - Payez le prestataire par le moyen de votre choix</li>
<li>5 - Evaluez le prestataire sur Codeur.com</li>
</ul>
</div>
<div class="gray">
<div class="tab-content">
<div class="tab-pane active" id="deposer">
<h4 class="text-left">1 - Déposez un projet appel d’offre et recevez en moyenne 10 devis</h4>
<p>Sans même vous inscrire, vous publiez votre projet. Il correspond à un appel d'offres auquel les prestataires vont répondre. C'est gratuit et l'inscription se fait automatiquement et simultanément.</p>
<p>Une fois le projet publié sur Codeur, les prestataires concernés sont avertis. Vous n'avez rien d'autre à faire. Vous recevez rapidement des devis gratuits qui seront classés sous la description de votre projet.</p>
<p>En savoir plus sur le dépot de projet :</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment créer mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Comment bien décrire mon projet ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="comparer">
<h4 class="text-left">2 - Comparez les devis et négociez librement</h4>
<p>Comparez les devis et discutez avec leurs prestataires par messagerie privée, par messagerie instantanée ou par téléphone (si vous le souhaitez). Vous pouvez aussi modifier votre projet et donner des précisions aux prestataires. Vous négociez librement et mettez les prestataires en concurrence pour obtenir les meilleurs prix et délais et les meilleures prestations.</p>
<p>En savoir plus sur :</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment inviter un prestataire à faire une offre sur mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Comment utiliser la messagerie ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="choisir">
<h4 class="text-left">3 - Choississez le prestataire que vous voulez, quand vous voulez</h4>
<p>C'est vous qui décidez quand et si vous sélectionnez un prestataire. Vous sélectionnez la personne que vous voulez. C'est très simple, il vous suffit de le sélectionner à partir de la fiche de votre projet.</p>
<p>Choisir un prestataire sur Codeur vous permettra de l'évaluer à l'issue de sa prestation. Vous pouvez aussi demander, avant de commencer le projet, de signer un devis en bonne et due forme.</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment choisir un prestataire pour réaliser mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Pourquoi attribuer un projet sur Codeur.com est il plus sûr ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="payer">
<h4>4 - Payez le prestataire par le moyen de votre choix</h4>
<p>C'est vous qui décidez comment vous réglez votre prestataire. Vous discutez avec lui du moyen de paiement qui vous convient à tous les deux. Pour plus de sécurité, vous pouvez bloquer le paiement sur Codeur Tasks en début de projet, et vous libérez le paiement par étape : à chaque étape réalisée correspond un paiement. Cela permet d'éviter la plupart des litiges.</p>
</div>
<div class="tab-pane" id="evaluer">
<h4>5 - Evaluez le prestataire sur Codeur.com</h4>
<p>Dès la fin du projet, vous pouvez évaluer le prestataire. Votre évaluation sera publiée sur le site et si elle est positive, aidera le prestataire à trouver de nouveaux projets. Le prestataire pourra également vous évaluer et ainsi renforcer votre réputation sur Codeur.com pour trouver un prestataire lors de la publication d'un prochain projet.</p>
</div>
</div>
</div>
</div>
</section>
My script for scrolling :
<!-- Show anim on Scroll -->
<script>
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.ShowMe').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
</script>
My script for the tab animation :
<!-- Tabs -->
<script>
var tabChange = function () {
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show');
};
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000);
// Tab click event handler
$('a').on('click', function (e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show');
// Start the cycle again in a predefined amount of time
setTimeout(function () {
//tabCycle = setInterval(tabChange, 5000);
}, 15000);
});
</script>
I think first off all you need to check if the object is within your screen after you scroll. If you reach the object then check with an if statement if the object is visible and then you should execute your code.
Look at this DEMO and see the whole JS function.
JS
$(window).scroll(function() {
if (checkVisible($('#tester'))) {
alert("Visible!!! Paste your code in this if function!")
} else {
// do nothing
}
});
In your case would that be:
$(window).scroll(function() {
if (checkVisible($('#tester'))) {
var tabChange = function () {
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show');
};
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000);
// Tab click event handler
$('a').on('click', function (e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show');
// Start the cycle again in a predefined amount of time
setTimeout(function () {
//tabCycle = setInterval(tabChange, 5000);
}, 15000);
});
} else {
// do nothing
}
});
Hope this helps!
---EDIT:
To solve that the function is called multiple times you need to unbind the scroll event.
Add this to your code: $(window).off('scroll');
$(window).on('scroll', function() {
if (checkVisible($('#Block'))) {
$(window).off('scroll'); # add this
var tabChange = function () {
i have an entity mapped to other entity entreprise ,with js and jquery i have the chance finally to validate the two forms in one type with data-prototype name
but i can't have an ergonoy form to my entity entreprise how can i fix the problem
<div class="c col-md-4 col-xs-4">
<div class="form-group">
{{ form_rest(form,{ 'attr': {'class': 'form-control'} })}}
</div>
</div>
</form>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ asset('bundles/GestionCompte/js/bootstrap.min.css') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
// On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
var $container = $('div#gestion_comptebundle_profil_entreprises');
// On ajoute un lien pour ajouter une nouvelle catégorie
var $lienAjout = $('Ajouter un agent entreprise');
$container.append($lienAjout);
// On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
$lienAjout.click(function(e) {
ajouterEntreprise($container);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
var index = $container.find(':input').length;
// On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'un nouvel article par exemple).
if (index == 0) {
ajouterEntreprise($container);
} else {
// Pour chaque entreprise déjà existante, on ajoute un lien de suppression
$container.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire entreprise
function ajouterEntreprise($container) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__" qu'il contient par le numéro du champ
var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Agent n°' + (index+1)).replace(/__name__/g, index));
// On ajoute au prototype un lien pour pouvoir supprimer la catégorie
ajouterLienSuppression($prototype);
// On ajoute le prototype modifié à la fin de la balise <div>
$container.append($prototype);
// Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
index++;
}
// La fonction qui ajoute un lien de suppression d'une catégorie
function ajouterLienSuppression($prototype) {
// Création du lien
$lienSuppression = $('Supprimer');
// Ajout du lien
$prototype.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$prototype.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
<!-- imbriquation du formulaire logistique-->
<script type="text/javascript">
$(document).ready(function() {
// On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
var $container = $('div#gestion_comptebundle_profil_logistiques');
// On ajoute un lien pour ajouter une nouvelle catégorie
var $lienAjout = $('Ajouter un agent logistique');
$container.append($lienAjout);
// On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
$lienAjout.click(function(e) {
ajouterLogistique($container);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
var index = $container.find(':input').length;
// On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'un nouvel article par exemple).
if (index == 0) {
ajouterLogistique($container);
} else {
// Pour chaque entreprise déjà existante, on ajoute un lien de suppression
$container.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire Logistique
function ajouterLogistique($container) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__" qu'il contient par le numéro du champ
var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Agent n°' + (index+1)).replace(/__name__/g, index));
// On ajoute au prototype un lien pour pouvoir supprimer la logistique
ajouterLienSuppression($prototype);
// On ajoute le prototype modifié à la fin de la balise <div>
$container.append($prototype);
// Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
index++;
}
// La fonction qui ajoute un lien de suppression d'une logistique
function ajouterLienSuppression($prototype) {
// Création du lien
$lienSuppression = $('Supprimer');
// Ajout du lien
$prototype.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$prototype.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
</body>
</html>