Вставленный скрипт не работает, когда я использую laravel / ui - PullRequest
0 голосов
/ 04 августа 2020

Я использую шаблон из 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 head, сценарий в представлении моих детей, который помогает мне избежать возврата представления при вставке данных в мою базу данных, просто не работы, я мог бы изменить это последнее с помощью простого предупреждения, и он ничего не вернет, а вернет пустое представление.

Если вы знаете, какую информацию мне следует искать в документации, я был бы признателен .

1 Ответ

0 голосов
/ 05 августа 2020

Я, наконец, исправил это, похоже, были проблемы с тем, как я вставлял свой код скрипта в представление моих детей. Мне пришлось читать о стеках (отметьте https://laravel.com/docs/7.x/blade#stacks), что кажется правильным способом вставки скриптов в ваше родительское представление.

Родительское представление такое же, как указано в вопросе , но я раскомментировал сценарий в голове и поместил это перед закрывающей меткой тела:

@stack('script')

И теперь мой вид детей выглядит следующим образом (сфокусируйтесь на части pu sh и endpu sh, которая это сценарий, в котором возникли проблемы):

@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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...