1 回答

TA貢獻1812條經驗 獲得超5個贊
我終于修復了它,它似乎與我在子視圖中插入腳本代碼的方式有問題。我必須閱讀有關堆棧的內容(檢查https://laravel.com/docs/7.x/blade#stacks),這似乎是在父視圖中插入腳本的正確方法。
父視圖與問題中發布的相同,但我取消了頭部腳本的注釋,并將其放在關閉正文標簽之前:
@stack('script')
我的孩子們的視圖現在看起來像這樣(重點關注push和endpush部分,這是有問題的腳本):
@extends('layouts.app')
@section('grid')
<!-- Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Style css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
@endsection
@push('script')
<script>
x = document.getElementById("alertabien");
y = document.getElementById("alertamal");
x.style.display = "none";
y.style.display = "none";
@foreach($productos as $product)
document.getElementById('postForm{{$product->id}}').addEventListener('submit', prueba{{$product->id}});
function prueba{{$product->id}}(e){
e.preventDefault();
var id = document.getElementById({{$product->id}}).value;
var params = "idproducto="+id+"&idcarrito="+{{$carrito_id[0]->id}};
xhr = new XMLHttpRequest();
xhr.open('POST', '/carrito', true);
xhr.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
xhr.setRequestHeader('X-CSRF-TOKEN', "{{ csrf_token() }}");
xhr.onload = function(){
if(this.responseText){
document.getElementById("alertamal").innerHTML = "Lo sentimos, ha habido un error en la base de datos, por favor recargue la página.";
y.style.display = "block";
$("#alertamal").fadeIn("slow");
$("#alertamal").fadeOut(8000);
} else {
document.getElementById("alertabien").innerHTML = "?FELICIDADES! Ha a?adido correctamente su producto al carrito de compras";
x.style.display = "block";
$("#alertabien").fadeIn("slow");
$("#alertabien").fadeOut(8000);
}
}
xhr.send(params);
}
@endforeach
</script>
@endpush
@section('content')
<div class="alert alert-success" id="alertabien">
</div>
<div class="alert alert-danger" id="alertamal">
</div>
<div class="container">
<h1 class="text-center">NUESTROS PRODUCTOS</h1>
<hr>
<div class="row">
@foreach ($productos as $producto)
<div class="col-md-4 product-grid">
<div class="image">
<a href="#">
<img src="storage/app/images/apple-watch.jpg" class="w-100">
<div class="overlay">
<div class="detail">View Details</div>
</div>
</a>
</div>
<form id="postForm{{$producto->id}}" method="POST" class="postForm">
@csrf
<input type="hidden" id="{{$producto->id}}" name="producto_id" class="producto_id" value="{{$producto->id}}">
<h5 class="text-center">{{$producto->nombre}}</h5>
<h5 class="text-center">Price: {{$producto->precio}}</h5>
<input id="guarda" name="guarda"type="submit" value="A?ADIR AL CARRITO" class="btn buy btn-enviar">
</form>
</div>
<!-- /Product -->
@endforeach
</div>
</div>
@endsection
- 1 回答
- 0 關注
- 99 瀏覽
添加回答
舉報