CODEWITHSUNDEEP
jquerymeteor
JDRussia
JDRussia

Reputation: 65

Strange JQuery behaviour in Meteor application

I have a strange problem with my meteor application - I have two methods in .js file that suppose to insert a data into DB, here they are: 

// add new hobby
Template.new_hobby.events({
  'submit form': function(event){
      event.preventDefault();
      var id = $('[name=id]').val();
      var title = $('[name=title]').val();
      var body = $('[name=body]').val();
      var image = $('[name=imagepath]').val();
      console.log("client has id: "+id);
      Meteor.call('new_hobby', id, title, body, image, function (error) {
          if (error)
              console.log(error.reason);
          else {
              $('[name=id]').val('');
              $('[name=title]').val('');
              $('[name=body]').val('');
              $('[name=imagepath]').val('');
          }
      });         
  }
});     

// add new fact
Template.new_fact.events({
  'submit form': function(event){
      event.preventDefault();
      var id = $('[name=id]').val();
      var title = $('[name=title]').val();
      var body = $('[name=body]').val();
      var image = $('[name=imagepath]').val();
      console.log("client has id: "+id);
      Meteor.call('new_fact', id, title, body, image, function (error) {
          if (error)
              console.log(error.reason);
          else {
              $('[name=id]').val('');
              $('[name=title]').val('');
              $('[name=body]').val('');
              $('[name=imagepath]').val('');
          }
      });
  }
});

The problem is following - the function within Template.new_hobby.events doesn't read values of input fields, whether the same function in Template.new_fact.events does. They have absolutely same html templates:

<template name="new_hobby">
  <form>
    <p class="lead">New Hobby!</p>
    <p>Id: <input type="text" name="id" required></p>
    <p>Title: <input type="text" name="title" required></p>
    <p>Body: <input type="text" name="body" required></p>
    <p>Image path: <input type="text" name="imagepath" required></p>
    <p><input type="submit" value="Submit Hobby"></p>
  </form>
</template> 

<template name="new_fact">
  <form>
    <p class="lead">New Fact!</p>
    <p>Id: <input type="text" name="id" required></p>
    <p>Title: <input type="text" name="title" required></p>
    <p>Body: <input type="text" name="body" required></p>
    <p>Image path: <input type="text" name="imagepath" required></p>
    <p><input type="submit" value="Submit Fact"></p>
  </form>
</template>

However I cannot figure out what the problem is. The issue appeared after i made Meteor methods to insert data into DB. But since one of the functions does work, I assume problem somewhere else. I would appreciate any help!! Thanks in advance and Merry Xmas everyone!

PS: I have another unanswered question here: Dynamic Meteor Templates so if you don't feel like you can help me on this one, have a look at that question!

Upvotes: 0

Views: 41

Answers (1)

pawel
pawel

Reputation: 26

You can take values with: event.target.title.value event.target.body.value etc. No need to use jQuery.

Upvotes: 1

Related Questions