【问题标题】:Inserted script is not working when I use laravel/ui当我使用 laravel/ui 时插入的脚本不起作用
【发布时间】:2020-11-24 19:16:10
【问题描述】:

我正在使用来自 node js 的模板(我只是使用它,因为我正在学习某些课程,这是其中的步骤之一)。考虑到我在不同帖子中阅读的内容,bootstrap 使用 jquery。然后,我意识到当我在其他视图中插入脚本时,头部的脚本会造成麻烦。

例如。 这是我的 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>
        <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>
<script>
    @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){
                    alert('Lo sentimos, ha habido un error en la base de datos, por favor recargue la página.');
                } else {
                    alert('¡Felicidades, ha agregado un nuevo producto a su carrito de compras!');
                }
            }
            xhr.send(params);
        } 
    @endforeach
</script>
@endsection

问题是,如果我让 app.blade.php 标签脚本退出注释,我的目标视图中的脚本(最后一个代码)将不再工作。

对于我的子视图,我想在我的数据库中插入一些数据而不返回视图。我根本没有产生任何错误。听起来很简单,如果我不在 app.blade.php 头中评论脚本,我的子视图中的脚本可以帮助我避免在我的数据库中插入数据时返回视图,但它不起作用,我可以通过一个简单的警报来更改最后一个,它不会返回任何内容,而是返回一个空白视图。

如果您知道我应该在文档中查看什么样的信息,我将不胜感激。

【问题讨论】:

  • “不工作”不是一个足够详细的诊断。您能否更好地描述您想要实现的目标、获得的输出(如果有),并特别注意此代码生成的 any 错误?这段代码应该做什么?尽可能具体是非常重要的,这可能需要在发布问题之前对问题的根本原因进行一些额外的调查。
  • 我明白,对不起,这是我第一次使用stackoverflow。
  • 学习没有错。我只是说你需要在这里帮助我们,否则我们所能做的就是说“那太不幸了”。如果您可以多挖掘一点并找出问题的性质,我们可能会为您解决它。仅仅把这个丢在这里是不够的。
  • 你说得对,我试图在问题中更好地解释,谢谢你的时间。

标签: javascript php node.js laravel vue.js


【解决方案1】:

我终于修复了它,我在孩子视图中插入脚本代码的方式似乎有问题。我必须阅读堆栈(检查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

【讨论】:

    猜你喜欢
    • 2021-01-28
    • 1970-01-01
    • 2014-03-14
    • 1970-01-01
    • 2020-04-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多