CODEWITHSUNDEEP
javascriptmongodbmeteor
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10227

Why is this not inserting a document into my MongoDB collection?

I've got this code to try to insert a document (record) into a MongoDB collection (table):

TimeAndSpace = new Mongo.Collection('timeAndSpace');

if (Meteor.isClient) {
    Template.addTimeSpaceForm.events({
        'submit form': function() {
            event.PreventDefault();
            var city = "Fort Bragg";
            var state = "California";
            var yearin = 1958;
            var yearout = 1959;
            // var city = event.target.city.value;
            // var state = event.target.state.value;
            // var yearin = event.target.yearin.value;
            // var yearout = event.target.yearout.value;
            Meteor.call('insertLocationData', city, state, yearin, yearout);
        }
    });

}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Meteor.methods({
    'insertLocationData': function(city, state, yearin, yearout) {
        console.log('attempting to insert a record');
        TimeAndSpace.insert({
            ts_city: city,
            ts_state: state,
            ts_yearin: yearin,
            ts_yearout: yearout
        });
    }
});

It doesn't work. Entering the following in the Chrome Dev Tools (F12) console:

TimeAndSpace.find().fetch()

...returns "[]" - obviously indicating the collection has no documents.

The only thing the console shows me after hitting the "Add Place Lived" submit button is:

XHR finished loading: GET "http://localhost:3000/sockjs/info?cb=jmghsx3ec6".

In case you want/need to know, here is the HTML:

<head>
  <title>timeandspace</title>
</head>

<body>
  <h1>A List of the Places I Have Lived</h1>
  {{> addTimeSpaceForm}}
</body>

<template name="addTimeSpaceForm">
<form>
    <label for="city">City</label>
    <input type="text" name="city" id="city">
    <br/>
    <label for="state">State</label>
    <input type="text" name="state" id="state">
    <br/>
    <label for="yearin">Year Arrived</label>
    <input type="text" name="yearin" id="yearin">
    <br/>
    <label for="yearout">Year Departed</label>
    <input type="text" name="yearout" id="yearout">
    <br/>
    <input type="submit" name="insertdocument" id="insertdocument" value="Add Place Lived">
</form>
</template>

What am I missing or missing fire on?

Upvotes: 0

Views: 503

Answers (1)

Sceptic
Sceptic

Reputation: 1659

Because you make some small typo and missing mistakes. For instance you are missing event in your function. And then you try PreventDefault instead of the correct preventDefault. Also Methods should be placed on server side only. I also took the liberty to make it functional with your form already. Here is the code and a link to a functional meteor pad.

TimeAndSpace = new Mongo.Collection('timeAndSpace');

if (Meteor.isClient){
    Template.addTimeSpaceForm.events({
        'submit form': function(event){
            event.preventDefault();
            var city = event.target.city.value;
            var state = event.target.state.value;
            var yearin = event.target.yearin.value;
            var yearout = event.target.yearout.value;

            Meteor.call('insertLocationData', city, state, yearin, yearout);
            console.log(TimeAndSpace.find().fetch());
        }
    });
}

if (Meteor.isServer){
  Meteor.methods({
      'insertLocationData': function(city, state, yearin, yearout){
          console.log('attempting to insert a record');
          TimeAndSpace.insert({
              ts_city: city,
              ts_state: state,
              ts_yearin: yearin,
              ts_yearout: yearout
          });

          console.log(TimeAndSpace.find().fetch());
      }
  });
}

http://meteorpad.com/pad/qgEmW5hv8N4yCaH6s/Why%20is%20this%20not%20inserting%20a%20document%20into%20my%20MongoDB%20collection?

Upvotes: 2

Related Questions