The code I typed on the button does not work /laravel8-CodePudding

I want to make a button that gives a reminder (message) when pressed, but the button did not work. the button's code is in the master page

(i wrote the remaining two pages in the comments because when I wrote in the post it gave an error)

here is my master.blade.php;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>E-Comm Project</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    
</body>
<script>
    $(document).ready(function())
    {
      $("button").click(function())
       {
         alert("button works correctly")
       }
    }
</script>
</html>

CodePudding user response：

I think you need to add a reference to your content section in the master.blade.php. Something like below!

 <body>
  @yield('content')
 </body>

And login.blade.php would be as below.

@section('content') <h1>Hello,world</h1> <button >Click</button> @endsection

PS:https://laravel.com/docs/5.0/templates

CodePudding user response：

Where is your @yeild() method on the main page. As the above comment mentioned. We need more information about the issue. I don't see any button element in the shared snippet.

CodePudding user response：

Add the following in your master.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>E-Comm Project</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
    @yield('content')
</body>
<script>
    $(document).ready(function(){
        $(document).on('click', 'button', function(event){
            alert("button works correctly");
        });
    });
</script>
</html>

And the following in your login.blade.php

    @extends('master')
@section('content')
<h1>Hello,world</h1> 
<button >Click</button>
@endsection