0

I am following the meteor tutorial, and along with adding a form to add a task, I made a form to delete a task by its text value as well.

  Template.body.events({
    "submit .new-task": function (event) {
      // Prevent default browser form submit
      event.preventDefault();
      // Get value from form element
      var text = event.target.text.value;
      // Insert a task into the collection
      Tasks.insert({
        text: text,
        createdAt: new Date() // current time
      });
      // Clear form
      event.target.text.value = "";
    },
    "submit .delete-task": function (event) {
      // Prevent default browser form submit
      event.preventDefault();
      // Get value from form element
      var text = event.target.text.value;
      // Insert a task into the collection
      Tasks.remove({
        text: text,
      });
      // Clear form
      event.target.text.value = "";
    }
  });
}

The new-task form works fine, but the delete-task form doesn't work. I tried a similar query using shell (meteor mongo) and it worked. What error do I have here?

EDIT: Here's the html as well:

<head>
  <title>Todo List</title>
</head>
<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
        <form class="new-task">
        <h2> Add a task </h2>
          <input type="text" name="text" placeholder="Type to add new tasks" />
        </form>
        <form class="delete-task">
        <h2> Delete a task </h2>
          <input type="text" name="text" placeholder="Type to delete tasks" />
        </form>
    </header>
    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>
<template name="task">
  <li class="{{#if checked}}checked{{/if}}">
    <button class="delete">&times;</button>
    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
    <span class="text">{{text}}</span>
  </li>
</template>
goelakash
  • 2,502
  • 4
  • 40
  • 56

1 Answers1

1
Uncaught Error: Not permitted. Untrusted code may only remove documents by ID. [403]

This shows up in the browser's javascript console when you try to run the deletion by text as you've described in your code / problem statement. This was a design decision by the Meteor team in 0.5.8 and is discussed in this previous question.

You can have this functionality if you create a server side method. Otherwise your client side code will have to delete by ID. Something like this:

Change your Tasks.remove({text: text}) call to Meteor.call('removeTaskByText', text) on the client code, and on the server side define:

Meteor.methods({
  'removeTaskByText': function(text){
    Tasks.remove({text: text});
  }
});
Community
  • 1
  • 1
Greg Syme
  • 392
  • 3
  • 8