Getting values from each row in Meteor js

help
1

There is a table wrapped by a template. What I want to do is getting values from specified fields of this table together with the values in a form. And there is a button in each row to pass the values. But when I tried to print them out in console, it said it is undefined. So anyone has a solution to this or a better way to do it, I would really appreciate it.

So far I have tried to use serializeArray() . However, it seemed like it can’t get the values from <td> element.

<template name="student">
    {{#each student}}
    <tr>
      <td>{{name}}</td>
      <td>{{studentID}}</td>
      <td><textarea rows="1"></textarea></td>
      <td><input type="submit" class="btn btn-primary markAttendance"></td>
    </tr>
    {{/each}}
</template>

<template name="subject">
    <select id="dropdown" name="dropdown" class="form-control">
    <option>Please select a subject</option>
    {{#each subject}}
    <option>{{subjectCode}}</option>
    {{/each}}
    </select>
</template>

Event handler:

Template.content.events({
   'click .markAttendance':function(e){
     e.preventDefault();
     var subjectCode = $(e.target).find('[name=dropdown]').val();
     var week = $(e.target).find('[name=week]').val();
     var studentName = $(e.target).find('td:eq(0)').text();
     var studentID = $(e.target).find('td:eq(1)').text();
     console.log(subjectCode);
     console.log(week);
     console.log(studentName);
     console.log(studentID);
     //.....
   }
 });
3

It looks like in your event handler, you are using e.target as the scope for jquery to search in.
When the handler runs, e.target should be the mark attendence checkbox.
By using find on that jquery object, you are asking if td is inside that input, which makes no sense.

You want to scope it to the template, which you can do with the helpers on the template instance:

Template.content.events({
   'click .markAttendance':function(e, inst){
     e.preventDefault();
     var subjectCode = inst.$('[name=dropdown]').val();
     var week = inst.$('[name=week]').val();
     var studentName = inst.$('td:eq(0)').text();
     var studentID = inst.$('td:eq(1)').text();
     console.log(subjectCode);
     console.log(week);
     console.log(studentName);
     console.log(studentID);
     //.....
   }
 });

Since you didn’t post any code showing the content template, you may need to adjust to make sure the query is scoped to the right template. I’m pretty sure it will search nested templates

4

Thank you! I have one more question. If I want to pass the value of textarea (name=“remarks”) in that template, what’s the correct way to do it. For now, I only can get the values of the first row no matter what I input in second row.
Statement: var remark = inst.$('[name=remarks]').val();

5

what do you mean by “pass the value”?
Do you mean reading the content into your event handler?

6

Yes, exactly. Reading the content of each textarea into event handler. So far I only can read the first row.

7

Is that because the textarea only allows one row?

      <td><textarea rows="1"></textarea></td>

EDIT: oh I see, you mean rows of the table. Again, you need to make sure you’re searching for the right thing in the right scope.
Here, the whole table is in the same template, so scope doesn’t save you,
What I would do is add the studentID to an attribute and use that as part of the search, so each textarea has a unique identifier.

I would show you an example, but really I don’t have enough information about what the process is to do so

8

Is it like this?
<td><textarea rows="2" id="remarks" name="remarks" data-studentid="{{studentID}}"></textarea></td>
And in event handler
var remark = inst.$('[data-id='+ studentID +']').val();

EDIT: Thanks for the inspiration! I figured it out.