I need help with updating a "quantity" of Product in my cart from a submit button, I'm clueless. I have successfully added the Product on the Carts page, I have an Update Button that should update the new quantity input value on the UI, just help and tips with updating the List of Cart Items when changes are been made to the quantity of the individual items. Thanks
//Iterating over the cartItems to be displayed on the carts page
<tr th:each="cartItem : ${cart.cartItems}">
<td class="product-name">
<h2 class="h5 text-black" th:text="${cartItem.product.productName}">Polo Shirt</h2>
</td>
<td>
<div class="input-group mb-3" style="max-width: 120px;">
<input type="number" class="form-control quantity text-center" th:value="${cartItem.quantity}" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
</td>
<td th:text="${'₦' + #numbers.formatDecimal(cartItem.price, 0, 'COMMA', 0, 'POINT')}"></td>
<td><a th:href="${'/cart/removeCartItem/' + cartItem.cartItemId}" class="btn btn-primary height-auto btn-sm">X</a></td>
</tr>
//The update button
<div class="col-md-6 mb-3 mb-md-0">
<button class="btn btn-primary btn-sm btn-block">Update Cart</button>
</div>
Related
I have a table view with many records and I want to have a delete button for each record, which will prompt a modal box for the user to confirm a delete. I am able to have the correct buttons (viewed from the table) to prompt the modal, but the button within the modal, which is the button to confirm a delete doesnt pass the right id. For example, I have 3 records in my table that is shown, with an ID of 1, 2 and 3. But the way I have code my table (will show code below) makes it where the user clicks any of the delete button on the desired record, the modal box pops up, with the "Delete(confirm)" button with an ID of the newest amongst all records. In this situation would be an ID of 3. I want it to pass the correct ID. Meaning if I want to delete record 1 it will pass ID 1 and record 2 and so on
I have tried researching what I did wrongly with my JavaScript but it seems ok and nothing seems to help for now. I have tried putting the whole modal into my table but it still has the same problem...
<!-- DataTables Example -->
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-table"></i>
Advertisements
<div></div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Image</th>
<th>Status</th>
<th>Sort No.</th>
<th>Updated By</th>
<th>Expired At</th>
<th>Updated At</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
#foreach ($advertisements as $advertisement)
<tr>
<td>{{ $advertisement->media->title }}</td>
<td>{{ $advertisement->media->description }}</td>
<td><img src="{{asset('/storage/uploads/images/').'/'.$advertisement->image}}" height="65" width="100"></td>
#php
if ($advertisement->media->status == 1){
$current_status = 'Active';
} elseif ($advertisement->media->status == 0){
$current_status = 'Inactive';
}
#endphp
<td>{{ $current_status }}</td>
<td>{{ $advertisement->media->sort}}</td>
<td>{{ $advertisement->media->admin->username}}</td>
<td>{{ $advertisement->expired_at}}</td>
<td>{{ $advertisement->media->updated_at}}</td>
<td><a href="/advertisements/{{$advertisement->id}}/edit" class="btn btn-success">Edit</td>
<td>
<button class="btn btn-danger delete-record" data-toggle="modal" data-target="#deleteModal" data-id="{{$advertisement->id}}" data-url="/advertisements/{{$advertisement->id}}">Delete , {{$advertisement->id}}</button>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
Above code is the table view showing my data, and each record will have a delete button next to it.
<form action="" method="post" id="deleteForm">
#method('DELETE')
#csrf
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this record?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="delete" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
</form>
The code above is my modal box code, with a form that creates a delete request.
The code below is the javascript that is handling the delete and the passing of id and the action:-
$(document).ready(function () {
$('.delete-record').click(function () {
var url = $(this).attr('data-url');
$("#deleteForm").attr("action", url);
});
});
I want it to pass the correct ID. Meaning if I want to delete record 1 it will pass ID 1 and record 2 and so on.
You try to send your form via POST method, but there is no post data such as advertising id in it.
Can you please show your web.php route file ?
Because if it's POST method here, you should to add hidden input in your form.
Try with this,
Instead of url you should use route,
<button class="btn btn-danger delete-record" data-toggle="modal" data-target="#deleteModal" data-id="{{$advertisement->id}}" data-action="{{ route('advertisements.destroy', $advertisement->id) }}">Delete , {{$advertisement->id}}</button>
In your JS code
$("#deleteForm").attr("action", $(this).data('action'));
And if you don't put your modal code outside foreach then put it in at end of file
Hope this helps :)
I made a shopping cart, where a product item gets added to the cart. When I click the product, it gets stored in a cart, but not local storage. I set it local-storage. When I click a product that already exists in the cart, I want to increment its quantity, but that's not happening. It adds another row instead, which I want to prevent.
Here is my component:
<template>
<div class="row">
<div class="col-md-8">
<div v-for="(product, id) in products" :key="id" class="col-xl-3 col-sm-6 mb-3 float-left">
<div class="card o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-comments"></i>
</div>
<div class="mr-5">{{product.name}}</div>
</div>
<div class="card-footer clearfix small z-1 form-group row" href="#">
<span class="float-left"><input type="text" v-model="product.qty" class="form-control form-control-sm mb-2"></span>
<strong class="float-right col-sm-6">
{{product.price}} TK
</strong>
<button class="btn btn-sm btn-info float-right col-sm-6" #click="addToCart(product)">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<table class="table table-sm">
<thead>
<tr>
<th>#SL</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
<th>L/T</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(cart, i) in carts" :key="i">
<td>{{cart.id}}</td>
<td>{{cart.name}} </td>
<td class="text-right">{{cart.qty}}</td>
<td class="text-right">{{cart.price}}</td>
<td class="text-right">{{cart.price*cart.qty}}</td>
<td><button type="button" #click="removeProduct(i)" class="btn btn-sm btn-danger">x</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text-right font-weight-bold">Total</td>
<td class="text-right"> {{total}}/-</td>
</tr>
</tfoot>
</table>
<div>
<button class="btn btn-sm btn-info float-right">Checkout</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
products:[],
carts:[],
}
},
computed:{
total(){
var total = 0
this.carts.forEach(cart => {
total += parseFloat(cart.price * cart.qty)
})
return total
},
},
mounted(){
this.showProduct()
},
methods:{
showProduct(){
axios.get('api/pos')
.then(res=>{
this.products = res.data.data
});
},
addToCart(product){
this.carts.push(product)
},
removeProduct(i){
this.carts.splice(i,1)
}
}
}
</script>
Here is the screenshot:
The problem is addToCart() just pushes another product into the cart without checking if it already exists.
To fix the problem, update that method to find the item, and increment the item's quantity if found. Otherwise, push another item into the cart:
addToCart(product) {
if (this.carts.find(p => p.id === product.id)) {
product.qty++
} else {
this.carts.push(product)
}
}
#extends('layouts.app')
#section('content')
<div class="row">
<div style="float:left;" class="col-md-8">
<h3>Currency</h3>
</div>
<div style="float:right;" class="col-md-4">
<i class="fa fa-edit" style="color:white;"></i>Add New
<input type="text" id="search" name="search" placeholder="search" class="form-control-sm col-md-8 ml-1" style="float:right;"><br><br>
</div>
</div>
#if(count($currencies) > 0 )
<table class="table table-striped table-sm" >
<thead>
<tr><th scope="col">ID</th><th scope="col">Currency</th><th scope="col">Country</th><th scope="col" colspan="2" style="text-align:right">Actions</th></tr>
</thead>
#foreach($currencies as $currency)
<tr><td scope="row">{{$currency->id}}</td>
<td>{{$currency->title}}</td>
<td>{{$currency->country}}</td>
{!!Form::open(['action'=>['CurrencyController#destroy', $currency->id], 'method'=>'POST'])!!}
{{Form::hidden('_method','DELETE')}}
#csrf
<td><button type="submit" class="btn btn-danger btn-sm" style="float:right"><i class="fa fa-remove" style="color:white;"></i>Delete</button>
</i>Edit</td></tr>
{!!Form::close() !!}
#endforeach
</table>
{{$currencies->links()}}
#else
<p> No Data Available </p>
#endif
#endsection
Hi all, The delete form is not submitting in this code and I tried so many thing but I could not figure out the issue. Please help me with this.
It looks to me that your html is wrong, you open, close your form and place #csrf outside your td tag while submit button is inside it
Try to move your form definition inside td tag like:
<td>
{!!Form::open(['action'=>['CurrencyController#destroy', $currency->id], 'method'=>'POST'])!!}
{{Form::hidden('_method','DELETE')}}
#csrf
<button type="submit" class="btn btn-danger btn-sm" style="float:right"><i class="fa fa-remove" style="color:white;"></i>Delete</button>
</i>Edit
{!!Form::close() !!}
</td>
Try changing the method in the actual form tag to DELETE? By default if you are using something like route::resource in your routes, it will automatically assign the DELETE method to the route, not the POST.
I can see you're specifying the delete method in a hidden element anyway, but its worth a try.
{!!Form::open(['action'=>['CurrencyController#destroy', $currency->id], 'method'=>'POST'])!!}
If you're never quite sure, run php artisan route:list in your terminal inside your project root directory, and it will give you a full list of the routes and methods for your application.
Im trying to retrieve information from a table which is populated by a PDO array into a html table. I want to grab the row information when a user clicks on the 'delete button' for that row into a modal which i have for the delete confirmation.
I'm not sure how to go about doing this because the information returned is from the database and not hard-coded in.
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
Course Code
</th>
<th class="text-center">
Course Title
</th>
</tr>
</thead>
<tbody>
<?php foreach ($courses as $row) {
echo "<tr><td>";
echo $row['course_code'];
echo "</td><td>";
echo $row['course_title'];
echo "</td><td>";
echo '<p data-placement="top"
data-toggle="tooltip"
style="margin-left:18px"
title="Delete">';
echo '<button class="btn btn-danger btn-xs"
data-title="Delete"
data-toggle="modal"
data-target="#delete">';
echo '<span class="glyphicon glyphicon-trash" />';
echo '</button></p>';
echo "</tr>"; }
?>
this is the code for the modal:
<div id="delete" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Record</h4>
</div>
<div class="modal-body">
<p class="text-danger"><small>Are you sure you would like to delete this record?</small></p>
<p class="text-danger"><small>You will not be able to un-do this action</small></p>
<div class="form-group">
<input class="form-control " type="text" placeholder="Course Title">
</div>
</div>
<div class="modal-footer">
<button id="can" type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button id= "upd" type="submit" class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
</div>
I know i will need AJAX to do this dynamically. Does anyone have any ideas of a solution? thanks
Here's the solution.
http://getbootstrap.com/javascript/#modals-related-target
You should add a new data attribute here:
'<button class="btn btn-danger btn-xs"
data-title="Delete"
data-index="yourItemIndex" <----- here
data-toggle="modal"
data-target="#delete">';
Your script should be something like this:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Best regards.
Please be gentle. I'm very new to Ruby and Watir. In general also new to UI automation testing. I'm trying to parse through a table then click a toggle that start/stops an application. The applications that can be turned on and off are not set. They can range from 1 to 'infinite' number applications. I need something that will parse through each row and click the toggle. if the application is started, I need to turn it off and vice-versa. No matter how many rows exist. The row also contains an element in the first column that allows the application to be clicked and brought to another page that gives details about said application. The toggle exists in the last column of the table. Here is the HTML I'm looking at with two applications deployed. It may be something simple that I'm missing. I'm also normally an IT admin that just got thrown into this. Thanks for all the help
<table id="apps_data" class="table table-striped table-bordered table-hover ng-scope">
<thead>
<tr>
</thead>
<tbody>
<tr class="link ng-scope" ng-repeat="app in services.data | orderBy:services.sort">
<td class="ng-binding" ng-click="click_app(app.Id)">Zenoss</td>
<td class="ng-binding deploy-success" ng-class="app.deploymentClass">
<span class="glyphicon glyphicon-ok" ng-class="app.deploymentIcon"></span>
successful
</td>
<td class="ng-binding">default</td>
<td>
<div class="toggle btn-group" data-toggle="buttons">
<label class="ng-binding btn btn-success active" ng-click="clickRunning(app, 'start', servicesService)" ng-class="app.runningClass">
<input class="ng-pristine ng-valid" type="radio" value="1" ng-model="app.Running" name="running0">
started
</label>
<label class="ng-binding btn btn-default off" ng-click="clickRunning(app, 'stop', servicesService)" ng-class="app.notRunningClass">
<input class="ng-pristine ng-valid" type="radio" value="stopped" ng-model="app.Running" name="running0">
</label>
</div>
</td>
</tr>
<tr class="link ng-scope" ng-repeat="app in services.data | orderBy:services.sort">
<td class="ng-binding" ng-click="click_app(app.Id)">Zenoss</td>
<td class="ng-binding deploy-success" ng-class="app.deploymentClass">
<span class="glyphicon glyphicon-ok" ng-class="app.deploymentIcon"></span>
successful
</td>
<td class="ng-binding">default</td>
<td>
<div class="toggle btn-group" data-toggle="buttons">
<label class="ng-binding btn btn-success active" ng-click="clickRunning(app, 'start', servicesService)" ng-class="app.runningClass">
<input class="ng-pristine ng-valid" type="radio" value="1" ng-model="app.Running" name="running1">
started
</label>
<label class="ng-binding btn btn-default off" ng-click="clickRunning(app, 'stop', servicesService)" ng-class="app.notRunningClass">
<input class="ng-pristine ng-valid" type="radio" value="stopped" ng-model="app.Running" name="running1">
</label>
</div>
</td>
</tr>
</tbody>
</table>
I have this so far, but it's just going to the first line.
if ff.div(:class, 'toggle btn-group').label(:class, 'ng-binding btn btn-success active').exist?
ff.div(:class, 'toggle btn-group').label(:class, 'ng-binding btn btn-default off').click; sleep 1
ff.div(:class, 'toggle btn-group').label(:class, 'ng-binding btn btn-default off').exist?
ff.div(:class, 'toggle btn-group').label(:class, 'ng-binding btn btn-default off').click; sleep 1
end
This might do what you want:
apps = browser.table(:id => 'apps_data').tbody.trs
apps.each do |app|
set_radios = app.radios.find_all{ |radio| !radio.set? }
if set_radios.length == 2
# Neither radio button is set, so do nothing?
else
set_radios.first.set
end
end
What this does is:
Gets a collection of all tr elements in the table body. Each tr element is assumed to represent an "app".
Iterates through each row (app):
Counts the number of radio buttons that are not set.
If neither of the 2 radio buttons is set, it does nothing.
If only one unset radio button is found, it is set.
Note that since the 2 radio buttons of the app have the same name attribute value, setting the one radio button will automatically unset the other.