Level 102
So what happens ? Error in the console?
Sep 2, 2022
10
Level 20
How to hide session flash msg
My flash msg using Jquery to hide it after a specific time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Student</title>
</head>
<body>
<main>
@yield('content')
</main>
<footer class="flex justify-end" id="flashmsg">
@if (session()->has('success'))
<div class="fixed text-white bg-blue-500 rounded-lg shadow bottom-3 text-lg py-2 px-2 mr-5" id="successMessage">
<p>{{ session('success')}}</p>
</div>
@endif
</footer>
<script>
setTimeout(function() {
$('#successMessage').remove();
}, 30000);
</script>
</body>
</html>
Level 20
@Sinnbeck error GET http://127.0.0.1:8000/jquery-3.6.0.min.js net::ERR_ABORTED 404 (Not Found)
Level 102
@Shivamyadav So you dont have that file inside /public it seems. Add the file and try again. Or change the path to the correct path
Level 20
@Sinnbeck i am unable to understand sir what i have to do?
Level 102
@Shivamyadav Ok we will take a path at a time
On your computer, open your laravel project and open the folder named "public". Do you see a file named "jquery-3.6.0.min.js" ?
Level 20
@Sinnbeck I have changed the cdn link of the Jquery and console is clear but it's not working
Level 102
Also can you please show where you are adding that file in your html? It isnt in shown html
Level 102
See if the timeout is run
<script>
setTimeout(function() {
alert('timeout ran')
$('#successMessage').remove();
}, 30000);
</script>
Level 20
@Sinnbeck Jquery Cdn link
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
```
The code for flash message showing
```<footer class="flex justify-end" id="flashmsg">
@if (session()->has('success'))
<div class="fixed text-white bg-blue-500 rounded-lg shadow bottom-3 text-lg py-2 px-2 mr-5" id="successMessage">
<p>{{ session('success')}}</p>
</div>
@endif
</footer>
<script>
setTimeout(function() {
$('#flashmsg').remove();
}, 30000);
</script>
Level 20
$('#successMessage').fadeOut('fast');
}, 30000);
In this code by mistake i have given timeout is 3 minutes, after removing 1 zero it worked after 3 seconds.
Please or to participate in this conversation.