Include Javascript

Question

I want to include some javascript code in my view, but have no idea of how to do it. I've look for that with no success, there is no clear reference of that.

I want to insert some selectable tables with bootstrap, the reference is at https://datatables.net/extensions/select/examples/styling/bootstrap4.html.

the javascript is this

  $(document).ready(function() {
      $('#example').DataTable( {
          select: true
      } );
  } );

the table is this

<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
...

They say that I have to include this javascript librarys

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js
https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js

But, where do I do that?? there's no html head...

I tryed the tipical

<script type="text/javascript">
  $(document).ready(function() {
      $('#example').DataTable( {
          select: true
      } );
  } );    

  document.write(5 + 6);
</script>

How do I fire the code, I suppose that it is done when the table loads, with the reference of #example...

Ok, I have try some things. Certainly I don't want you to solve my issue, but nothing has worked. I include almost the full code. It has to be working as in the example from the upper link . I don't know if the fact that laravel 5.5 is actually working with bootstrap 4 and not the included one is a factor, I don't know actually if it is working by default with jquery...

    @extends('layouts.app')

    @section('content')    


    @guest
    @else



        <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
          <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Venta</a>
        </nav>

        <div class="container-fluid">
          <div class="row">
            <nav class="col-md-1 d-block bg-light sidebar">
              <div class="sidebar-sticky">

                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                  <span>Acciones</span>
                  <a class="d-flex align-items-center text-muted" href="#">
                    <span data-feather="plus-circle"></span>
                  </a>
                </h6>

                <ul class="nav flex-column">
                  <li class="nav-item">
                      <span data-feather="home"></span>
                       <span class="sr-only"></span>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/gymmgr/public/notas/{{ $nota->idNota }}/edit">
                      <span data-feather="shopping-cart"></span>
                      Editar
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#"


                      onclick="
                        var result = confirm ('¿Estas seguro de que deseas borrar el grupo?');
                          if (result)
                          {
                            event.preventDefault();
                            document.getElementById('delete-form').submit();
                          }
                      "


                    >
                      <span data-feather="users"></span>
                      Borrar
                    </a>

                    <form id="delete-form" action="{{ route('notas.store')}}"
                      method="POST" style="display: none;">
                        <input type="hidden" name="_method" value="delete">
                        {{ csrf_field() }}
                    </form>

                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/gymmgr/public/notas/">
                      <span data-feather="users"></span>
                      Regresar
                    </a>
                  </li>

                </ul>

              </div>
            </nav>

            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
              <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h5">Nota de venta</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                  <div class="btn-group mr-2">
                    <button class="btn btn-sm btn-outline-secondary">Exportar</button>
                  </div>
                </div>
              </div>







                <div class="border-bottom">

                        <div class="col-md-8 order-md-1 ">
                          <form class="needs-validation" novalidate>


                              <div class="checkbox mb-3">
                                <label>
                                  <input type="checkbox" value="true"> Pagada
                                </label>
                              </div>

                              <div class="col-md-12">
                                <label for="usuario">Usuario</label>
                                <select class="custom-select d-block w-100" id="usuario">
                                  <option value="">Selecciona...</option>
                                  <option>United States</option>
                                </select>
                                <div class="invalid-feedback">
                                  Please select a valid country.
                                </div>
                              </div>
                              <p>
                                <div class="form-group">
                                  <label for="strNota">Comentarios</label>
                                  <textarea class="form-control" rows="3" id="strNota" name="text"></textarea>
                                </div>
                              </p>
                            <p>
                            <hr class="mb-4">
                            <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
                            </p>
                          </form>
                        </div>

                </div>


            </main>





















        <div class="container-fluid">
          <div class="row">


            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
              <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h5">Partidas</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                  <div class="btn-group mr-2">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-horario">+</button>


                    <div class="modal fade" id="create-horario" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" >
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="ModalLabel">Nueva partida</h5>                      
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>

                          <form action="{{ route('notas.store') }}" method="post">
                            {{ csrf_field() }}
                            <div class="modal-body">
                              <input type="hidden" id="groupID" name="groupID" value= {{ $nota->idNota }} >
                              <div class="form-group">
                                <label for="intDia" class="col-form-label">Día de la semana</label>
                                <select name="intDia" class="form-control">
                                  <option value="1"  selected> Lunes</option>
                                  <option value="2"  > Martes</option>
                                  <option value="3"  > Miércoles</option>
                                  <option value="4"  > Jueves</option>
                                  <option value="5"  > Viernes</option>
                                  <option value="6"  > Sábado</option>
                                  <option value="7"  > Domingo</option>
                                  </select> 
                              </div>
                              <div class="form-group">
                                <div style="width:50%;float:left;display:inline-block;">
                                  <label for="timHoraInicio" class="col-form-label">Hora de inicio</label>
                                  <input type="time" id="timHoraInicio" name="timHoraInicio" min="9:00" max="18:00" value="09:00" >
                                </div>
                                <div align="right">
                                  <label for="timHoraFin" class="col-form-label">Hora de fin</label>
                                  <input type="time" id="timHoraFin" name="timHoraFin" min="9:00" max="18:00" value="10:00">
                                </div>
                              </div>
                            </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                            <button type="submit" class="btn btn-primary" id="submitForm">Guardar</button>
                          </div>
                          </form>
                        </div>
                      </div>
                    </div>  



                  </div>
                </div>
              </div>



    <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>



            </main>
          </div>
        </div>
















          </div>
        </div>






    @endguest



      @push('scripts')
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
        <script>
          //anyjscode
                $(document).ready(function() {
              $('#example').DataTable( {
                  select: true
              } );
          } );    

        </script>

      @endpush

     @endsection

Thanks in advance.

Is your view a blade.php file?

MGS
– MGS

2018-10-12 18:06:45 +00:00
Commented Oct 12, 2018 at 18:06 — MGS
– MGS, Commented Oct 12, 2018 at 18:06

MGS · Accepted Answer · 2018-10-12 18:19:18Z

1

At this to the end of view, but within the section block. If your view is a standalone file, that does not extend any other views/layouts, such as the app.blade.php file, then ignore the section block.

@section <!--this block assumes you're extending another file-->
  <your-html>
  
  </your-html>



  @push('scripts')
    <script src="https://cdn.sample.js"></script>
    <script src="https://cdn.sample.js"></script>
    <script src="https://cdn.sample.js"></script>
    <script>
      //anyjscode
    </script>
  @endpush
@endsection

answered Oct 12, 2018 at 18:19

MGS

4561 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

C47 · Accepted Answer · 2018-10-12 20:38:14Z

0

Hello try with Laravel Collective

How to install? here

Import you js file in your blade file:

{!! HTML::script('js/modulos/comun.js') !!}

And, in you js file write whatever else, for example:

file.js

$(document).ready(function() {
      $('#example').DataTable( {
          select: true
      } );
  } );

answered Oct 12, 2018 at 20:38

C47

67110 silver badges20 bronze badges

Comments

Siddhi Vinayak P S · Accepted Answer · 2018-10-28 15:13:27Z

0

I think you can achieve what you're after by including a separate yield() in your template file at the bottom of the body tag:

     @yield('scripts')

In your view Blade try adding :

@section('content')
    Your Content goes here…
@endsection

@section('scripts')
    <script type="text/javascript">
    <script src="https://cdn.sample.js"></script>
    <script>
       //anyjscode
     </script>
@endsection

answered Oct 28, 2018 at 15:13

Siddhi Vinayak P S

12 bronze badges

Collectives™ on Stack Overflow

Include Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related