Injecting jquery code from child and jquery include in parent [Blade - Laravel]

Question

im using laravel and blade for templates. I have a problem, i have a base template called (base.blade.php), where i include all js files (jQuery too).

The problem comes when im child template (myadpack.blade.php extends from base.blade.php). I want to use jQuery in child, but it seems to be impossible, i can do normal js calls, but not using jQuery (that is included in parent). I paste these files here:

base.blade.php

<!DOCTYPE HTML>
<html>
<head>
    <title>Tonhits</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/bootstrap-theme.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/main.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/table.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/tablesaw.css') }}" />
    <link rel="stylesheet" href="{{ asset('http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css') }}" />

    @section('css')
    @show



</head>
<body class="no-sidebar">
<div id="page-wrapper">

    <!-- Header Wrapper -->
    <div id="header-wrapper">

        <!-- Header -->
        <div id="header" class="container">

            <!-- Logo -->
            <h1><a id="logo">Tonhits</a></h1>

            <!-- Nav -->
            @include('nav/nav_anon')

        </div>

    </div>

    <!-- Main Wrapper -->
    <div id="main-wrapper">

        <!-- Main -->
        <div id="page" class="container">

            <!-- Main Heading -->
            <div class="title-heading">
                <h2>@yield('titleBig')</h2>
                <p> @yield('titleSmall')</p>
            </div>

            <!-- Main Content -->
            <div id="main">
                <div class="row">
                    <div id="content" class="12u">
                        <!-- <header>
                            <h2>Nunc fringilla dis natoque amet gravida turpis</h2>
                        </header> -->
                        @section('content')
                        @show
                    </div>
                </div>
            </div>
            <!-- Main Content -->

        </div>
        <!-- Main -->

    </div>



    <!-- Copyright -->
    <div id="copyright">
        Tonhits. All rights reserved
    </div>

</div>
<!-- Scripts -->


<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/jquery.dropotron.min.js') }}"></script>
<script src="{{ asset('js/skel.min.js') }}"></script>
<script src="{{ asset('js/util.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<script src="{{ asset('js/tablesaw.js') }}"></script>
<script src="{{ asset('http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js') }}"></script>

@yield('js')


</body>
</html>

myadpack.blade.php

@extends('base')

@section('titleBig',    'Me')
@section('titleSmall',  'My adpack overwiev')


</script>
@section('js')
<script type="text/javascript" >
        $(document).on('ready', function(){
            alert("a");
        });
        </script>
@endsection


@section('content')


    Here you can see your purchased adpacks, so you can have a detailed tracing.
    <table id="adpacks">
        <tr>
            <th>Test</th>
            <th>Test</th>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data 2</td>
        </tr>

    </table>
@endsection

In parent i tried with yield, section, and nothing.

What it could be?

Thank you for reading me.

You have </script> without starting <script> in myadpack.blade.php. Also, what error(s) do you see in a browser console? Also, do you see $(document).on('ready' part when you use browser's view source feature? — Alexey Mezenin

Jilson Thomas Jilson Thomas · Accepted Answer · 2016-03-19T14:33:31

base.blade.php

<!DOCTYPE HTML>
<html>

  <head>
    <title>Tonhits</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/bootstrap-theme.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/main.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/table.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/tablesaw.css') }}" />
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" /> 
    @yield('css')
  </head>
  <body class="no-sidebar">
    <div id="page-wrapper">
      <!-- Header Wrapper -->
      <div id="header-wrapper">
        <!-- Header -->
        <div id="header" class="container">

          <!-- Logo -->
          <h1><a id="logo">Tonhits</a></h1>
          <!-- Nav -->
          @include('nav/nav_anon')
        </div>
      </div>
      <!-- Main Wrapper -->
      <div id="main-wrapper">

        <!-- Main -->
        <div id="page" class="container">

          <!-- Main Heading -->
          <div class="title-heading">
            <h2>@yield('titleBig')</h2>
            <p> @yield('titleSmall')</p>
          </div>

          <!-- Main Content -->
          <div id="main">
            <div class="row">
              <div id="content" class="12u">
                <!-- <header>
                                <h2>Nunc fringilla dis natoque amet gravida turpis</h2>
                            </header> -->
                @yield('content')
              </div>
            </div>
          </div>
          <!-- Main Content -->

        </div>
        <!-- Main -->

      </div>
      <!-- Copyright -->
      <div id="copyright">
        Tonhits. All rights reserved
      </div>

    </div>
    <!-- Scripts -->

    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/jquery.dropotron.min.js') }}"></script>
    <script src="{{ asset('js/skel.min.js') }}"></script>
    <script src="{{ asset('js/util.js') }}"></script>
    <script src="{{ asset('js/main.js') }}"></script>
    <script src="{{ asset('js/tablesaw.js') }}"></script>
    <script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

    @yield('js')


  </body>

</html>

myadpack.blade.php

@extends('base') 
@section('titleBig', 'Me') 
@section('titleSmall', 'My adpack overwiev') 

@section('content') 
  Here you can see your purchased adpacks, so you can have a detailed tracing.
  <table id="adpacks">
    <tr>
      <th>Test</th>
      <th>Test</th>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data 2</td>
    </tr>

  </table>
@endsection
@section('js')
  <script type="text/javascript">
    $(document).on('ready', function() {
      alert("a");
    });

  </script>
@endsection

Injecting jquery code from child and jquery include in parent [Blade - Laravel]

1 Answers