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.
Click here to try again
</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.
Click here to continue shopping
</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.
Related
I am trying to pass multiple data from an input table (with row addable option) in the backend for saving them in my database. Here I try to use Django and MongoDB.
My frontend's JS & HTML code is:
let i = 1;
function rowTemplate(i) {
return `<tr data-index=${i}>
<td>${i}</td>
<td><input type="text" name="name-${i}"></td>
<td><input type="text" name="roll-${i}"></td>
<td><input type="email" name="email-${i}"></td>
<td><input type="text" name="password-${i}"></td>
<td><input type="text" name="address-${i}"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;" onclick="removeRow(${i})"></i></td>
</tr>`
}
for (i = 1; i <= 4; i ++) {
$('.my_dynamic_table').append(rowTemplate(i));
}
function removeRow(i) {
$(".my_dynamic_table").find(`tr[data-index='${i}']`).remove();
}
function addRow() {
$('.my_dynamic_table').append(rowTemplate(i));
i++;
}
<body>
<div class="container my-5">
<h2>Welcome to dynamic input table with row adding option</h2>
<form class="" method="POST">
{% csrf_token %}
<table class="table table-hover my-5">
<thead class="">
<tr>
<th>No</th>
<th>Name</th>
<th>Roll</th>
<th>Email</th>
<th>Password</th>
<th>Address</th>
<th>Remove?</th>
</tr>
</thead>
<tbody class="my_dynamic_table">
</tbody>
</table>
<div class="row m-0">
<button class="btn btn-warning" onclick="addRow()">Add row</button>
<button type="Submit" class="btn btn-primary ml-auto">Submit</button>
</div>
</form>
</div>
</body>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- animated css link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
<!-- font awsome css link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- custom css link -->
<link rel="stylesheet" type="text/css" href="#">
</head>
Now how can I write my views.py in Django to receive all the data for saving them in the database? You may also check my project file: link. I am trying to avoid ajax or other kinds of complex stuff. It will be very helpful for me if it can be done in a simple approach like the following:
def row_addable_table_view(request):
if request.method == 'POST':
this_name = request.POST['name']
...............
Here this_name = request.POST['name-1'] may work for only 1st column. But I need all of them.
I try to open new window when the button clicked but when the new window opened it shows nothing ....It supposed to show my layout that I made from blade view file ... when i check console nothing error shown
here is my view blade file
SLACategoryCheckBoxList.blade.php
!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>{{ __('messages.module.incidentmgt') }}</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('css/app.v2.css') }}" />
<link rel="stylesheet" href="{{ asset('css/popupPage.css') }}" />
<script src="{{ asset('js/BaseCommon.js') }}"></script>
<script src="{{ asset('js/app.v2.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<script>
</script>
</head>
<body>
<form role="form" method="post" action="" enctype="multipart/form-data">
<table width="100%" border="0" cellpadding="" cellspacing="0">
<tr>
<td class="header">{{ __('messages.module.refmgt') }} ›› <span class="header-selblue">{{ __('messages.module.category') }}</span></td>
</tr>
<tr>
<td class="none">
<table class="fixed_header" width="100%" cellpadding="1" cellspacing="1" border="0">
<thead>
<tr class="subheader-blue">
<td style='width: 300px;'>{{ __('messages.refcategory.abbr') }}</td>
<td style='width: 6000px;'>{{ __('messages.customer.name') }}</td>
<td style='width: 110px;'> </td>
</tr>
</thead>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
web.php
Route::group(['prefix' => 'sla'], function () {
Route::get('sla/getCategory','SlaController#slaCategoryTreeListScreen')->name('sla.slaCategoryTreeListScreen');
});
SlaController.php
public function slaCategoryTreeListScreen() {
return view('sla.slm.SLACategoryCheckBoxList');
}
my other view blade that trigger button
<a class="btn btn-sm btn-default pull-right" type="button" title="Search Category" onclick="openNewWindow('{{ route('sla.slaCategoryTreeListScreen') }}')" >
just solved this error by putting all resource route below get route in web.php
(answered by #adaminho)
This is my site
<!DOCTYPE html>
<html>
<head>
<title>gump</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<a><img src="pictures/logo.png" alt="gump" style="height:25px" href="#default" class="logo";></a>
<div class="header-right">
<a class="active">Home</a>
Links
Encryption
</div>
</div>
<div style="padding:25px">
<table style="width:100%; table-layout:fixed">
<tr>
<td style="font-weight:bold">Sites</td>
<td style="font-weight:bold">Partners</td>
<td style="font-weight:bold">Social Media</td>
<td style="font-weight:bold">Tools</td>
<td style="font-weight:bold">Links</td>
</tr>
<tr>
<td>Home</td>
<td>pherbich.com</td>
<td>Steam</td>
<td>byom.de</td>
<td>gumprecht.co.at</td>
</tr>
</table>
</div>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>
Thats too much of just the header and the footer, i want to have the header and the footer external on a external html, but how can i get the external header.html and the footer.html in the index.html
I was looking recently on the same topic and this article explains how you can do it.
Link to the Atricle
I am new to angular.js. I want to call json data which is inside a custom directory and onclick of a particular user button i want to display the information of that particular user.I have unable to achieve this.Following is my code.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<!-- load angular, ngRoute, ngAnimate -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="index3.js"></script>
</head>
<body>
<!--<div class="container">-->
<!--<div ng-controller="ProductController">-->
<!--<h2>{{name}}</h2>-->
<!--</div>-->
<div ng-controller="studentController">
<my-firstdirective></my-firstdirective>
</div>
</div>
</body>
</html>
index.js
var myApp=angular.module("myApp",[]);
myApp.controller("ProductController",function($scope){
$scope.name="shar";
});
var myApp=angular.module("myApp",[]);
myApp.controller("studentController",['$scope',function($scope) {
}]);
myApp.directive('myFirstdirective',function() {
return {
templateUrl: "productTemplate.html ",
replace: true,
restrict: 'E',
controller: function ($scope) {
$scope.setGrade = function (student) {
student =[
s1=
{
'grade': 'sharv',
'Email': "shar123#gmail.com",
'contact': '1234567890'
},
{
'grade': 'pooja',
'Email': "pooja123#gmail.com",
'contact': '237790864322'
}
];
}
}
}
})
producttemplate.html
<div class="jumbotron">
<table class="table table-inverse">
<thead>
<tr>
<th>First Name</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td>sharvari</td>
<td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td>
</tr>
<tr>
<td>pooja</td>
<td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td>
</tr>
<tr>
<td>ruchi</td>
<td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td>
</tr>
</tbody>
</table>
<style>
.panel{
width:500px;
}
</style>
<div ng-show="!!student.grade">
<div class="panel panel-default">
<div class="panel-body">
Details of {{student.grade}}<br>
name:{{student.grade}}<br>
Email:{{student.Email}}<br>
contact:{{student.contact}}
</div>
</div>
</div>
</div>
1) Use angular.value for local stored values and angular.factory for fetching data from external service
2) Use ng-repeat to iterate through users:
<tr ng-repeat="user in users">
<td>{{ user.grade }}</td>
<td>{{ user.Email }}</td>
<td>{{ user.contact }}</td>
<td>
<button ng-click="setGrade(user)">
Click me to choose this user
</button>
</td>
</tr>
See full working ewample on plunkr
I'm currently designing a UI for an automated parking system. One of the pages (garage status) has a table which contains spot numbers and their corresponding ticket numbers. The valet has to be able to type in either a spot number or ticket number into the search box and as he types each letter, the options in the table are filtered according to what he types. I'm using List.js for this, however, I also need to have an onscreen keypad for the valet to input the numbers, which for that I use jQuery Keypad plugin. Unfortunately, filtering is only performed if I directly input from my laptop keyboard, not when I use the keypad plugin. I would be very grateful if someone could give some input on how to solve this problem.
<!DOCTYPE html>
<html>
<title>Garage Status</title>
<head>
<!-- Import materialize.css -->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<!--Import Material Design icons-->
<link href="font/material-design-icons/material.css" rel="stylesheet" />
<!--Import jQuery before materalize.js-->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Import jQuery Keypad CSS-->
<link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
<script>
$(document).ready(function(){
$('#grgKeypad').keypad({target: $('.search'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
});
});
</script>
</head>
<body>
<!--Page Title Panel-->
<div class="card-panel">
<h4>GARAGE STATUS</h4>
<!--Options button, reveals dropdown menu with options to switch to other pages-->
<a id="optionsbtn" class='dropdown-button btn-large' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
<!--Quick access buttonss to inpark and outpark menus-->
<a id="quick_outpark_btn" class="waves-effect waves-light btn-large" href="outmenu.html">OUTPARK</a>
<a id="quick_inpark_btn" class="waves-effect waves-light btn-large" href="inmenu.html">INPARK</a>
</div>
<!--Dropdown menu structure and it's items-->
<ul id="dropdown1" class="dropdown-content">
<li>Dashboard</li>
<li class="divider"></li>
<li>Inpark</li>
<li class="divider"></li>
<li>Outpark</li>
<li class="divider"></li>
<li>Shuffle</li>
<li class="divider"></li>
<li>Outpark Queue Menu</li>
<li class="divider"></li>
<li>Transactions</li>
</ul>
<!--Dashboard Button, press to return to dashboard-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
<!--Home icon-->
<i class="material-icons" style="font-size: 48px"></i>
</a>
</div>
<!--Form that takes ticket number or spot number and searches for that car's ticket number and spot number-->
<!--Note that the search form shouldn't be sending data back to the server to search for the car, the data should already be loaded onto the page and the search should be performed with the already loaded data or something like that idk if you want to change-->
<div id="locations">
<div class="row">
<form class="col s7" style="margin: 0px; padding: 0px;">
<div class="row">
<div class="input-field col s9">
<input placeholder="Enter ticket or spot number" id="search" type="search" class="search">
<label for="search"><i class="material-icons" id="searchicon"style="font-size: 48px"></i></label>
</div>
</div>
</form>
</div>
<!--Table that displays cars in the garage-->
<!--Data will be dynamically displayed, currently these are just placeholder data-->
<div class="table" id="searchtable">
<table class="centered striped bordered scroll">
<thead>
<tr>
<th>Spots</th>
<th>Ticket Number</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="spot">1-22-35</td>
<td class="ticketnum">696969</td>
</tr>
<tr>
<td class="spot">1-22-34</td>
<td class="ticketnum">696968</td>
</tr>
<tr>
<td class="spot">6-22-33</td>
<td class="ticketnum">696967</td>
</tr>
<tr>
<td class="spot">1-22-32</td>
<td class="ticketnum">696966</td>
</tr>
<tr>
<td class="spot">8-22-31</td>
<td class="ticketnum">696965</td>
</tr>
<tr>
<td class="spot">8-22-30</td>
<td class="ticketnum">696964</td>
</tr>
<tr>
<td class="spot">1-22-39</td>
<td class="ticketnum">696953</td>
</tr>
</tbody>
</table>
</div>
<!--Div containing the keypad-->
<div id="grgKeypad"></div>
<!--Import List.js-->
<script src="list.js"></script>
<script>
var options = {
valueNames: ["spot","ticketnum"]
};
var userList = new List("locations",options);
</script>
</body>
</html>