Loading overlay working in JSFiddle, but not in Laravel

Question

I have this simple blade.php with the following code:

<script type="javascript">
    $("#loading-button").click(
        function () {
                $("#loading-overlay").show();
        }
    );
</script>

<style type="text/css">

    #loading-screen {
        background: url({{asset('storage/loading.gif')}}) center center no-repeat;
        height: 100%;
        z-index: 20;
    }

    #loading-overlay {
        background: #e9e9e9;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }
</style>

<div id="loading-overlay">
    <div id="loading-screen"> LOADING...  </div>
</div>

In the other layout, I am loding jquery-3.2.1 and in my main page I am extending the main layout (where jquery is loaded) and including the loading layout from above. The page source looks like this after rendering (Chrome page source):

<script type="javascript">
    $("#loading-button").click(
        function () {
                $("#loading-overlay").show();
        }
    );
</script>

<style type="text/css">

    #loading-screen {
        background: url(http://localhost:8000/storage/loading.gif) center center no-repeat;
        height: 100%;
        z-index: 20;
    }

    #loading-overlay {
        background: #e9e9e9;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }
</style>

<div id="loading-overlay">
    <div id="loading-screen"> LOADING...  </div>
</div>
<button id="loading-button">TEST</button>

If I copy paste the code in JSFiddle, it works. It doesn't have the image, but that is not relevant, as it is stored locally, but the overlay displays as expected.

The main layout has this in it:

<script src="http://localhost:8000/js/jquery-3.2.1.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>

CONSOLE ERROR:

bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
    at bootstrap.min.js:7
    at bootstrap.min.js:7
    at bootstrap.min.js:7

You need to put your jQuery code in a document.ready event handler: `$(function() { /* your code here... */ });` Voting to close as a typo — Rory McCrossan, Jun 13 '17 at 08:45
First of all resolve this : https://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h — Govind Samrow, Jun 13 '17 at 09:22
The problem was that the script was before the button, not after it, so the button would not be taken into consideration from what I understand. — Alexandru Antochi, Jun 13 '17 at 10:57

score 1 · Answer 1 · edited Jun 13 '17 at 12:43

If I copy paste the code in JSFiddle, it works. It doesn't have the image, but that is not relevant, as it is stored locally, but the overlay displays as expected.

You can try:

You need add source code in your script js after jquery
In blade.php, I see you add code everywhere, so wrong. You can add css, js into blade.php but you need to add after jquery lib. => with laravel: use block or @stack('...')

Demo:

layout:

<script src="jquery.js" type="text/javascript"></script>
@stack('jsfile')

blade:

<div id="loading-overlay">
    <div id="loading-screen"> LOADING...  </div>
</div>
<button id="loading-button">TEST</button>

@push('jsfile')
<script type="javascript">
    $("#loading-button").click(
        function () {
                $("#loading-overlay").show();
        }
    );
</script>
@endpush

css same

Hope it will help you.

Thanks

Loading overlay working in JSFiddle, but not in Laravel

1 Answers1