Почему код javascript не работает в файле лезвия laravel

avatar
Mahmoud Ashraf
8 августа 2021 в 22:46
92
0
1

Я пытаюсь создать веб-сайт социальной сети, когда я попытался сделать запрос AJAX для следующих функций, я обнаружил, что javascript не работает, кажется, что он не существует, но когда я проверяю элементы в браузере он существует.

Это мой файл 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() }}">

    <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">

    <!-- font awesome -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">
                {{ config('app.name', 'Laravel') }}
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="{{ __('Toggle navigation') }}">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left Side Of Navbar -->
                <ul class="navbar-nav mr-auto">

                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="navbar-nav ml-auto">
                    @auth
                        <li class="dropdown dropdown-notification nav-item  dropdown-notifications">
                            <a class="nav-link nav-link-label" href="#" data-toggle="dropdown">
                                <i class="fas fa-bell"></i>
                                <span
                                    class="badge badge-pill badge-default badge-danger badge-default badge-up badge-glow   notif-count"
                                    data-count="9">9</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
                                <li class="dropdown-menu-header">
                                    <h6 class="dropdown-header m-0 text-center">
                                        <span class="grey darken-2 text-center"> الرسائل</span>
                                    </h6>
                                </li>
                                <li class="scrollable-container ps-container ps-active-y media-list w-100">
                                    <a href="">
                                        <div class="media">
                                            <div class="media-body">
                                                <h6 class="media-heading text-right ">عنوان الاشعار </h6>
                                                <p class="notification-text font-small-3 text-muted text-right"> نص
                                                    الاشعار</p>
                                                <small style="direction: ltr;">
                                                    <p class=" text-muted text-right" style="direction: ltr;">
                                                        20-05-2020 - 06:00 pm
                                                    </p>
                                                    <br>

                                                </small>
                                            </div>
                                        </div>
                                    </a>

                                </li>
                                <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center" href="">
                                        جميع الاشعارات </a>
                                </li>
                            </ul>
                        </li>
                    @endauth
                    <!-- Authentication Links -->
                    @guest
                        @if (Route::has('login'))
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                        @endif

                        @if (Route::has('register'))
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                            </li>
                        @endif
                    @else
                        <li class="nav-item dropdown">
                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                {{ Auth::user()->name }}
                            </a>

                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{{ route('logout') }}"
                                    onclick="event.preventDefault();
                                                                                                                                                                                                                             document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </div>
                        </li>
                    @endguest
                </ul>
            </div>
        </div>
    </nav>

    <main class="py-4">
        @yield('content')
    </main>

    @stack('footer-js')
</body>

</html>

А это мой файл представления, который расширяет app.blade.php файл:

@extends('layouts.app')

@section('content')
    <div class="container emp-profile">
        <div class="row">
            <div class="col-md-4">
                <div class="profile-img">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS52y5aInsxSm31CvHOFHWujqUx_wWTS9iM6s7BAm21oEN_RiGoog"
                        alt="" />
                    <div class="file btn btn-lg btn-primary">
                        Change Photo
                        <input type="file" name="file" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="profile-head w-100">
                    <div class="d-flex  justify-content-between">
                        <div class="">
                            <h5>{{ $user->name }}</h5>
                            <h6>{{ $user->profile->job ? $user->profile->job : '"No job yet"' }}</h6>
                        </div>
                        @auth
                            @if (Auth::user()->id === $user->id)
                                <div class="col-md-4 ">
                                    <a href="{{ route('profile.edit', ['username' => $user->username]) }}"
                                        class="btn btn-dark">Edit Profile</a>
                                </div>
                            @endif
                        @endauth
                    </div>

                    <div class="row">
                        <div class="col-md-12">

                            <p>{{ $user->profile->descripyion ? $user->profile->descripyion : '"No Description yet"' }}
                            </p>
                        </div>
                    </div>
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                                aria-controls="home" aria-selected="true">About</a>
                        </li>
                    </ul>
                </div>
            </div>
            @auth
                @if (Auth::user()->id != $user->id)
                    <div class="col-md-2">
                        <form id="follows-form" action="{{ route('follow') }}" enctype="multipart/form-data" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-primary" id="submitBtn" name="follow">Follow</button>
                        </form>
                    </div>
                @endif
            @endauth

        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="profile-work">
                    <p>WORK LINK</p>
                    <a href="">Website Link</a><br />
                    <a href="">Bootsnipp Profile</a><br />
                    <a href="">Bootply Profile</a>
                    <p>SKILLS</p>
                    <a href="">Web Designer</a><br />
                    <a href="">Web Developer</a><br />
                    <a href="">WordPress</a><br />
                    <a href="">WooCommerce</a><br />
                    <a href="">PHP, .Net</a><br />
                </div>
            </div>
            <div class="col-md-8">
                <div class="">
                    <div class="row">
                        <div class="col-md-6">
                            <label>User Id</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{ $user->username }}</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Name</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{ $user->name }}</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Email</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{ $user->email }}</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label>Profession</label>
                        </div>
                        <div class="col-md-6">
                            <p>{{ $user->profile->job ? $user->profile->job : '"No job yet"' }}</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
@endsection

@push('footer-js')
    <script>
        console.log('it\'s working');
        const submitBtn = document.querySelector('#submitBtn');
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
        });

        function follow() {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', {{ route('follow', ['profile_id' => $user->id]) }});
            xhr.onreadystatechange = function() {
                if (xhr.readyState > 3 && xhr.status == 200) {
                    success(xhr.responseText);
                }
            }
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send({
                '_token': {{ csrf_token() }}
            });
            return xhr;
        }
    </script>
@endpush

Я не могу понять, почему, надеюсь, кто-нибудь мне поможет.

а вот и консоль: enter image description here

Источник
matiaslauriti
9 августа 2021 в 01:13
0

Кажется, ваш код правильный. Не могли бы вы посмотреть консоль вашего браузера и проверить, есть ли какая-либо ошибка javascript? Если бы вы могли прикрепить изображение с ошибкой, это было бы лучше.

Chris Haas
9 августа 2021 в 03:28
1

Вы говорите, что пытаетесь сделать AJAX-вызов конечной точке, а JavaScript не работает. Ожидаете ли вы, что вызов Ajax будет интерпретировать результат помимо текста?

Mahmoud Ashraf
9 августа 2021 в 10:36
0

@matiaslauriti Во-первых, спасибо за ваше время, и я отредактировал сообщение с ошибками консоли, как вы хотели.

Dharma Saputra
9 августа 2021 в 10:38
0

Попробуйте заменить '_token': {{ csrf_token() }} на '_token': "{{ csrf_token() }}".

Dharma Saputra
9 августа 2021 в 10:48
0

Судя по снимку экрана выше, в javascript есть синтаксическая ошибка. Не могли бы вы нажать на красный текст в консоли браузера (deon86:215)? Он покажет вам, в какой строке скрипта возникла проблема. Пожалуйста, поделитесь также его изображением.

Mahmoud Ashraf
9 августа 2021 в 10:57
0

Спасибо Все это было решено, когда я изменил эту строку xhr.open('POST', {{ route('follow', ['profile_id' => $user->id]) }}); на xhr.open('POST', "{{ route('follow', ['profile_id' => $user->id]) }}");

Mahmoud Ashraf
9 августа 2021 в 11:00
0

@DharmaSaputra, ваш комментарий помог мне решить эту проблему, большое спасибо.

Dharma Saputra
9 августа 2021 в 11:16
0

Добро пожаловать! Рад помочь.

Ответы (0)