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.
Related
Im trying to get datatables to work for a basic table
This is my error
Below is my layouts file, where i include the script tags and css tags / they are noted
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- font awesome icon kit - check favourite tabs in chrome to get more -->
<script src="https://kit.fontawesome.com/69e69f8319.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{config('app.name', 'Coffee')}}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="../css/app.css">
<!-- ck editor cdn-->
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
<!-- Datatables link -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body style="background-color: lightgrey !important;">
#include('inc.admin_navbar')
<div class="container">
#yield('content')
#if(session('success_message'))
<div class="alert alert-success">
{{session('success_message')}}
</div>
#endif
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- datatables js link -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
#include('sweetalert::alert')
</body>
</html>
Here is my file that includes the targeted table and the javascript. This file extends from the layouts file where the datatable links are nested
<table id="datatable" class="table table-striped table-hover">
<htead>
<th>ID</th>
<th>Name</th>
<th>Date Joined</th>
<th></th>
</htead>
<tbody>
#foreach($posts as $post)
<tr>
<th>{{$post->id}}</th>
<th>{{$post->title}}</th>
<th>{{$post->created_at}}</th>
<th>
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
</div>
<div class="col">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">Delete</button>
</div>
</div>
</th>
</tr>
#endforeach
</tbody>
</table>
Here is the js at the bottom on the file
<script type="text/javascript">
$(document).ready(function () {
//linked to our main table - js function
var table = $('#datatable').DataTable();
})
</script>
please include Jquery before datatable load
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Include jQuery into your code, right after body tag ends </body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
I am developing a website to display data that has to be ordered by the users needs. And I do not know how to solve my problem. I have done all the things that were described here. But at the end when I run it on the browser it is not working.
This is just the ajax code that is getting the data and returning the table of the editor view:
try {
/*
Making call to database
and getting all the data
*/
int count = metaData.getColumnCount();
%>
<table id="table" class="sortable table table-hover table-mc-light-blue">
<thead>
<tr>
<%
for(int i=1; i<=count; i++){
%><th scope="col" class="mdl-data-table__cell--non-numeric"><%
out.print(metaData.getColumnName(i));
%></th><%
}
%>
</tr>
</thead>
<tbody>
<%
while(resultSet.next()){%>
<tr onclick="rowClickable(this)" class="n_title">
<%for(int i= 1; i<= count; i++){
if(metaData.getColumnName(i).equals("PLANT")){
%><td scope="row" id="clicked"><%
out.println("<a class='disabledLink' href='"+resultSet.getString(i)+"'>");
out.println(resultSet.getString(i));
out.println("</a>");
%></td><%
} else {
%><td><%
out.println(resultSet.getString(i));
%></td><%
}
}%>
</tr>
<%}
%>
</tbody>
<tfoot></tfoot>
</table>
<script src="sorttable.js" type="text/javascript"></script>
<% connection.close();
}
catch(Exception e){
out.println("\n<P> SQL error: <PRE> " + e + " </PRE> </P>\n ");
}
%>
And this is view of the browser code:
<table id="table" class="sortable table table-hover table-mc-light-blue">
<thead>
<tr>
<th scope="col" class="mdl-data-table__cell--non-numeric">PLANT</th><th scope="col" class="mdl-data-table__cell--non-numeric">NAME</th><th scope="col" class="mdl-data-table__cell--non-numeric">COUNT</th>
</tr>
</thead>
<tbody>
<tr onclick="rowClickable(this)" class="n_title">
<td scope="row" id="clicked"><a class='disabledLink' href='ABI'>
ABI
</a>
</td></tr>
</tbody>
<tfoot></tfoot>
</table>
<script src="js/plugins/jquery_3.3.1.js" type="text/javascript"></script>
<script src="js/plugins/material.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/created/main.js" type="text/javascript"></script>
And this is my index.html page where all the data gets put in:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/created/styles.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-grid.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-grid.min.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-reboot.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/material.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav id="navbar">
<button id="hiddenBackButton" type="button">Back</button>
<div id="searchNav">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="search" onkeyup="searchFunction('#switch-1',this.value, 'table', 'search')" type="text">
<label class="mdl-textfield__label" id="searchLabel" for="sample3" style="margin-bottom: 0.0px">Search by Name</label>
</div>
<div style="width: 10%; display: inline-block;">
<span style="
cursor: default;
font-size: 16px;
line-height: 24px;
margin: 0;
left: 24px">Plant
</span>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input onclick="changeSearchText(this)" type="checkbox" id="switch-1" class="mdl-switch__input">
</label>
<span style="
cursor: default;
font-size: 16px;
line-height: 24px;
margin: 0">Name
</span>
</div>
</div>
</nav>
<main id="response_body">
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</main>
<script src="js/plugins/jquery_3.3.1.js" type="text/javascript"></script>
<script src="js/plugins/material.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>
<script src="sorttable.js" type="text/javascript"></script>
<script src="js/created/main.js" type="text/javascript"></script>
<script>
window.onload = loadDataAjax("response_body");
</script>
</body>
</html>
I hope my code is not too messy or at least readable. It would be great if somebody would be able to solve my problem. Thanks in advance
Solved the problem through adding the code below after the function where the table is created:
$.getScript('url/to/script');
But this code is better described here.
I am trying to make the value of the input with the name "game-name" to be in the "Name of the game" column of the table when I click on the "add game" button. Also the delete button does not work.
Here is my code:
$(function() {
var $td = '<td>' + '</td>';
$('input[name=add-game]').click(function() {
$('tbody').append('<tr>' + $td + $td + $td + '</tr>');
var $tableRows = $('tbody tr').length
$('tbody tr').eq($tableRows).children().eq(0).text($('input[name=game-name]').val())
$('td:nth-child(3)').html('<button>');
$('button').text('Delete').addClass('delete btn btn-block btn-sm btn-danger');
});
$('.delete').click(function() {
$(this).parent().parent().empty();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exercises</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>
</div>
<div class="text-center row">
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that James like the most</h4>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ul>
</div>
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
</ul>
</div>
</div>
<hr>
<br>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<form class="text-center" action="index.html" method="post">
Game: <input type="text" name="game-name" value="" placeholder="Choose the game">
Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">
<input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">
</form>
<br>
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<th>Name of the game</th>
<th>Rating</th>
<th><span class="glyphicon glyphicon-remove"></span></th>
</thead>
<tbody>
<!-- Here will be added the games -->
</tbody>
</table>
</div> <!-- Close CONTAINER -->
</div>
</div> <!-- Close ROW -->
</div> <!-- Close CONTAINER-FLUID -->
</div>
<script src='script.js'></script>
</body>
</html>
Here's a quick solution. Hope this helps.
$(function() {
$('input[name=add-game]').click(function() {
// Lets get the information ready to be added
var name = '<td>' + $('input[name="game-name"]').val() + '</td>';
var rating = '<td>' + $('input[name="game-rate"]').val() + '</td>';
var btnDelete = '<td><button class="delete btn btn-block btn-sm btn-danger">Delete</button></td>'
// Lets append the information into the game table
$('tbody[id="game-table"]').append('<tr>' + name + rating + btnDelete + '</td>');
// Since we've created a delete button, we need to bind
// an event listener to the button so that we can
// delete it from the table if the user clicks it
$('.delete').on('click', function() {
$(this).parent().parent().empty();
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exercises</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>
</div>
<div class="text-center row">
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that James like the most</h4>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ul>
</div>
<div class="col-sm-6 col-md-6">
<ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
<li class="list-group-item">`empty`</li>
</ul>
</div>
</div>
<hr>
<br>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<form class="text-center" action="index.html" method="post">
Game: <input type="text" name="game-name" value="" placeholder="Choose the game">
Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">
<input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">
</form>
<br>
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<th>Name of the game</th>
<th>Rating</th>
<th><span class="glyphicon glyphicon-remove"></span></th>
</thead>
<tbody id="game-table">
<!-- Here will be added the games -->
</tbody>
</table>
</div> <!-- Close CONTAINER -->
</div>
</div> <!-- Close ROW -->
</div> <!-- Close CONTAINER-FLUID -->
</div>
<script src='script.js'></script>
</body>
</html>
Your code is in $(function()... it means that when the dogument gets ready these codes will run. You add delete buttons after all codes ended. In another way your delete buttons add after the codes running and this:
$('.delete').click(function() {
$(this).parent().parent().empty();
});
Does not register for new added .delete buttons.
To elements that dynamically adding to page you need to use delegate:
$('.delete').on('click', function() {
$(this).parent().parent().empty();
});
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.
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>