CODEWITHSUNDEEP
javascriptmeteor
Julien Leray
Julien Leray

Reputation: 1687

Best way for retrieve custom data attribute from event in Meteor?

I was wondering what is the best way for retrieve the value of a custom data HTML attribute with Meteor from event object?

eg:

articles.html

   <template name="createArticle">
    <form class="new-article">
        <input type="text" name="title" placeholder="New title"/>
        <input type="text" name="content" placeholder="New content" />
        <!-- list categ -->
      <label>Category
        <select id="categ-list" name="categ">
          {{#each categories}}
            <option value="{{name}}" data-id={{_id}}>{{name}}</option>
          {{/each}}
        </select>
      </label>
        <input type ="submit" value= "Create" class="button">
    </form>
</template>

articles.js

   Template.createArticle.events({
  "submit .new-article": function(event){
    var title = event.target.title.value;
    var content = event.target.content.value;
    var categName = event.target.categ.value;
    var categId = event.target.categ.data('id'); // HERE
    console.log("test " + categId);
    Meteor.call("addArticle", title, content, categId, categName);
    event.target.title.value = "";
    event.target.content.value = "";
    return false;
    },
    "click #categ-list": function(event){
console.log('click');
    }
  });

How can I get the data-id attribute value in the event handler?

EDIT: Add more code

EDIT2:

console.log(event.target.categ)

output:

<select id="categ-list" name="categ"> 
<option value="test" data-id="p5zKaEbEiRkQjCkGg">test</option> 
<option value="test1" data-id="okPY6oyeXiFR7M3jd">test1</option> 
</select>

Upvotes: 18

Views: 53401

Answers (3)

Daniel Budick
Daniel Budick

Reputation: 1850

First of all: If you want to get the selected element in meteor, you do not need jQuery. Just take the change event and get the data with JavaScript:

Template.show.events({
    'change #options': function (event) {
        var currentTarget = event.currentTarget;
        console.log('Selected Value: ' + currentTarget.options[currentTarget.selectedIndex].value);
        console.log('Selected data: ' + currentTarget.options[currentTarget.selectedIndex].dataset.id);
    }
});

Secondly: To get the data of the element you should always use event.currentTarget.dataset.

By using event.target.dataset you will get the wrong dataset in some cases.

E.g.:

<template name="show">
  <div class="target" data-id="1">
    <h1>Category with id 1</h1>
    <div class="anotherTarget" data-id="15">
      Object with id 15
    </div>
  </div>
</template>

if (Meteor.isClient) {
  Template.show.events({
    'click .target': function (event) {
      var currentTarget = event.currentTarget.dataset;
      var target = event.target.dataset;
      console.log(`CurrentTarget: $(currentTarget.id)`);
      console.log(`Target: $(target.id)`);
    }
  });
}

event.target gives you the element, you clicked on. In some cases this can be a child of the element you set the handler on.

event.currentTarget returns always the element you set the handler on.

Here is the example: http://currenttarget.meteor.com/

Upvotes: 4

chrisarton
chrisarton

Reputation: 4441

Looks like you are trying to get the data-id of the currently selected option, try this if you are using jquery:

var categId = $(event.target.categ).find(':selected').data("id");

Upvotes: 2

Ram
Ram

Reputation: 144659

DOM elements (HTMLElement objects) don't have .data() method. .data() method belongs to jQuery objects. If you are using jQuery you should wrap the element with jQuery constructor then use the .data method:

$(event.target.categ).data('id');

Another option is using .dataset property 1:

event.target.categ.dataset.id;

Or .getAttribute() method:

event.target.categ.getAttribute('data-id');

update:

You should also select the selected option before using dataset property.

var sel = event.target.categ;
var categId = sel.options[sel.selectedIndex].getAttribute('data-id');

1. IE10 and below partially support the property. Android 2.3 cannot read data-* properties from select elements.

Upvotes: 50

Related Questions