0

I am trying to get a modal to show variable $token from controller upon redirect to a page. I've already folowing this step Laravel how to redirect back to boostrap modal dialog window but modal not showing.

This is my error when i console it

Uncaught ReferenceError: $ is not defined

Below is my Controller code

$token = time() . Str::random(2);
$token = 'REQ' . $token;
return redirect()->route('home')->with('req_submit', $token);

Below is my modal.blade

<!-- Request Modal -->
<div class="modal modal-danger fade" id="reqModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content bg-white">
            <div class="modal-body bg-white" style="border-radius:10px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="d-flex justify-content-center">
                    <img class="img-profile" src="backend/img/ticket.png" style="max-width: 20%;">
                </div>
                <div class="d-flex justify-content-center">
                    <h5 class="modal-title text-primary mb-2" id="exampleModalLabel">
                        Congratulations!
                    </h5>
                </div>
                <div class="d-flex justify-content-center">
                    <p>Your request has been made. Below is your request number</p>
                </div>
                <div class="bg-grad d-flex justify-content-center" style="border-radius: 5px;" id="reqno" onclick="reqnoFunction()">
                    @if (Session::get('req_submit'))
                    <input type="text" value="{{$token}}" id="input-reqno" class="text-center text-white py-2 " style="background-color: #2f1cac00;border: 0;width: auto;">
                    @endif
                    <button style="background-color: #2f1cac00;border: 0;" onclick="reqnoFunction()" id="button-reqno"><i class="fa fa-clone" style="color:white"></i></button>
                </div>

            </div>
        </div>
    </div>
    <!-- End Modal -->

Below is my view blade

<!-- Show modal Req submited-->
    @if(!empty(Session::get('req_submit')))
    <script>
        $(document).ready(function() {
            $('#reqModal').modal('show');
        });
    </script>
    @endif

Below is my script blade to make feature to copy variable $token

<script>
    function reqnoFunction() {

      //get copy
      var copyText = document.getElementById("input-reqno");


      // Select the text field
      copyText.select();
      copyText.setSelectionRange(0, 99999); // For mobile devices

      // Copy the text inside the text field
      navigator.clipboard.writeText(copyText.value);
    };
  </script>

And below is my layout structure :

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SDM</title>

    @include('includes.style')

</head>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">

        @include('includes.sidebar')

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                @include('includes.topbar')

                @yield('content')

            </div>
            <!-- End of Main Content -->

            @include('includes.footer')

        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->


    @include('includes.deletemodal')
    @include('includes.requestmodal')
    @include('includes.script')
</body>

</html>
Tika Putri
  • 1
  • 1

1 Answers1

0

The bootstrap Modal error is actually the result of you not including bootstrap's javascript before calling the modal function. Modal is defined in bootstrap.js and not in jQuery . It's also important to note that bootstrap actually needs jQuery to define the modal function , so it's vital that you include jQuery before including bootstrap's javascript. To avoid such error just be sure to include jQuery then bootstrap's javascript before you call the modal function.

Nima Patel
  • 296
  • 6