sailu sailu - 3 months ago 8
CSS Question

How to show a form on click of a dynamically generated each block in meteor?

How can I show a form on click of a dynamically generated button on each block of the code in meteor?

<div id="wCard">

{{#each workflow}}
<div class="pheader">
<h2>{{project}}</h2>
<hr width="90%">
</div>
<br>
<div class="workflowcard">
<div class="module-card">
<div>
<div class="card-header wfmodule">{{workflowTitle}}</div>
<div class="assigned-tag">Assigned To:</div>
<div class="assigned-to">{{team}}<hr></div>
<div class="actions">No Actions Created</div>
</div>
<div>
due date
</div>
</div>
<div class="actionBtn"><button class="btn-wf stage-blue-wf button-x-small-wf" id="newAction">New Action</button></div>

</div>
{{/each}}

</div>


This the card dynamically generating when I submit a form. In this card I have a new action button, when I click on new action button of dynamically generated card it should display another form.

Answer

Use Template helpers and jquery for this.

Example code: main.html

<template name="test">
     <div id="form1" class="hidden">
        Form Stuff
     </div>

     <button id="click_button">Click to Show form</button>

In javascript file- main.js

Template.test.events({
   "click #click_button" : function() {
         $( "#form1" ).removeClass( "hidden");
}

The class="hidden" will work when you have bootstrap package (twbs:bootstrap) added.

Comments