Laravel - Problema con javascript en Laravel

Problema con javascript en Laravel

Publicado por Jonatan (1 intervención) el 21/06/2017 19:39:32

Tengo un problema al intentar utilizar javascript para implementar un datepicker. El código es bien simple, actualmente estoy utilizando el sistema de validación que proporciona laravel, por ende necesito usar el archivo app.js (incluido al final del archivo app.blade.php), el problema viene al usar el código javascript en el archivo home.blade.php que no me aplica el datepicker (javascript) que estoy tratando de implementar. Ya tengo divisado el problemas a medias, cuando elimino la linea

<script src="{{ asset('js/app.js') }}"></script>

del archivo app.blade.php, el datepicker funciona perfectamente, pero me deja de funcionar el botón de cierre de sesión de laravel. Cuando vuelvo a poner la linea me deja de funcionar el datepicker y vuelve a funcionar el cierre de sesión de laravel.

A continuación dejo el código de los dos archivos..
Desde ya muchas gracias por su ayuda..

archivo app.blade.php

<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->

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

</head>

<body>

    <div id="app">

        <nav class="navbar navbar-default navbar-static-top">

            <div class="container">

                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">

                        <span class="sr-only">Toggle Navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                    <!-- Branding Image -->

                    <a class="navbar-brand" href="{{ url('/') }}">

                        {{ config('app.name', 'Laravel') }}

                    </a>

                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">

                    <!-- Left Side Of Navbar -->

                    <ul class="nav navbar-nav">

                        &nbsp;

                    </ul>

                    <!-- Right Side Of Navbar -->

                    <ul class="nav navbar-nav navbar-right">

                        <!-- Authentication Links -->

                        @if (Auth::guest())

                            <li><a href="{{ route('login') }}">Login</a></li>

                            <li><a href="{{ route('register') }}">Register</a></li>

                        @else

                            <li class="dropdown">

                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">

                                    {{ Auth::user()->name }} <span class="caret"></span>

                                </a>

                                <ul class="dropdown-menu" role="menu">

                                    <li>

                                        <a href="{{ route('logout') }}"

                                            onclick="event.preventDefault();

                                                     document.getElementById('logout-form').submit();">

                                            Logout

                                        </a>

                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">

                                            {{ csrf_field() }}

                                        </form>

                                    </li>

                                </ul>

                            </li>

                        @endif

                    </ul>

                </div>

            </div>

        </nav>

        @yield('content')

    </div>

    <!-- Scripts -->

    <script src="{{ asset('js/app.js') }}"></script>

</body>

</html>

archivo home.blade.php

@extends('layouts.app')

@section('content')

<div class="container">

    <div class="row">

        <div class="col-md-8 col-md-offset-2">

            <div class="panel panel-default">

                <div class="panel-heading">Dashboard</div>

                Fecha

                <div id="sandbox-container">

                    <input type="text" class="form-control">

                </div>

                <div class="panel-body">

                </div>

            </div>

        </div>

    </div>

</div>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

    <link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<script src="datetimepicker\js\bootstrap-datepicker.min.js"></script>

<script type="text/javascript">

$('#sandbox-container input').datepicker({

    format: "dd/mm/yyyy",

    language: "es",

    autoclose: true

});

</script>

@endsection

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Problema con javascript en Laravel

Publicado por titiricus (1 intervención) el 07/03/2023 13:28:34

tengo el mismo problema pero es en el redimensionado del navegador (tamaño movil - tamaño pc). Sobre tu problema es script JS deberia ubicarse dentro de app.js y no en home.blade.php, sugiero que el script lo muevas a un archivo .js externo ej. pick.js y en el app.blade.php le agregues una linea asi <script src="{{ asset('js/pick.js') }}"></script>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar