MEAN with Jade template form submit GET instead of POST

Question

So, earlier today I had a working form that could post and delete restaurants documents to a mongodb collection. Everything was working fine, but then I decided to try and load the form into a div instead of redirect to a new page. Doing so produced a different result when I tried to submit my restaurant form. Originally it would call $scope.add() in my restaurantsController, but now it is sending a GET request with form data to /restaurants instead of a POST to /api/restaurants. I'm looking for some insight as to what I did to change the behavior. Although it is loading the form when I click on my restaurant anchor tag, it is not loading the restaurants from the database.

Here is the jade and js for the menu anchors:

menu.js

app.controller("menu", ["$scope", "$http", function ($scope, $http) {
    $scope.home = function () {
      $("#content").html("");
    };
    $scope.restaurants = function () {
      $http.get('/restaurants').
        success(function(data, status, headers, config){
          $("#main_content").html(data);
      }).
        error(function(data, status, headers, config){

      });
    };
}]);

nav.jade

mixin link(name, fn)
  li
    a.btn(ng-click=fn)= name

nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation')
  .container
     .navbar-header
      button.navbar-toggle.collapsed(type='button', data-    toggle='collapse', data-target='#navbar', aria-expanded='false', aria-    controls='navbar')
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand(href='/') Food App
    #navbar.navbar-collapse.collapse
      ul.nav.navbar-nav(ng-controller="menu")
        +link("Home", "home()")
        +link("Restaurants", "restaurants()")

And here is the form:

form(name="NewRestaurant" ng-submit="$event.preventDefault();add()")     
    .row
      .form-group
        input.form-control(type="text", name="name" placeholder="Name", ng-model="name" required)
    .row
      .form-group
        input.form-control(type="text", name="address" placeholder="Address", ng-model="address" required)
    .row
      .form-group.col-md-6
        -for(var i = 0; i <= 5; i++){
          input(name="rating" type="radio", value=i, ng-model="rating" required)
        =i
        -}
      .form-group.col-md-6
        button.success(type="submit") Submit

and the controller...

app.controller("restaurants", ["$scope", "$resource", function ($scope, $resource) {
    var Restaurant = $resource('/api/restaurants/:id');

    var clearForm = function () {
      $scope.name = '';
      $scope.address = '';
      $scope.rating = null;
    }
    clearForm();

    var validRestaurant = function () {
      if($scope.name !== '' && $scope.address !== '' && $scope.rating !== null)
        return true;
      else{
        toastr.error("Please fill in all required form fields.");
        return false;
      }
    }

    $scope.query = function(){
      Restaurant.query(function (results) {
        $scope.restaurants = results;
      });
    };

    $scope.add = function () {
      alert("got here!");
      if(validRestaurant()){
        var restaurant = new Restaurant();
        restaurant.name = $scope.name;
        restaurant.address = $scope.address;
        restaurant.rating = $scope.rating;
        alert(restaurant);
        Restaurant.save(restaurant, function (result) {
          $scope.restaurants.push(result);
          toastr.success("Saved " + $scope.name + ".")
          clearForm();
        });
      }
    };

    $scope.update = function (id) {

    };

    $scope.remove = function (id) {
        console.log(id);
        Restaurant.delete({id: id}, function (err) {
            console.log(err);
            $scope.query();
        });
    };
    $scope.query();
}]);

edit: Now that I am typing this up, I am wondering, maybe angular doesn't recognize the form and doesn't create a $scope for it because it gets loaded after the page loads...?

MEAN with Jade template form submit GET instead of POST

0 Answers0