how to update data from meteor in meteor using template helper which contain iteration

Question

how to update data from meteor in meteor using template helper which contain iteration

586 views Asked by James Yap At 15 June 2015 at 14:10

i just explored the meteor.js and have some experiment.. i want to update data using textbox.. but the textbox is generated from template helper iteration..

so, the scenario is just like we input data first and then retrive it and we can edit our data.. so when we edit

the problem is i cannot get a value from the textbox.. its always "undefined".. here is my html code :

<body>
    <form class="InsertTEST">
        <input type="text" name="att1" placeholder="fill the att1"/>
        <input type="text" name="att2" placeholder="fill the att3"/>
        <input type="submit" value="submit"/>
    </form>
    <table>
        {{#each a}}
            {{> test}}
        {{/each}}
    </table>
</body>

<template name="test">
    <tr class="testRow">
        <td><input type="checkbox" class="toogle-check"></td>
        <td><input type="text" id="att4" value="{{att1}}"/></td>
        <td><input type="text" id="att5" value="{{att2}}"/></td>
        <td><a href="#">{{att3}}</a></td>
        <td><button class="UpdateTEST">Update</button></td>
        <td><button class="DeleteTEST">Remove</button></td>
    </tr>
</template>

and here my js code :

TEST = new Mongo.Collection('TEST');

if (Meteor.isClient) {
    Template.body.helpers({
        a: function() {
            return TEST.find();
        }
    });

    Template.body.events({
        'submit .InsertTEST' : function(event){

            var _att1 = event.target.att1.value;
            var _att3 = new Date();
            var _att2 = Number(event.target.att2.value) + 10;

            Meteor.call('InsertTEST', _att1, _att2, _att3);

            event.target.att1.value = "";
            event.target.att2.value = "";


            return false;
        }


    });

    Template.test.events({

        'click .UpdateTEST' : function(e,t) {
            var _att4 = $('#att4').val();
            alert(_att4);


            /*
            var query = {
                att1 : _att4,
                att2 : _att5
            };
            */
            TEST.update(this._id, {$set:query});
            return false;
        }

    });

}

if (Meteor.isServer) {
    Meteor.methods({
        'InsertTEST' : function(_att1, _att2, _att3) {

            TEST.insert({
                att1:_att1, att2:_att2
            });

        }

    });
}

Original Q&A

There are 2 answers

**Tomas Hromnik** · Answer 1 · 2015-06-15 15:05:43

Do you know why? You have duplicated ids in your HTML. You render input with id att4 and att5 multiple times. ID should be unique in your HTML document. You should replace static IDs with dynamic IDs used inside forEach loop in your test template:

<td><input type="text" id="{{_id}}4" value="{{att1}}"/></td>
<td><input type="text" id="{{_id}}5" value="{{att2}}"/></td>

{{_id}} will insert current document id as an ID for HTML element.

You can then access a value of input with $('#' + this._id + numberOfInput).val() inside your UpdateTest event:

Template.test.events({

    'click .UpdateTEST' : function(e,t) {
        var _att4 = $('#' + this._id + 4).val();
        var _att5 = $('#' + this._id + 5).val();
        alert('_att4 = ' + _att4 + ', _att5 = ' + _att5);
    }

});

**Billybobbonnet** · Answer 2 · 2015-06-15 14:53:02

First, don't name your helper "a", you need to get a proper name. Second, you are not supposed to use a body tag in the meteor. It is generated by the server, and your templates are loaded into it.

Let's say your parent template is called MainTemplate

Your helper could look like that:

Template.MainTemplate.helpers({
    "item":function(){
       return TEST.find();
     }
});

and you just replace your spacebars iteration with this:

    {{#each item}}
        {{> test}}
    {{/each}}

A good practice when you get something undefined is to try to log its parent (console.log(this); in your Template.test.rendered function). It allows you to find the right way to invoke your object (i.e. where it is in your template).

TechQA.

how to update data from meteor in meteor using template helper which contain iteration

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in METEOR

Related Questions in TEXTBOX

Related Questions in UPDATES

Popular Questions

Popular Tags

Trending Questions