I am in the process of working through a tutorial on Angular JS in which we build a shopping cart app.
Adding items to the shopping cart is done through the click of a button. That works fine. However, once I go to view the shopping cart and checkout, I want to have a "spinner" on the quantity so I can increase/decrease the quantity.
I am stuck working with IE 11 and, while it may support the HTML 5 input type "number", it does not augment the control as a spinner (As seen in this SO question)
Therefore I am attempting to add a jQuery UI spinner to my partial view.
Here is my main view
<!DOCTYPE html>
<html ng-app="sportsStore">
<head>
<title>SportsStore</title>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="../Scripts/jquery-1.6.4.js"></script>
<script src="../Scripts/jquery-ui-1.11.4.js"></script>
<link href="/Content/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="Content/Styles/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="Content/Styles/bootstrap/bootstrap-theme.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<script src="js/ngSportStore.js"></script>
<script src="routes/sportsStoreRoutes.js"></script>
<script src="controllers/sportsStore.js"></script>
<script src="filters/customFilters.js"></script>
<script src="controllers/productListControllers.js"></script>
<script src="components/cart/cart.js"></script>
<script src="controllers/statesController.js"></script>
<script src="controllers/checkoutController.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">SPORTS STORE</a>
<cart-summary></cart-summary>
</div>
<div class="alert alert-danger" ng-show="data.error">
Error ({{data.error.status}}). The product data was not loaded.
<a href="/app.html" class="alert-link">Click here to try again</a>
</div>
<ng-view></ng-view>
</body>
</html>
and here is my partial view for my cart:
<script>
$(function () {
$("#spinner").spinner({
min: 0
});
});
</script>
<h2>Your cart:</h2>
<div ng-controller="cartSummaryController">
<div class="alert alert-warning" ng-show="cartData.length === 0">
There are no products in your cart.
<a href="#/products" class="alert-link">Click here to continue shopping</a>
</div>
<div ng-hide="cartData.length === 0">
<table class="table">
<thead>
<tr>
<th>Quantity</th>
<th>Item</th>
<th class="text-right">Price</th>
<th class="text-right">Subtotal</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cartData">
<td class="text-center"><input id="spinner" class="pull-left" value="{{item.count}}"></td>
<td class="text-left">{{item.name}}</td>
<td class="text-right">{{item.price | currency}}</td>
<td class="text-right">{{(item.price * item.count) | currency}}</td>
<td>
<button ng-click="remove(item.id)" class="btn btn-sm btn-warning">Remove</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right">Total:</td>
<td class="text-right">{{total() | currency}}</td>
</tr>
</tfoot>
</table>
<div class="text-center">
<a class="btn btn-primary" href="#/products">Continue shopping</a>
<a class="btn btn-primary" href="#/placeorder">Place Order</a>
</div>
</div>
</div>
In the partial view, the textbox for quantity is displayed and populated with the value from the model, but the icons for the spinner are not displayed.
I put together this jsFiddle in which everything works as desired. But I just can't seem to get this to work in my app.
What am I doing wrong?
Thank you
EDIT
I have tried the following suggestions: Add Font-awesome, include and use the latest version of JQuery. Neither have worked. I've tried moving where I load JQuery to the partial view. When I do that and, monitoring IE F12 network, I do not see the libraries being downloaded from the CDN.
In addition, I added an alert to the document.ready function and it is not being fired.
Any other suggestions would be welcomed.
