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
– Rory McCrossan, Commented Jun 13, 2017 at 8:45
First of all resolve this : stackoverflow.com/questions/34567939/… — Govind Samrow
– Govind Samrow, Commented Jun 13, 2017 at 9:22

Death-is-the-real-truth · Accepted Answer · 2017-06-13 12:43:34Z

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

Collectives™ on Stack Overflow

Loading overlay working in JSFiddle, but not in Laravel

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related