Post request with AngularJS

Question

I have following html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SPA book_store</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $http.get("http://localhost:8080/book_store/rest/books_json/get")
                    .then(function (response) {
                        $scope.books = response.data;
                    });
            $(document).ready(function () {
                $('#call').click(function () {
                    $.ajax({
                        type: "post",
                        url: "http://localhost:8080/book_store/rest/books_json",
                        data: $('#buyBookForm').serialize(),
                        success: function (response) {
                            $scope.books = response.data;
                        }
                    });
                });
            });
        });

    </script>
</head>
<body>


<div class="container" ng-app="myApp" ng-controller="myCtrl">
    <h1>Book Store</h1>
    <p>Choice any book you like:</p>

    <form id="buyBookForm" method="post">
        <table id="table" class="table">
            <thead>
            <tr>
                <th>Book Name</th>
                <th>Author</th>
                <th>Genre</th>
                <th>Price</th>
                <th>Sold</th>
                <th>Bought By</th>
            </tr>
            </thead>
            <tbody>

            <input id="filter_input" type="text" ng-model="nameText"/>
            <ul>
                <tr ng-repeat="book in books | filter:nameText | orderBy:'name'">
                        <td>
                            <input type="checkbox" name="book{{book.name}}"
                                   value="{{book.book_id}}"> <label>{{book.name}}</label>
                        </td>
                        <td>{{book.author.name}}</td>
                        <td>{{book.genre}}</td>
                        <td>{{book.price}}</td>
                        <td>{{book.bought}}</td>
                        <td>{{book.buyCount}}</td>
                </tr>
            </ul>
            </tbody>
        </table>

    </form>
    <input type="submit" name="submit" value="Purchase" id="call">
</div>

</body>
</html>

It works fine but when I call "Purchase" it doesn't reload book model. S o I have to call browser refresh to see changes.

Question: How can I make my model autoupdate values after click "Purchase"?

use $http which is angular aware instead of $.ajax which is not. — Claies
– Claies, Commented Aug 4, 2016 at 14:38
also, use ng-click instead of binding jQuery style click event handlers whenever possible. — Claies
– Claies, Commented Aug 4, 2016 at 14:40
If you're using Angular, stop using jQuery. Don't even load the library, so you're forced to figure out how to do it "the Angular way." Trust me: once you learn, it's much easier. When you use jQuery, it doesn't update the model, and you end up with an endless supply of $timeouts and $scope.$apply()s — Chris Stanley
– Chris Stanley, Commented Aug 4, 2016 at 15:03

tpsilva · Accepted Answer · 2016-08-04 14:46:38Z

2

That happens because you are using jQuery instead of angular.

Change your script to

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {


   $http.get("http://localhost:8080/book_store/rest/books_json/get")
       .then(function (response) {
           $scope.books = response.data;
    });

   $scope.post = function(){
      $http.post("http://localhost:8080/book_store/rest/books_json", $('#buyBookForm').serialize())
       .then(function (response) {
           $scope.books = response.data;
       });
   }


});
</script>

I'm defining a scope function called post, that makes the $http call to your server.

Then, call post with ng-click. Change the button to

<input type="submit" ng-click="post()" name="submit" value="Purchase" id="call">

EDIT

I've made some changes, since its a different call. I would also recommend adding ng-models to the buyBookForm, so you could remove jQuery.

edited Aug 4, 2016 at 14:46

answered Aug 4, 2016 at 14:40

tpsilva

1,4631 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Claies Over a year ago

the original button in this code wasn't a "refresh" function, it was a separate HTTP Post method.

Rudziankoŭ · Accepted Answer · 2016-08-05 13:23:39Z

0

Use ng-model directive to make angular know about selected books.

 <input ng-model="book.isSelected"

Then send the data in the following way:

$scope.post = function(){
                var requestBody = $scope.books.filter(function(book) {
                    return book.isSelected;
                });
                requestBody.forEach(function (book) {
                    book.isSelected = undefined;
                });
                $http.post("http://localhost:8080/book_store/rest/books_json",  requestBody)
                        .then(function (response) {
                            $scope.books = response.data;
                        });
            }

answered Aug 5, 2016 at 13:23

Rudziankoŭ

11.3k27 gold badges114 silver badges217 bronze badges

Collectives™ on Stack Overflow

Post request with AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related