I'm try to add click get value from my table this is my table
#foreach($inventory as $p)
<?php
$no++;
$typesql = DB::table('product_variant_pos')
->where('id_product',$p->id)
->select('type')
->distinct()
->get();
?>
<tr >
<th scope="row"><?php echo $no;?></th>
<td style="width:100px;">
#if($p->featured_image != null || $p->featured_image != '')
<img src="{{ 'Images/'.$p->featured_image }}" alt="{{ $p->featured_image }}" title="{{ $p->featured_image }}" width="100px">
#else
<h4>Nothing Image Upload</h4>
#endif
</td>
<td class="data-product" id="{{ $p->id }}" data-toggle="modal" data-target="#ModalProduct" >{{ $p->item_name }}</td>
<td>
#if(!is_null($typesql))
#foreach($typesql as $t)
<ul>
<?php
$type = DB::table('product_variant_pos')
->where('id_product',$p->id)
->where('type',$t->type)
->get();
?>
<li>{{ $t->type }}
<ul>
#foreach($type as $j)
<li>{{ $j->name }}</li>
#endforeach
</ul>
</li>
</ul>
#endforeach
#else
<?php
$type = DB::table('product_variant_pos')
->where('id_product',$p->id)
->get();
?>
<li>{{ $t->type }}
<ul>
#foreach($type as $j)
<li>{{ $j->name }}</li>
#endforeach
</ul>
</li>
</ul>
#endif
</td>
<td>{{ $p->category }}</td>
<td>{{ $p->stock }}</td>
<td>Rp. {{ $p->price }}</td>
<td>
Edit
|
delete
</td>
</tr>
#endforeach
and this is my javascript
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('.data-product').click(function(e){
var formData = {
id: $(this).attr("id"),
};
var button_id = $(this).attr("id");
$.ajax({
type:'POST',
url:'product/modal',
data: formData,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success:function(data) {
$("#ModalProductTitle").html(data);
},
error: function (data) {
console.log(data);
}
});
});
} );
</script>
this script make value
The post method is not supported for this route.
I am try code for other similar question but its not work. I am try in latest laravel and php.
I think is caused csrf() is not detected in my code, but I don't know where is my mistake
can anyone help me solve this problem, thankyou+.
There are 2 alternatives, please choose one
Change your route type to POST because your AJAX type is POST Route::post('/product/modal', 'ProductController#Modal');
Or change your AJAX type to GET because your route's type is GET
$.ajax({
type:'GET',
url:'/product/modal',
data: formData,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success:function(data) {
$("#ModalProductTitle").html(data);
},
error: function (data) {
console.log(data);
}
});
Related
I have tried couple of ways to get icon to change on a button, that has been created with for loop on page load. Here is my element:
{% for i in data %}
<div class="accordion">
<div style="margin-left: -10px;">
<a href="#collapse{{ i }}", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse_{{ i }}">
<i class="material-icons" style="vertical-align: middle;">expand_more</i>
<label style="vertical-align: middle;">{{ i }}</label>
</a>
</div>
</div>
{% endfor %}
Here is my function to change the icon:
<script>
$(document).ready(function(){
$('#btn-collapse_{{ i }}').on('click', function () {
var thisElement = $(this);
var anchorElement = thisElement.find("i");
if(anchorElement.text() === "expand_less"){
anchorElement.text('expand_more');
} else {
thisElement.find("i").text("expand_less");
}
});
});
</script>
I've also tried changing the color in in another instance. Heres the element:
<tbody>
{% for i in data %}
<tr style="vertical-align: middle;">
<td>{{ i }}</td>
<td>{{ i.data1 }}</td>
<td>{{ i.data1 }}</td>
<td style="text-align: center;">
<button class="btn", id="btn-{{ i.data2 }}">
<i class="far fa-check-circle"></i>
</button>
</td>
<td style="text-align: center;">
<button class="btn", id="btn-{{ i.data3 }">
<i class="far fa-check-circle"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
And here is the function:
<script>
$(document).ready(function(){
var data_button = document.getElementById("btn-{{ i.data2 }}");
if({{ i.data2 }} == 'None'){
data_button.style.color = "#858796";
}
else {
data_button.style.color = "#1cc88a";
}
});
</script>
Data that is being queried in second instance is either 'None' or date.
In your script you wrote {{ i }} outside of for loop. Use class instead of id because if you get an element with id it will get only the first child, while class receives all. And you don't need commas between your element attributes.
<a href="#collapse{{ i }}" class="btn" data-id="{{forloop.counter}}" role="button" data-bs-toggle="collapse" id="btn-collapse_{{ i }}">
<script>
$(document).ready(function(){
$('.btn').on('click', function () {
data_id = $(this[data-id])
var thisElement = $(this).filter('[data-card="'+data_id+'"]');
var anchorElement = thisElement.find("i");
if(anchorElement.text() === "expand_less"){
anchorElement.text('expand_more');
} else {
thisElement.find("i").text("expand_less");
}
});
});
</script>
I use jQuery. Please include it in your head tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
I had to modify the script enes islam provided, this is how I got it in the end:
<a href="#collapse{{ i }}" data-id_collapse="{{ forloop.counter }}" class="btn" role="button", data-bs-toggle="collapse" id="btn-collapse_{{ i }}">
<script>
$(document).ready(function(){
$('.btn').on('click', function () {
data_id = $(this).attr('data-id');
var thisElement = $(this).filter('[data-id=' +data_id+ ']');
var anchorElement = thisElement.find("i");
if(anchorElement.text() === "expand_less"){
anchorElement.text('expand_more');
} else {
anchorElement.text('expand_less');
}
});
});
</script>
I have a Jquery/Ajax call which updates cart details. At the moment I can't get the existing HTML in the cart-body(tablebody) to clear. The actual ajax request works and all items are added to cart but the original HTML entries stay. The particular code is here:
if (data.products.length > 0 ) {
productRows.html("")
$(cartBody).empty()
Jquery Function
function refreshCart() {
console.log("in current cart")
var cartTable = $(".cart-table")
var cartBody = cartTable.find(".cart-body")
var productRows = cartBody.find(".cart-product")
var cartTotal = cartTable.find(".cart-total-sec")
var productQuantity = cartTable.find(".cart-item-quanity")
var currentUrl = window.location.href
var refreshCartUrl = '/api/cart/'
var refreshCartMethod = "GET";
var data = {};
$.ajax({
url: refreshCartUrl,
method: refreshCartMethod,
data: data,
success: function(data) {
console.log("success")
console.log(data)
if (data.products.length > 0 ) {
productRows.html("")
$(cartBody).empty()
$.each(data.products, function(index, value) {
console.log(value)
console.log(data.count)
cartBody.append("<tr><td>" + value.quantity + " x" + "</td><td>"+ value.name + "</td><td>" + "£" + value.price + "</td></tr>")
})
cartTotal.find(".cart-total").text(data.total)
console.log(data.total)
} else {
window.location.href = currentUrl
}
},
error: function(errorData) {
console.log("error")
console.log(errorData)
}
})
}
HTML Form:
<div>
<h4>This is your shopping cart</h4>
<table class="cart-table">
<tr>These are the items in your basket and their respective totals</tr><br>
<tbody class="cart-body">
{% for item in cart.items %}
<form method="POST" action='{% url "shopping-cart-remove" %}'>
{% csrf_token %}
<tr class="cart-product"><span class="cart-item-quanity">{{ item.quantity }}</span> x {{ item.product.name }} = {{ item.subtotal }}</tr>
<input type="hidden" name='id' value='{{ item.product.id }}'>
<span class='remove-span'><button>remove</button><br></span>
</form>
</tbody>
{% endfor %}
<tr class="cart-total-sec"><td class="cart-price">{{ cart.total }}</td></tr>
</div>
Any help is really appreciated.
First you are making mistake, as i can see there's form in table, on refreshing you will lose that form so i guess you should append items in form not in .cart-body.
And for emptying html use cartBody.html(""); and you don't have to use productRows.html("") at all.
The issue as pointed out by Ultrazz008, was that the HTML was incorrectly formatted. For reference:
<table class="cart-table">
<tbody class="cart-body">
<form method="POST" class='form-product-ajax' action='{% url "shopping-cart-remove" %}' data-endpoint='{% url "shopping-cart-remove" %}'>
{% csrf_token %} {% for item in cart.items %}
<tr class=cart-product>
<td>{{ item.quantity}} x {{ item.product.name }} {{ item.subtotal }}
<input type="hidden" name='id' value='{{ item.product.id }}'>
<button class='remove-btn'>remove</button>
</td>
{% endfor %}
</tr>
</form>
</tbody>
<tr class="cart-total-sec">
<td class="cart-price">{{ cart.total }}</td>
</tr>
</table>
SO I have a div which displays information from arrays. With my ajax script I am increasing a value in an array and I want the whole div to change accordingly... I have already made these changes, but I dont know how to change the whole div? DO I use .attr or something else?
This is the twig:
{% for key, item in cart %}
{% if key == info.id %}
<div class="input-append">
<input class="span1" style="max-width:34px" placeholder="{{ key }}" value="{{ item }}" id="appendedInputButtons" size="16" type="text" data-id="{{ key }}"/>
<i class="icon-minus"></i>
<i class="icon-plus"></i>
<button class="btn btn-danger" type="button"><a href="{{ path('cart_remove', {'id': key}) }}"><i class="icon-remove icon-white"></i></button>
</div>
</td>
<td>{{ info.getQtyPrice(item)|number_format(2, '.', ',')}}</td>
<td>{{ info.getQtyDiscount(item)|number_format(2, '.', ',')}}</td>
<td>{{ info.getQtyTax(item)|number_format(2, '.', ',') }}</td>
<td>{{ info.getQtyFinal(item)|number_format(2, '.', ',') }}</td>
</tr>
{% endif %}
{% endfor %}
With Ajax I am increasing or decreasing the quantity(quantity is the variable item). When I increase or decrease the quantity I want the whole div to change accordingly. For example if the products quantity is 1 the price is 50, when I increase the quantity I want the price to change to 100. This is my script:
$(document).ready(function () {
$(document).on('click', '.add', function (e) {
$this = $(this);
$.ajax({
type: 'POST',
url: 'add/quantity',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$this.parent('.input-append').val(data.amount)
}
}
});
});
Right now the line: $this.parent('.input-append').val(data.amount) only changes the quantity in the input field.
How can I change the whole div with the prices?
Answer
Thank you for your help. this code did the trick: $('.table').load(" .table");
add a class to each td you want to update like this :
<td class="qtyprice">{{ info.getQtyPrice(item)|number_format(2, '.', ',')}}</td>
<td class="qtytax">{{ info.getQtyDiscount(item)|number_format(2, '.', ',')}}</td>
<td>{{ info.getQtyTax(item)|number_format(2, '.', ',') }}</td>
<td class="qtyfinal">{{ info.getQtyFinal(item)|number_format(2, '.', ',') }}</td>
and your Ajax you update those fields accordingly by selecting them by class :
success: function (data) {
if(data.success == false){
alert('error')
}else{
$this.closest('tr').find('.input-append').val(data.amount) ;
$this.closest('tr').find('.qtyprice').val(data.qtyprice) ;
$this.closest('tr').find('.qtytax').val(data.qtytax) ;
$this.closest('tr').find('.qtyfinal').val(data.qtyfinal) ;
}
}
your ajax response data needs to have all the prices on success.
Hi im having problem understand how to use datables in datatable.net in laravel.
Here is my Controller to generate the view
public function hospital()
{
$view = View::make('doctor.hospital', array());
return $view;
}
Here is my Controller for the datatable
public function allHospitalList()
{
$hospitals = HospitalList::hospitalsList();
return $hospitals;
}
Here is my Model
<?php
class HospitalList extends Eloquent {
protected $table = 'hospital_list';
public static function hospitalsList()
{
$data = HospitalList::join('Cities', 'Cities.id', '=', 'hospital_list.Address3')
->join('Province', 'Province.id', '=', 'hospital_list.Address4')
// ->paginate(10);
->get();
return $data;
}
}
and in my routes
Route::get('hospital',
array(
'uses'=>'DoctorController#hospital'
)
);
/* datatables */
Route::get('hospitallist',
array(
'as' => 'dt_hospital_all',
'uses'=>'DatatableController#allHospitalList'
));
and this is my table in the view
<table class="table table-hover radius" id="hospitaList">
<thead>
<tr>
<th>
</th>
<th>
Name
</th>
<th>
Type
</th>
<th>
Contact
</th>
</tr>
</thead>
<tbody>
<?php
foreach ($hospitals as $hospital)
{?>
<tr>
<td>
<!-- <span class="row-details row-details-close"></span> -->
<button type="button" class="btn red"><i class="fa fa-plus-square-o"></i>
</button>
</td>
<td>
{{ $hospital->name }}</br>
{{ $hospital->address1 }} {{ $hospital->address2 }}
<?php
if($hospital->address1 != '' || $hospital->address2 != '') echo "</br>";
?>
{{ $hospital->City }}, {{ $hospital->province }}
</td>
<td>
{{ $hospital->type }}
</td>
<td>
{{ $hospital->contact }}
</td>
</tr>
<?php
}
?>
</tbody>
</table>
and this is my javascript on the view
var url = "{{ URL::route('dt_hospital_all') }}";
$(document).ready(function() {
$('#hospitalList').dataTable( {
"processing": true,
"serverSide": true,
"ajax": url
} );
} );
im getting an error
Undefined variable: hospitals (View: /Applications/AMPPS/www/docsearch/app/views/doctor/hospital.blade.php)
Right now, you are referring to a non-exisiting variable, $hospitals.
You need to provide $hospitals to your View:
View::make('doctor.hospital')->with('hospitals', Hospital::all())
This assumes you have a Hospital model.
I use Silex Frame Work and I am trying to delete files in backend that listed in a table using the following code but fire bug is given me an error message "invalid regular expression flag a" And when i click on the DELETE link it goes to a white page.The code is:
<script type="text/javascript">
$(document).ready(function(){
$(".delete-file").live('click', function() {
itemRow = $(this).parent().parent().parent();
fileId = $(this).attr('file_id');
deleteURL = $(this).attr('href');
var html = "<div> Are you sure, you want to DELETE this file? </div>";
var dialog = $(html).dialog({
buttons: {
"Ok": function() {
$.ajax({
url : deleteURL,
type : 'DELETE',
success : function(data) {
itemRow.remove();
dialog.dialog("close");
},
error : function() {
dialog.dialog("close");
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
return false;
});
});
</script>
and i use:
{% for row in result %}
<tr class="content {{ cycle(['odd', 'even'], loop.index) }}">
<td> {{ row.name }} </td>
<td> {{ row.user.username }} </td>
<td class="url"> {{ row.path | truncate(30) }} </td>
<td> <img src="{{conf('base_url')}}/{{row.thumbnail}}"/> </td>
<td class="url"> {{ row.size | bytes_format}} </td>
<td> {{ row.description }} </td>
<td>
<span>DELETE</span>
</td>
</tr>
{% endfor %}
I found it. it's just because of giving wrong path to my .js files!!