亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當我使用 laravel/ui 時,插入的腳本不起作用

當我使用 laravel/ui 時,插入的腳本不起作用

PHP
躍然一笑 2023-09-15 10:18:29
我正在使用 Node js 中的模板(我只是使用它,因為我正在學習某些課程,這是步驟之一)??紤]到我在不同帖子中讀到的內容,bootstrap 使用 jquery。然后,我意識到當我在其他視圖中插入腳本時,head 中的腳本會造成麻煩。例如。這是我的 app.blade.php,在頭部,我將腳本作為注釋。<!doctype html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- CSRF Token -->    <meta name="csrf-token" content="{{ csrf_token() }}">    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">       <title>{{ config('app.name', 'Laravel') }}</title>    <!-- Scripts     <script src="{{ asset('js/app.js') }}" defer></script>}-->    <!-- Fonts -->    <link rel="dns-prefetch" href="//fonts.gstatic.com">    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">        <!-- 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">    <!-- Styles -->    <link href="{{ asset('css/app.css') }}" rel="stylesheet">    <link rel="stylesheet" type="text/css" href="css/style.css"></head>我一直遇到麻煩的觀點是這個@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@section('content')    <div class="container">        <h1 class="text-center">NUESTROS PRODUCTOS</h1>        <hr>問題是,如果我讓 app.blade.php 標簽腳本脫離注釋,我的目標視圖中的腳本(最后一個代碼)將不再工作。對于我的子視圖,我想在數據庫中插入一些數據而不返回視圖。我根本沒有收到任何錯誤生成。這聽起來很簡單,如果我不在我的 app.blade.php 頭中注釋腳本,那么我的子視圖中的腳本可以幫助我避免在我的數據庫中插入數據時返回視圖,但它不起作用,我可以通過一個簡單的警報來更改最后一個,它不會返回任何內容,而是返回一個空白視圖。如果您知道我應該在文檔中查看什么樣的信息,我將不勝感激。
查看完整描述

1 回答

?
慕雪6442864

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


查看完整回答
反對 回復 2023-09-15
  • 1 回答
  • 0 關注
  • 99 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號