My script from the view blade is executing first than my scripts in the layout view
Hi everyone i’m learning to use Laravel and actually i want to use some code javascript in it, i’m using a layout i show you in the next code
<code><!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>@yield('title')</title>
@vite('resources/css/app.css')
</head>
<body class="bg-slate-900 text-white overflow-hidden">
<header class="flex flex-row p-8 bg-slate-950">
<div>
<h3 class="font-bold text-2xl">@yield('nav-title')</h3>
</div>
<nav class="w-full flex flex-row-reverse ">
@yield('nav-options')
</nav>
</header>
<div class="flex flex-row">
<aside class=" bg-slate-950 h-dvh">
<nav class=" flex flex-col w-40">
<a href="{{ route('productos.inicio') }}" class=" text-center flex flex-col hover:bg-green-500 p-4 transition-colors"> <i class="fa-solid fa-bag-shopping text-zinc-50"></i> Productos</a>
<a href="" class=" text-center flex flex-col hover:bg-blue-500 p-4 transition-colors"> <i class="fa-solid fa-book-open"></i>Categorias</a>
<a href="" class=" text-center flex flex-col hover:bg-yellow-500 p-4 transition-colors"> <i class="fa-solid fa-wallet"></i>Ventas</a>
<a href=""></a>
</nav>
</aside>
<main class=" m-8 w-full max-h-full overflow-auto">
@yield('content')
</main>
</div>
<footer>
@yield('footer-content')
</footer>
@vite('resources/js/app.js')
<script>
let token;
//Obtener token para realizar las solicitudes post
fetch('one_fetch_petition')
.then(response => {
if (!response.ok) {
throw new Error('Error en la solicitud: ' + response.status);
}
return response.json();
})
.then(data => {
// Éxito, manejar la respuesta JSON
token = data.token;
})
.catch(error => {
// Si no se obtuvo resultado el token será 0
token = 0;
console.log("Error al hacer la petición del token: " + error);
});
</script>
@stack('scripts')
</body>
</html>
</code>
<code><!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>@yield('title')</title>
@vite('resources/css/app.css')
</head>
<body class="bg-slate-900 text-white overflow-hidden">
<header class="flex flex-row p-8 bg-slate-950">
<div>
<h3 class="font-bold text-2xl">@yield('nav-title')</h3>
</div>
<nav class="w-full flex flex-row-reverse ">
@yield('nav-options')
</nav>
</header>
<div class="flex flex-row">
<aside class=" bg-slate-950 h-dvh">
<nav class=" flex flex-col w-40">
<a href="{{ route('productos.inicio') }}" class=" text-center flex flex-col hover:bg-green-500 p-4 transition-colors"> <i class="fa-solid fa-bag-shopping text-zinc-50"></i> Productos</a>
<a href="" class=" text-center flex flex-col hover:bg-blue-500 p-4 transition-colors"> <i class="fa-solid fa-book-open"></i>Categorias</a>
<a href="" class=" text-center flex flex-col hover:bg-yellow-500 p-4 transition-colors"> <i class="fa-solid fa-wallet"></i>Ventas</a>
<a href=""></a>
</nav>
</aside>
<main class=" m-8 w-full max-h-full overflow-auto">
@yield('content')
</main>
</div>
<footer>
@yield('footer-content')
</footer>
@vite('resources/js/app.js')
<script>
let token;
//Obtener token para realizar las solicitudes post
fetch('one_fetch_petition')
.then(response => {
if (!response.ok) {
throw new Error('Error en la solicitud: ' + response.status);
}
return response.json();
})
.then(data => {
// Éxito, manejar la respuesta JSON
token = data.token;
})
.catch(error => {
// Si no se obtuvo resultado el token será 0
token = 0;
console.log("Error al hacer la petición del token: " + error);
});
</script>
@stack('scripts')
</body>
</html>
</code>
<!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>@yield('title')</title>
@vite('resources/css/app.css')
</head>
<body class="bg-slate-900 text-white overflow-hidden">
<header class="flex flex-row p-8 bg-slate-950">
<div>
<h3 class="font-bold text-2xl">@yield('nav-title')</h3>
</div>
<nav class="w-full flex flex-row-reverse ">
@yield('nav-options')
</nav>
</header>
<div class="flex flex-row">
<aside class=" bg-slate-950 h-dvh">
<nav class=" flex flex-col w-40">
<a href="{{ route('productos.inicio') }}" class=" text-center flex flex-col hover:bg-green-500 p-4 transition-colors"> <i class="fa-solid fa-bag-shopping text-zinc-50"></i> Productos</a>
<a href="" class=" text-center flex flex-col hover:bg-blue-500 p-4 transition-colors"> <i class="fa-solid fa-book-open"></i>Categorias</a>
<a href="" class=" text-center flex flex-col hover:bg-yellow-500 p-4 transition-colors"> <i class="fa-solid fa-wallet"></i>Ventas</a>
<a href=""></a>
</nav>
</aside>
<main class=" m-8 w-full max-h-full overflow-auto">
@yield('content')
</main>
</div>
<footer>
@yield('footer-content')
</footer>
@vite('resources/js/app.js')
<script>
let token;
//Obtener token para realizar las solicitudes post
fetch('one_fetch_petition')
.then(response => {
if (!response.ok) {
throw new Error('Error en la solicitud: ' + response.status);
}
return response.json();
})
.then(data => {
// Éxito, manejar la respuesta JSON
token = data.token;
})
.catch(error => {
// Si no se obtuvo resultado el token será 0
token = 0;
console.log("Error al hacer la petición del token: " + error);
});
</script>
@stack('scripts')
</body>
</html>
The problem is, when i use it another view using this layout it chargues first the script in that view when i think it should be reverse i mean, the first script charged should be from the layout and i can’t use code from app.js for that problem 🙁
I’ll adjunt a picture showing that i want to express
enter image description here
New contributor
Jonathan JV is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.