Scripts loaded in default template not working in views

The <script> that you show is in the "content" section.

That should be in the template (perhaps partials.scriptsFooter) just before the closing </body> tag, but after your other scripts (jquery etc.).

Like this: file: /partials/scriptsFooter.php

    <script src="{{ your_other_scripts_like_jquery_etc }}"></script>

    <script>  
        $(document).ready(function() {
            // ...
        });
    </script>
</body>

In your web browser right click and inspect element. You'll probably find 404 errors for your CSS and jQuery files not found. As your application grows the files get deeper and your URL or src isn't correct.

Easiest way is pull in Illuminate Html package and utilize the html::style and script methods. Or you can use the URL::to method right out of the box.

If you include JQuery (and other scrips) in your partials.scriptsFooter and try to call $(document).ready() before that you will get the $ is not defined error because you are trying to use JQuery before actually importing it.

Solution: either place your scripts in a .js file that you import after you import JQuery or simply move JQuery to your partials.head below the CSS.

Edit: the guys above beat me, I'm a slow typer :P

As @perkola say you need to import jQuery before your script. On your code, we can see that content is before your partials.scriptsFooter.

@Marlon Actually I wouldn't recommend loading JQuery in the head section as perkola suggests.

It's best practice to load your javascripts at the end of the document so that it doesn't delay the loading of the rest of your page, amongst other things.

Just ensure that JQuery is loaded before other scripts that rely on it. Generally it should be the first script loaded.

Adding to what's already been said, if you really need/want to have your script in your view, add it to another section that gets yielded into your partials.scriptsFooter and it will behave the same as if you were to have put it there directly.

In other words:

partials.scriptsFooter:

    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <!-- Other scripts here... -->
    @yield('view.scripts')
  </body>
</html>

your-view.blade.php:

@extends('app')

@section('content')
    <!-- This content will be inserted into the layout in place of the yield(content) -->
    Any content of view here
@endsection

@section('view.scripts')
    <script>  
        $(document).ready(function() {
        // This will now be added just before the closing body tag, after jquery, 
                // and thus should work fine.
        });

        // However, to not worry about potential collisions if you were to use multiple
        // js libraries that want to use the dollar sign identifier, you might be better off
        // doing something like this, and running jQuery in no conflict mode:
        (function($) {
            // your normal jQuery code goes here.
            $(document).ready(function() { /* Do stuff */ });
        })(jQuery);
    </script>
@endsection

See more info here about jQuery no conflict mode.

Thank you all for the answers the problem is solved with a partials.script.

I have used the clues of @sitesense, @AtoZ and @perkola.

The idea of @willvincent is very cool too.

Again thank you all

User @stack('scripts') after jquery

and use @push('scripts')