Correct order for script files loading for gentelella template

Question

I'm confused to how to solve this problem

this is the Gentelella layout template:

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Gentellela Alela! | </title>
        <!-- Bootstrap -->
        <link href="{{ asset("css/bootstrap.min.css") }}" rel="stylesheet">
        <!-- Font Awesome -->
        <link href="{{ asset("css/font-awesome.min.css") }}" rel="stylesheet">
        <!-- Custom Theme Style -->
        <link href="{{ asset("css/gentelella.min.css") }}" rel="stylesheet">
        @stack('stylesheets')
    </head>
    <body class="nav-md">
        <div class="container body">
            <div class="main_container">
                @include('includes/sidebar')
                @include('includes/topbar')
                @yield('main_container')
                @include('includes/footer')
            </div>
        </div>
        <!-- jQuery -->
        <script src="{{ asset("js/jquery.min.js") }}"></script>
        <!-- Bootstrap -->
        <script src="{{ asset("js/bootstrap.min.js") }}"></script>
        <!-- Custom Theme Scripts -->
        <script src="{{ asset("js/gentelella.min.js") }}"></script>
        @stack('scripts')
    </body>
</html>

As you can see there is an head part that load css and a footer part that's loads script files. In my single page implementation i put a part like this:

 @push('scripts')
    <script>
        var cancButton='{!! __('messages.tempCreat_txtCanc') !!}';
        var nextButton='{!! __('messages.tempCreat_txthNext') !!}';
        var prevButton='{!! __('messages.tempCreat_txtPrev') !!}';
    </script>
    <script src="{{asset('js/jquery-ui.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/mxClient.js')}}"></script>
    <script type="text/javascript" src="{{asset("js/app.js")}}"></script>
    <script src={{asset('/js/bootstrap2-toggle.min.js')}}></script>
    <script src="{{asset("js/jquery.smartWizard.js")}}"></script>
    <script  src="{{ asset("css/ie10-viewport-bug-workaround.js") }}"></script>
    <script type="text/javascript" src="{{ asset("js/xml2json.js") }}"></script>
    <script src={{asset('/js/stepper2.js')}}></script>
    <script src={{asset('/js/validationJquery.js')}}></script>
    <script src="{{asset('js/funzioniEditor.js')}}"></script>
    <script src="{{ asset('js/jqueryEditorFunction.js') }}"></script>
    @endpush

as you can see "I push" files in the stack('script') part that is in the bottom of the page.

the problem is with plugin like:

<script src="{{asset("js/jquery.smartWizard.js")}}"></script>

That cause that you see the raw html, before that the plugin file is loaded...this is no good! If im moving things to the head is a problem too, because the sidebar menu stops magically to works...

The function that render smart wizard is in a $(document).ready(function(){} function yet.

One thing you might want to take a look at is at all your single and double quotes. They are all mixed and some aren't closed the way they should. — SuperDJ, Mar 29 '18 at 10:35
There are several missing quotes in the src attributes of the second code snippet. — Pep Lainez, Mar 29 '18 at 11:05
I use @extends('layouts.blank') in my view and I declare Js libraries after the extend — ctbs1, Mar 29 '18 at 11:13
there is no problem about single or double ' and " all works properly... and loaded. I found a workaround but its a workaround not a solution! ill post code later... — JahStation, Mar 29 '18 at 12:04

score 0 · Answer 1 · answered Mar 29 '18 at 13:25

I made this workround

i put on the main div that contains all the wizard this:

                    <div id="smartwizard" style="visibility: hidden;">

then simply after the function that render wizard I call:

$('#smartwizard').css('visibility','visible');

I've tried even "toggle" or "show" but this is the only way thats make the trick works... So now the page is blank and then rendered with the complete wizard!

Correct order for script files loading for gentelella template

1 Answers1