I am creating an online restaurant order system. I am using codeigniter. In the order page I have used the angular grid system which filters and sorts the items.
What I want to do is create a checkbox in every row. The checkboxes I click the item corresponding to them should be added to cart. I am using codeigniter cart class.
My code is as follow.
<html ng-app="myApp" ng-app lang="en"><head>
<title>Wah Bhai Wah</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/animate.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>css/bootstrap.css">
<script type="text/javascript" src="<?php echo base_url() ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/java.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>queries/insert_into_cart.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/bootstrap.js"></script>
<script type="text/javascript">
$(document).on("click", ".view_link", function() {
var id = $(this).data('id');
$(".modal-body #itemid").val( id );
var name = $(this).data('name');
$(".modal-body #itemname").val( name );
document.getElementById("descmodallabel").innerHTML = name;
var image = $(this).data('image');
document.getElementById("itemimagesrc").src = image;
$(".modal-body #itemimage").val( image );
var price = $(this).data('price');
$('.modal-body #itemprice').val( price );
});
</script>
</head>
<style>
.a
{
background-color:white;
}
body{
background: url("http://localhost/wah/images/slider/M3.png") fixed 100% 100%; background-size: cover;
}
.d{
background-color: green; height: 200px;
}
.c
{
background-color: yellow; height: 600px;
}
.item{
background-color: white; padding: 10px; margin-bottom: 20px;
box-shadow: 5px;-webkit-box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75);
box-shadow: 0px 10px 45px 6px rgba(0,0,0,0.75); border-radius: 6px;
}
.main
{
margin-top:200px;
}
.side-nav{background-color: white; padding: 30px; top:100px; }
table{
border-spacing: 0px;
border-collapse: separate;
}
td
{
padding-right: 20px; padding-top:10px;
}
.forms{background-color:white; padding-right:20px; margin-top:200px; position:static;}
</style>
<body>
<div class="modal fade" id="myModalmenu" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Menu</h4>
</div>
<div class="modal-body">
<table>
<tr>
<td>Item</td>
<td>Cost</td>
</tr><?php
foreach ($i as $items) {
?>
<tr>
<td>
<img src="<?php echo $items->img ?>" height="50px" width="50px">
<?php echo " ".ucfirst($items->item_name); ?>
</td>
<td>
<?php echo $items->price ?>
</td>
</tr>
<?php
}
?>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Cart</h4>
</div>
<div class="modal-body">
<table>
<tr><td>Item</td><td>Qty</td><td>Price</td><td>Total</td></tr>
<?php foreach($this->cart->contents() as $cart_items){ ?>
<tr>
<?php $id = $cart_items['rowid']; ?>
<?php echo form_open('cart_test/update/'.$id); ?>
<td><?php echo $cart_items['name'] ?></td>
<td><input type="number" class="span1" id="qty" value = "<?php echo $cart_items['qty'] ?>" name="qty"></td>
<td><?php echo $cart_items['price'] ?></td>
<td><?php echo $cart_items['subtotal'] ?> </td>
</tr>
<tr>
<td>
Remove
</td>
<td>
<input type="submit" value="Update" class="btn btn-primary">
</td>
</form>
</tr>
<?php } ?>
<tr><td colspan="5" ><hr style="background-color: #000000"></td></tr>
<tr><td colspan="2">Item Total</td><td colspan="2"><b style="text-align: right"><?php echo $this->cart->total_items()?></b></td></tr>
<tr><td colspan="2">Bill Total</td><td colspan="2"><b style="text-align: right"><?php echo $this->cart->total()?></b></td></tr>
<tr><td colspan="5" ><hr style="background-color: #000000"></td></tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<?php
if($this->cart->total_items()==0)
{
?>
Proceed To Checkout
<?php
}
else
{
?>
Proceed To Checkout
<?php
}
?>
</div>
</div>
</div>
</div>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Wah Bhai Wah
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li >Home</li>
<li class="active">order</li>
<li>Menu</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
<li><a href="#" data-toggle="modal" data-target="#myModal">View Cart <b style="background-color:red; -moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 450px; padding:15px;" ><?php echo count($this->cart->contents()) ?></b></a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div ng-controller="customersCrtl" class="main">
<div class="container">
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-condensed active" style="background-color:white; border-radius:6px; padding:20px;">
<thead>
<th class="success">Item Id <a ng-click="sort_by('id');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Item Name <a ng-click="sort_by('item_name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Item <a ng-click="sort_by('img');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Price <a ng-click="sort_by('price');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th class="danger">Category <a ng-click="sort_by('category');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" class="danger">
<td>{{data.id}}</td>
<td>{{data.item_name}}</td>
<td><img src={{data.img}} height="50px" width="50px"></td>
<td>{{data.price}}</td>
<td>{{data.category}}</td>
<td>Add to Cart</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No Items found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
</div>
</div>
<script src="<?php echo base_url() ?>apps/js/angular.min.js"></script>
<script src="<?php echo base_url() ?>apps/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="<?php echo base_url() ?>apps/app/app.js"></script>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="descmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="descmodallabel"></h4>
</div>
<div class="modal-body">
<?php echo form_open('cart_test/add_from_desc') ?>
<input type="hidden" src="" value="" id="itemimage" >
<img src="" height="200" width="300px" id="itemimagesrc">
<input type="hidden" name="item_id" value="" id="itemid">
<input type="hidden" name="item_name" value="" id="itemname">
<input type="text" name="item_price" value="" id="itemprice">
<input type="number" name="quantity" value="" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add to Cart</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body
></html>
Related
Applogies for the question again. I'm new to laravel and this is my first project.
I'm trying to generate a pdf using DomPDF but before submitting my form to database, I dont know whether it is possible or not.
this is my create.blade.php code
#extends('layouts.main')
#section('content')
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Orders</h1>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-12">
<div>
<div class="card-header">{{ __('Creating Order') }}
Back
</div>
<div>
<form method="GET" action="{{ route('orders.create') }}" enctype="multipart/form-data">
#csrf
<div class="form-row align-items-center">
<div class="form-group col-md-6 col-lg-5">
<select id="customer_name" onchange="this.form.submit()" type="search" name="customer_id" class="form-control #error('customer_id') is-invalid #enderror" value="{{ old('customer_id') }}" required >
<option selected></option>
#foreach ($customers as $customer)
<option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
#endforeach
</select>
#error('customer_id')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="col-auto">
<input id="btn" type="button" class="btn btn-primary mb-3" value="Show Catalog" onclick="showDiv()">
</div>
</div>
<div class="m-3">
Displaying Catalog for: <strong> <span style="color: red" id="customerName"></span><span style="color: red">. {{$count_linkeds}}</span></strong> items found in this Catalog.
</div>
</form>
<form method="POST" action="{{ route('orders.store') }}" enctype="multipart/form-data">
#csrf
<main id="catalog" style="display: none" class="main">
<div class="container">
<div class="row s6 m3">
#foreach($linkeds as $lnkditem)
<div class="col s6 m3">
<div class="card item-images">
<div class="img-wrapper">
<img src="{{ asset('uploads/linkedItems/'.$lnkditem->item_image) }}" width= '50' height='50' class="img img-responsive" />
</div>
<div class="card-content mt-2 item">
<h6 style="font-size: 18px">
Product Name: <strong style="color: red">{{ $lnkditem->product->product_name}}</strong>
</h6>
<div style="float: right; margin-top: -30px">
<label hidden style="float: right;" for="linked_id">{{ __(': Linked ID') }}</label>
<textarea hidden style="text-align: center; resize: none; width:100px; height: 28px; overflow:hidden; border:none; background-color: #f8f8f8;" readonly rows="1" name="linked_id" id="linked_id" class="form-control"
value="{{ old('linked_id', $lnkditem->id) }}">{{ $lnkditem->id}}</textarea>
</div>
<p>
Product description: <strong style="color: red"> {{ $lnkditem->product->product_description}}</strong>
</p>
Item Name: <span readonly id="item_name" name="item_name" style="font-weight: bold; color: black" value="{{ $lnkditem->item->item_name}}">{{ $lnkditem->item->item_name}}</span>
<p>
Item description: <strong style="color: black"> {{ $lnkditem->item->item_description}}</strong>
</p>
<p>
Supplier Ref.: <strong style="color: black"> {{ $lnkditem->supplier_ref_no}}</strong>
</p>
<p>
Supplier Barcode: <strong style="color: black"> {{ $lnkditem->supplier_barcode}}</strong>
</p>
<div class="pass-quantity col-lg-3 col-md-4 col-sm-3 pl-0">
<label for="item_quantity" class="pass-quantity">Quantity:</label>
<input style="color: red" name="item_quantity" class="form-control" type="number" value="0" min="0">
</div>
<div>
<label for="pass-quantity" class="pass-quantity" style="color: red; font-weight: bold; float: right; margin-right: 45px !important; margin-top: -32px">Item Price: AED - </label>
<p type="number" name="item_cost" class="item_cost" style="color: red; font-weight: bold; float: right; margin-top: -32px">
{{ $lnkditem->item_cost}}
</p>
</div>
<div class="product-price d-none">{{ $lnkditem->item_cost}}</div>
<hr class="sidebar-divider">
<strong style="color: red"><p>Total Amount: AED:</p></strong>
<div class="product-line-price pt-4 pb-4 text-uppercase" style="color: red; font-weight: bold; float: right; margin-top: -67px">
<strong><span style="color: red" type="number" class="product-line-price">0.00</span></strong>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<div class="card card-action mb-3 pt-4" style="padding: 15px; height: 100%; width: 50%; margin-left: 25%">
<div class="mb-3" style="margin-left: 15px">
<label for="order_unq_id"></label>
Order UID: <textarea name="order_unq_id" style="color: red; font-weight: bold; width: 350px; resize: none; margin-left: 22%; margin-top: -31px !important; height: 38px; overflow:hidden; border:none; background-color: #f8f8f8;" readonly rows="1" id="order_unq_id" class="form-control #error('order_unq_id') is-invalid #enderror" value="{{ old('order_unq_id') }}">
</textarea>
</div>
<div style="margin-left: 20px">
Saving Order for - <strong> <span class="text-uppercase" style="color: red" id="order_save_customerName"></span></strong>
<input type="text" class="customerName_order_save_input" hidden id="customerName_order_save_input" value="">
</div><br>
<div class="col-xl-12 col-lg-4 col-md-5 totals">
<div class="border border-gainsboro mb-3 px-3">
<div class="border-bottom border-gainsboro">
<p class="text-uppercase mb-0 py-3 bg-primary text-white text-center"><strong>Order Summary</strong></p>
</div>
<p class="mt-3 text-uppercase">Subtotal AED:</p>
<div class="totals-item d-flex align-items-center justify-content-between"
style="float: right; margin-top: -40px">
<p class="totals-value" id="cart-subtotal"></p>
</div>
<div class="totals-item d-flex align-items-center justify-content-between">
<p class="text-uppercase">Aprox. VAT #5%</p>
<p class="totals-value tax" id="cart-tax"></p>
</div>
<div class="totals-item totals-item-total d-flex align-items-center justify-content-between mt-3 pt-3 border-top border-gainsboro">
<label for="total" class="text-uppercase" style="color: red;"><strong>grand Total</strong></label>
<input type="text" class="total_input" hidden id="total_input" name="total_input" value="0.00">
<textarea style="self-align: center; text-align: right; color: red; padding-top !important; 10px; resize: none; width:100px; height: 35px; overflow:hidden; border:none; background-color: white; font-size: 18px" readonly rows="1"
class="totals-value font-weight-bold cart-total" name="total" id="total" style="color: red;"></textarea>
</div>
</div>
</div>
<div>
<a type="submit" target="_blank" class="btn btn-success" href="{{route('mht_order_pdf')}}">Generate PDF</a>
</div>
<button type="submit" class="btn btn-primary" id="save_order" >Save Order</button>
</div>
</main>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
I dont want pdf to get data from database. I need to generate the pdf with form data before form gets submit to database. Is this possible to achive? Thank you in advance.
In terms of tecnicality, this is possible. Personally I've done something like this, only that the PDF is being generated after the form is stored to DB, but before the request is sent back to users.
So in the controller, you can do something like this:
// first validate request inputs..
// then generate the PDF
PDF::generate('order_pdf'); // or something, idk what's the actual syntax
// finally
return view('order_dashboard');
However you need to know that while the PDF::generate() line is being executed, the app will wait until it finished before moving to the next line, meaning that the execution is being done synchronously. Thus if the PDF generation takes too long, user will have to wait for it. To face this issue, you might want to look at Laravel's Queue so that the PDF generation can be executed asynchronously.
My code:
.items {
display: grid;
grid-template-columns: repeat(3, 1fr);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}
How can I properly display my images as a 3 column grid?
<section id="work-a" class="text-center py-3">
<div class="container">
<h2 class="section-title">My Work</h2>
<div class="bottom-line"></div>
<p class="lead">
Check out some of my projects
</p>
<div class="items">
<div class="item">
<div class="item-image">
<img src="img/items/item1.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item2.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item3.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
</div>
</div>
</section>
I want to scroll to bottom of the page on page-load automatically in laravel 5.2, i tried soo much but i couldn't figure out were i went wrong, I have attached my view code below.Can u go through it please and let me know were i went wrong. Actually i'm not good at design soo please help me on it.
my code:
#section('content')
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-3 col-sm-6 col-xs-12 profile_left">
<!-- start Support Tickets -->
<ul class="list-unstyled user_data">
<li>
<div class="panel panel-success">
<div class="panel-heading"><span class="glyphicon glyphicon-filter"></span><strong> Ticket Information</strong></div>
<div class="panel-body">
<!-- Modal -->
<table class="table table" style="color: #009933;">
#if(!empty($tickets))
<tr>
<td style="font-weight: bold; ">
<small>
{{$tickets->subject}}
</small>
</td>
</tr>
<tr>
<td style="font-weight: bold; ">
<small>
#if ($tickets->status === 'open')
<span class="label label-success">{{$tickets->status}}</span>
#elseif ($tickets->status === 'ongoing')
<span class="label label-warning">{{$tickets->status}}</span>
#elseif ($tickets->status === 'closed')
<span class="label label-default">{{$tickets->status}}</span>
#endif
</small>
</td>
</tr>
<tr>
<td style="font-weight: bold; ">
<small>
<p style="font-family: 'Times New Roman', Times, serif; ">Agent: {{\App\User::where('_id',$tickets->user_assigned)->value('username') }}</p>
</small>
</td>
</tr>
<tr>
<td style="font-weight: bold; ">
<small>
<p style="font-family: 'Times New Roman', Times, serif; ">Priority:
#if ($tickets->priority === 'Low')
<span class="label label-info">{{$tickets->priority}}</span>
#elseif ($tickets->priority === 'Medium')
<span class="label label-primary">{{$tickets->priority}}</span>
#elseif ($tickets->priority === 'High')
<span class="label label-danger">{{$tickets->priority}}</span>
#endif</p>
</small>
</td>
</tr>
<tr>
<td style="font-weight: bold; ">
<small>
<p style="font-family: 'Times New Roman', Times, serif; ">Last_Updated: {{$tickets->updated_at}}</p>
</small>
</td>
</tr>
#endif
</table>
</div>
</div>
</li>
<li>
<div class="panel panel-success">
<div class="panel-heading">
<span class="glyphicon glyphicon-dashboard"></span><strong> Support</strong>
</div>
<div class="panel-body">
<!-- Modal -->
<table class="table table-striped">
<tr>
<td><span class="glyphicon glyphicon-home"></span> My Support Tickets</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-open"></span> Submit Tickets</td>
</tr>
</table>
</div>
</div>
</li>
</ul>
<!-- end of Support Tickets -->
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<center>
<h2 style="color: #00BCD4;">My Ticket Feedback/<small>Your Comments History</small></h2>
</center>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
#if($tickets->status === 'closed')
#if(Auth::user()->_id === $tickets->user)
<div class="alert alert-warning" role="alert">
<center>
<p style="font-weight: bold; color:#FF9966; ">This Ticket is closed. You can reply to reopen this ticket.</p>
</center>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<form action = "/reopentick/<?php echo $tickets->id; ?>" method = "post">
<input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
<input type="hidden" name="ticket_id" value="<?php echo $tickets->id; ?>">
<input type="hidden" name="status" value="open">
<span class="glyphicon glyphicon-pencil"></span>
<input type = 'submit' value = "Reply To Reopen Ticket" class="btn btn-link btn-xs" style="font-weight: bold; color:#009933; " />
<span class="glyphicon glyphicon-plus pull-right"></span>
</form>
</div>
</div>
#endif
#endif
<table class="table table-striped">
<tr><td>
<div class="panel-group">
#if($tickets->user == Auth::user()->_id)
<div class="panel panel-info">
#else
<div class="panel panel-success">
#endif
<div class="panel-heading">
<span class="glyphicon glyphicon-user">
<strong>
{{ \App\User::where('_id',$tickets->user)->value('username') }}
</strong>
</span>
<span class="glyphicon glyphicon-time pull-right">
{{ $tickets->created_at }}</br>
</span>
</div>
<div class="panel-body">
<p> Hello,</br>
{!! $tickets->message !!}</br>
<b>...</b></br>
Thank you,</br>
{{ \App\User::where('_id',$tickets->user)->value('username') }}
</p>
</div>
</div>
</div>
</td></tr>
<tr>
#foreach($anstickets as $t)
<td class="answer_block">
<div class="panel-group">
#if($t->user_id == Auth::user()->_id)
<div class="panel panel-info">
#else
<div class="panel panel-success">
#endif
<div class="panel-heading">
<span class="glyphicon glyphicon-user ">
<strong>
{{ \App\User::where('_id',$t->user_id)->value('username') }}
</strong>
</span>
<span class="glyphicon glyphicon-time pull-right">
{{ $t->created_at }}</br>
</span>
</div>
<div class="panel-body">
<p>Hi,</p>
{!!$t->comments!!}</br>
</div>
</div>
</div>
</td>
</tr>
#endforeach
</table>
#if(($tickets->status === 'ongoing')||($tickets->status === 'open'))
#if(Auth::user()->_id === $tickets->user)
<div class="panel panel-danger">
<div class="panel-heading">
<form action = "/closetick/<?php echo $tickets->id; ?>" method = "post" >
<input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
<input type="hidden" name="ticket_id" value="<?php echo $tickets->id; ?>">
<input type="hidden" name="status" value="closed">
<input type = 'submit' value = "Close Ticket" class="btn btn-link btn-xs" style="font-weight: bold; color:#CC0000; "/>
<span class="glyphicon glyphicon-remove-sign pull-right"></span>
</form>
</div>
</div>
#endif
<br>
#if(Auth::user()->_id === $tickets->user)
<b><h1> Response</h1></b>
#else
<b><h1> Solution</h1></b>
#endif
<form action = "/tickanswert/<?php echo $tickets->id; ?>" method = "post" onsubmit="return form_submit()">
<input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
<input type="hidden" name="user_id" value="<?php echo Auth::user()->id; ?>">
<input type="hidden" name="ticket_id" value="<?php echo $tickets->id; ?>">
<div class="form-group">
<textarea class="form-control" name="comments" rows="14" required></textarea>
</div>
<br>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" name="submit" class="btn btn-primary btn-lg">
<i class="fa fa-btn fa-ticket"></i> SUBMIT
</button>
</div>
</div>
</form>
#endif
</div>
</div>
#endsection
#section('additional-scripts')
<script>
$( document ).ready(function() {
$('html,body').animate({
scrollTop: $('.answer_block').children('.panel-group').last().offset().top},
'slow');
alert("Hello! I am an alert box!!");
});
</script>
#endsection
Laravel cannot scroll to bottom of page. But Javascript can:
<script>
$(document).ready(function() {
$('html,body').animate({scrollTop: document.body.scrollHeight},"slow");
})
</script>
I am trying to create rows dynamically in a table using thymeleaf and spring boot.
I've looked at following urls but couldn't make it working for me.
http://forum.thymeleaf.org/I-have-problem-in-binding-the-list-of-objects-contained-inside-a-object-on-the-form-using-thymeleaf-td3525038.html#a3526497
http://stingh711.github.io/dynamic-form-with-springmvc-and-thymeleaf.html
when I click on the addCourse button, its not even going to StudentController.
please can someone help?
Student.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>Students</title>
</head>
<body>
<div layout:fragment="content">
<form th:object="${student}" th:action="#{/student/create}" action="#" method="post">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Add New Student</h3>
</div>
<div class="panel-body">
<input type="text" th:field="*{studentId}" class="form-control" placeholder="Student Id" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{firstName}" class="form-control" placeholder="First Name" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{lastName}" class="form-control" placeholder="Last Name" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{city}" class="form-control" placeholder="City" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="submit" class="btn btn-success pull-right"
value="Save">
</div>
</div>
</div>
</div>
<!-- start of detail section -->
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-offset-2 col-md-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Student Courses</h3>
</div>
<div class="panel-body">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr class="btn-success">
<th>Course</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr th:each="studentCourse, rowStat : *{studentCourses}">
<td></td>
<td><input type="text" class="form-control" th:field="*{studentCourses[__${rowStat.index}__].courseId}" placeholder="Course" /></td>
<td><input type="text" class="form-control" th:field="*{studentCourses[__${rowStat.index}__].endDate}" placeholder="End Date"/>
<span class="col-sm-1 row-delete-button">
<button class="btn btn-default" th:value="*{studentCourses[__${rowStat.index}__].studentCourseId}" name="removeStudentCourse">
<i class="glyphicon glyphicon-trash icon-white"></i>
</button>
</span>
</tr>
</tbody>
</table>
<button class="btn btn-success btn-add" type="submit" name="addCourse">
<i class="glyphicon glyphicon-plus gs"></i> <b> Add</b>
</button>
</div>
</div>
</div>
<!-- end of detail -->
</form>
</div>
</body>
</html>
StudentController
#RequestMapping(value="/Student", params = {"addCourse"})
public String addCourse(Student student, BindingResult result) {
System.out.println("add new course");
student.getCourseList().add(new StudentCourse());
return "Student";
}
js.html (locatated # templates/fragments)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<script th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
style.html (locatated # templates/fragments)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<link rel="stylesheet" th:href="#{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}" />
Help me to find the xpath of an element, I want to find the with the #class="tipN button greenB" in the second [2] which has #class="middleNav"
<div id="rightSide">
<div class="topNav">
<style type="text/css">
<div class="resp">
<div class="titleArea">
<div class="wrapper">
<div class="pageTitle">
<div class="middleNav" data-bind="visible: showAllButtons" style="display: none;">
<a id="saveformtop" class="tipN button greenB" data-bind="click: SaveForm, visible: showGridButtons" original-title="Save Staff data" href="#" style="margin: 5px; display: none;" novalidate="novalidate">
<a class="tipN button greenB" original-title="Save Staff data" href="#" style="margin: 5px;" data-bind="click: SaveRestrictions, visible: showRestriction">
<a id="cancelbtntop" class="tipN button redB" original-title="Cancel all edits" data-bind="click:CancelForm, visible: showGridButtons" style="margin: 5px; display: none;">
<a class="tipN button redB" original-title="Cancel all edits" data-bind="click: CancelRestriction, visible: showRestriction" style="margin: 5px;">
<div class="clear"> </div>
</div>
<div class="middleNav" data-bind="visible: !showAllButtons()" style="">
<a id="cancelbtntop" class="tipN button redB" original-title="Cancel all edits" data-bind="click:CancelForm, visible: showGridButtons" style="margin: 5px; display: none;">
<img class="icon" src="../../content/css/images/icons/light/arrowLeft.png" alt="">
<span>Back</span>
</a>
<a class="tipN button greenB" original-title="Save Staff data" href="#" style="margin: 5px;" data-bind="click: SaveRestrictions, visible: showRestriction">
<img class="icon" src="../../content/css/images/icons/light/check.png" alt="">
<span>Save</span>
</a>
<a class="tipN button redB" original-title="Cancel all edits" data-bind="click: CancelRestriction, visible: showRestriction" style="margin: 5px;">
<div class="clear"> </div>
</div>
</div>
</div>
<div class="clear"> </div>
<div class="line"> </div>
<div>
</div>
<div id="footer">
<style>
<div id="leftsidehide" style="display: none;">
</div>
I'm not sure to fully understand your question. But here is what I would do from what understood :
//*[contains(#class, 'middleNav')][2]/*[contains(#class, 'tipN button greenB')]
Hope I understood you correctly:
(//div[#class="middleNav"])[2]/a[#class="tipN button greenB"]
Try with following if it works for you:
//div[#class='middleNav']//a[#class='tipN button greenB']