CODEWITHSUNDEEP
javascriptmeteormongodb-query
TA3
TA3

Reputation: 402

MeteorJS insert function isn't working

I'm new to meteor and trying to make a simple blog application. But my insert function doesn't seem to be working properly. Here's my code.

This is my template

<template name="addpost">
  <div class="container">
    <h1> Add New Post</h1>
    <form class="new-post">
      <label class="title">
        Title:
        <input type="text" name="title" placeholder="Type to add new tasks" />
      </label>
      <label class="post-content">
        Write here:
        <input type="text" name="body" placeholder="Type to add new tasks" />
        <button class="add-post">Add Post</button>
      </label>

    </form>
  </div>
</template>

JS file content

Posts = new Meteor.Collection("posts");

if (Meteor.isClient) {

  Template.addpost.events({
    "submit .new-post": function(event){

      var title = event.target.title.value;
      var body = event.target.body.value;

      Meteor.call("addPost", title, body);
    }
  });
}


Meteor.methods({
  addPost: function(title, body){
    Posts.insert({
      title: title,
      body: body,
      createdAt : new Date()
    });
  }
});

I have not removed autopublish and insecure packages. And below is the mongoDB query output.

enter image description here

Upvotes: 1

Views: 39

Answers (1)

David Weldon
David Weldon

Reputation: 64312

By default, when you submit a form it makes another HTTP request which will reload the page and halt whatever meteor was doing. To avoid this, you need to prevent the default action:

Template.addpost.events({
  submit: function(event) {
    event.preventDefault();
    // the rest of your code goes here
  }
});

Aside from that, your code worked correctly for me. You can verify it with: Posts.find().fetch() in either the web console or via meteor shell.

Upvotes: 2

Related Questions