CODEWITHSUNDEEP
javascriptjquerymeteor
Maaz
Maaz

Reputation: 4303

Using jQuery with meteor giving errors

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]);

    });

  }



}

Upvotes: 1

Views: 556

Answers (1)

musically_ut
musically_ut

Reputation: 34288

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]);

    });
};

Upvotes: 1

Related Questions