Laravel custom javascript on blade is not working

I have this situation where I want to pass data to a Bootstrap 4 modal. I have a list of records with their own links to edit and delete. Since I want to load a modal confirmation to delete a specific record, I need to pass several parameters, such as the ID for the destroy route.

I have tried the solution of this Laracasts forum. However, first of all, the script does not work, since the console.log does not output anything.

Note: I am using the app.js, so probably it has to do with the issue, but I haven't found a hint to solve this.

Here is my accounts.blade.php:

@extends('layouts.app')

@section('title','Accounts list')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        My accounts
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Accounts list</h5>
                        <h4><a href="{{ route('accounts.create') }}" class="btn btn-success">Create a new account</a></h4>
                        <hr>
                        <ul>
                            @forelse ($user->accounts as $account)
                                <li>
                                    <a href="{{ route('accounts.show',$account->id) }}" title="Your accounts blah">{{ $account->name }}</a> || <a href="{{ route('accounts.edit', $account->id) }}">Edit</a> |
                                    <button type="button" class="btn btn-outline-danger delete-company"
                                            data-toggle="modal"
                                            data-target="#exampleModal"
                                            data-id="{{$account->id}}"
                                            data-url="{{ route('accounts.destroy',['id'=>$account->id]) }}"
                                            data-name="{{$account->name}}"
                                    >
                                        Delete
                                    </button>

                                    {{--<a href="{{ route('accounts.destroy',$account->id) }}">Delete</a> </li>--}}
                                    {{--read this reference: https://medium.freecodecamp.org/custom-confirm-box-with-bootstrap-4-377aa67723c2--}}
                                    <hr>
                                </li>
                            @empty
                                <li class="card-text text-danger">You do not have an account yet.</li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--MODAL delete confirmation modal--}}
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete the <span id="accountname"></span> account?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Everything will be removed.
                </div>
                <div class="modal-footer">
                    {{--https://stackoverflow.com/a/33688683/1883256--}}
                    <form id="deleteform" action="" method="POST">
                        @csrf
                        @method('DELETE')
                        {{--
                        {{ csrf_field() }}
                        {{ method_field('DELETE') }}
                        --}}
                        <button type="submit" class="btn btn-outline-danger btn-sm">Yes, delete</button>
                    </form>
                    <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    {{--Ver: https://laracasts.com/discuss/channels/laravel/how-to-pass-value-to-bootstrap-modal-window?page=1#reply=508543 --}}
    <script>/*NOTHING HERE IS WORKING! WHY???*/
        $(document).ready(function () {
            console.log('testing'); // NOT WORKING!
            // For A Delete Record Popup
            $('.delete-company').click(function () {
                console.log('clicked!'); //NOT WORKING!!!
                var id = $(this).attr('data-id');
                var name = $(this).attr('data-name');
                var url = $(this).attr('data-url');

                $("#accountname").append(name);
                $("#deleteForm", 'input').val(id);
                $("#deleteForm").attr("action", url);
            });
        });
    </script>
@endsection

layouts/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') }} - @yield('title')</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" type="text/css">

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

    {{--Favicon--}}
    <link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
    <div id="app">
        @include('layouts.partials._nav')
        <div class="container">
            <main class="py-3">
                {{--Flash messages--}}
                @include('layouts.partials.flashMessages._messages_x')
                @include('layouts.partials.flashMessages._messages')
                @yield('content')
            </main>
        </div>
    </div>
</body>
</html>

As for the layouts app.blade.php I have tried both <script src="{{ asset('js/app.js') }}" defer></script> and <script src="{{ asset('js/app.js') }}"></script> without the defer and it does not work.

Why isn't this script working at all??? Is the app.jscausing the trouble? How do I make it work?

If only I could see the console.log() working, that'd be nice!

Answers:

Answer

Do one thing with proper way try this

layouts/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') }} - @yield('title')</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" type="text/css">

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

    {{--Favicon--}}
    <link rel="shortcut icon" href="{{ asset('img/favicon_io/favicon-16x16.png') }}">
</head>
<body>
    <div id="app">
        @include('layouts.partials._nav')
        <div class="container">
            <main class="py-3">
                {{--Flash messages--}}
                @include('layouts.partials.flashMessages._messages_x')
                @include('layouts.partials.flashMessages._messages')
                @yield('content')
            </main>
        </div>
    </div>
    @stack('scripts')
</body>
</html>

accounts.blade.php

@extends('layouts.app')

@section('title','Accounts list')

@section('content')
    //your content
@endsection

@push('scripts')
<script>
    console.log('hello');
</script>
@endpush

You can read about Stack

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.