Using jQuery with meteor giving errors

Question

Omitting the keydown input : function(event) { and } gives me an error along the lines of "While building the application: client/client.js:33:11: Unexpected token (" which is basically the starting. I'm wondering why I need the javascript function right at the start. To not get the error. This is an issue especially because I don't want the click function to run every time the key is pressed. In any case it would be great to either figure out how I can just use jQuery instead of javascript here or change the keydown input.

Template.create_poll.events = {

  'keydown input' : function(event) {

    $("input").keypress(function() {
      var active_element = $(this).parent().attr("id");
      var last_child = $('ul li:last').attr("id");
      var option_number_index = last_child.lastIndexOf("-");
      var option_number = last_child.substring(option_number_index+1);
      option_number = option_number/1;

        //console.log(option_number);

        //console.log(last_child);
      if (last_child == active_element) {
        console.log(active_element);
        option_number += 1;
        console.log(option_number);
        $('ul').append('<li id="poll-choice-' +  option_number + '"><input name="choice" type="text" placeholder="Option ' + option_number + '">');
      }
    }); 


    $("#poll_create").click(function() {
      console.log("Button works");
      var choices = new Array();
      var counter = 0;
      $("ul li input").each(function() {
        choices[counter] = $(this).val();
        counter++;
      });

      console.log(choices[1]);
      console.log(choices[5]);

    });

  }



}

You're trying to mix jQuery event code and Meteor event code. When using Meteor as intended, you should find yourself using very little jQuery code, because Meteor is handling the low-level jQuery behind the scenes. You should just implement your events as "keyup input" and "click #poll_create" — sbking
– sbking, Commented Feb 19, 2014 at 11:39
Can I still use jQuery syntax like $(this).parent().attr("id"); ? — Maaz
– Maaz, Commented Feb 20, 2014 at 1:52
The meteor equivalent would be event.currentTarget.parentNode.id. Note that this is using default DOM code. I think the new Meteor templating engine that is about to be released uses jQuery, so it might change to be more like what you're doing. I highly recommend reading the Meteor Documentation from top to bottom. It explains a lot of these things. You should find yourself barely needing any jQuery syntax at all once you understand how Meteor works. Meteor does the jQuery stuff for you. — sbking
– sbking, Commented Feb 20, 2014 at 6:44

musically_ut · Accepted Answer · 2014-02-19 12:48:02Z

1

Template.create_poll.events expects an eventMap which is:

An event map is an object where the properties specify a set of events to handle, and the values are the handlers for those events. The property can be in one of several forms:

Hence, you need to pass in the 'keydown input' : function (event, templ) { ... } to make it a valid Javascript object.

In this case, you should follow @Cuberto's advice and implement the events using Meteor's event map:

Template.create_poll.events = {

  'press input' : function(event) { 
      var active_element = $(this).parent().attr("id");
      var last_child = $('ul li:last').attr("id");
      var option_number_index = last_child.lastIndexOf("-");
      var option_number = last_child.substring(option_number_index+1);
      option_number = option_number/1;

        //console.log(option_number);

        //console.log(last_child);
      if (last_child == active_element) {
        console.log(active_element);
        option_number += 1;
        console.log(option_number);
        $('ul').append('<li id="poll-choice-' +  option_number + '"><input name="choice" type="text" placeholder="Option ' + option_number + '">');
      }
  },
  'click #poll_create' : function (event) {
      console.log("Button works");
      var choices = new Array();
      var counter = 0;
      $("ul li input").each(function() {
        choices[counter] = $(this).val();
        counter++;
      });

      console.log(choices[1]);
      console.log(choices[5]);

    }
}

However, if you want to use certain jQuery specific events, then you can attach them in the rendered function:

Template.create_poll.rendered = function () {
     $("input").keypress(function() {
      var active_element = $(this).parent().attr("id");
      var last_child = $('ul li:last').attr("id");
      var option_number_index = last_child.lastIndexOf("-");
      var option_number = last_child.substring(option_number_index+1);
      option_number = option_number/1;

        //console.log(option_number);

        //console.log(last_child);
      if (last_child == active_element) {
        console.log(active_element);
        option_number += 1;
        console.log(option_number);
        $('ul').append('<li id="poll-choice-' +  option_number + '"><input name="choice" type="text" placeholder="Option ' + option_number + '">');
      }
    }); 


    $("#poll_create").click(function() {
      console.log("Button works");
      var choices = new Array();
      var counter = 0;
      $("ul li input").each(function() {
        choices[counter] = $(this).val();
        counter++;
      });

      console.log(choices[1]);
      console.log(choices[5]);

    });
};

answered Feb 19, 2014 at 12:48

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maaz Over a year ago

With this approach it means I cannot use any jQuery syntax including stuff like $(this).val(), how can I go about fixing that? On aanother note, what's the difference between rendered and event speed wise and generally the more accepted way to handle events like this.

sbking Over a year ago

Meteor event handler functions get two arguments: event and template. The template argument is a template instance object, which as a find(selector) method that works similarly to $(selector) but is scoped to the template itself and returns a regular DOM HTMLElement object. So you can do template.find("input").value

Collectives™ on Stack Overflow

Using jQuery with meteor giving errors

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related