Double click to edit element in Meteor app Double click to edit element in Meteor app mongodb mongodb

Double click to edit element in Meteor app


I think this can help you.

Lets create this helper.

Template.example.helpers({   'editValue' : function(){    return Session.get("TargetValue" + this._id);  }})

And this 2 events.

 Template.example.events({      'dbclick #spanIdOnDom' : function(e,t){      return Session.set("TargetValue" + t.data._id,true)//hide the span and we set the input      },   'click #buttonToSaveNewValue': function(e, t) {      //here you can take the emailId and the name based on this._id like this Collection.find({_id:this._id}).fetch(); and do the updates you want to do     var newValueFromInput = document.getElementById('newValueFromInput').value;       var idCurrentDocument = this._id;       var Bebida = Collection.findOne(t.data._id);       Collection.update({_id: idCurrentDocument}, {$set:{fieldToUpdate:   newValueFromInput}});       return Session.set("TargetValue" + t.data._id,false); //we hide the input and we put the span again      }    })

HTML

 <template name="example">    {{#each collectionFind}}        {{#if editValue}}            <input type="text" id="newValueFromInput"  value="{{currentValue}} " />            <button class="btn btn-sm btn-primary" id="buttonToSaveNewValue" type="submit">Save new Value</button>          {{else}}               <td>            <p>              <span class="content col-md-10" id="spanIdOnDom" ><h4>Descripcion Bebida:</h4><br>{{currentValue}} </span>            </p>              </td>             {{/if}}     {{/each}}  </template>

Of course you need to set your Allow/deny Permission and publish/subscribe methods to make it work more efficient.

How it works?

in resume you have an <span> tag with the current value, when you dobleClick on the <span> tag , we set the Session to true, the <span> tag go away and a new <input> appears with a new button then we take the value from the <input> and she update ($set) into the collection, and its done.

NOTE: this is a mini-repo from Simple Crud app in Meteor from Raj Anand, but the code on the blogs is on coffee and i don't use coffee Script.