How to add onload() event into @section('content') of laravel

Question

Is possible to do this? For example I have this code:

@section('content' onload='MyFunction')
  <!--PAGE CONTENT...-->
  <div>
   <h1>Something...</h1>
   <select name="sel"></select>
  </div>
@endsection

<script type="text/javascript">

  function MyFunction(){

   obj = document.forms[0].sel;

   for (i=0; i<23; i++) {

    //A similar condition to onload() event.

  }
</script>

Or is it wrong of me to do that so? I'm working in Laravel and PHP. Or maybe using a Jquery function similar to the function in javascript.

No this is not possible.but you can use $('document').onready() — Sachin Aghera, Oct 26 '18 at 13:11

score 1 · Accepted Answer · answered Oct 26 '18 at 13:37

You must understand that @Section is a blade tag. Blade tags are processed inside PHP. Also, the blade syntax does not accept the parameter onload as you want.

Also, either on HTML/JS you can't use onload as you want.

You have two alternatives:

1 - Put a script tag after the section:

@section('content')
  <!--PAGE CONTENT...-->
  <div>
   <h1>Something...</h1>
   <select name="sel"></select>
  </div>
  <script>
    // Note that this function must have been declared before
    // this script tag, otherwise it will log an error:
    // "Uncaught ReferenceError: MyFunction is not defined"
    MyFunction(); 
  </script> 
@endsection

In this solution, the function will be called right after the browser loads this piece of html, but other parts of the html may not be loaded yet.

2 - Put a script tag watching for the load event on document:

<script>
    $(document).load(function() {
        MyFunction(); 
    });
</script>

The advantage of this method is that it will only be called after the entire page being loaded, so the order of the <script> tags doesn't matters (except that the jquery call must be after the jquery script tag.

score 0 · Answer 2 · answered Oct 26 '18 at 13:34

0

Or, if you don't want to use jQuery and go for the native approach, you can use:

document.addEventListener("DOMContentLoaded", function(event) {
  // do your stuff here
});

answered Oct 26 '18 at 13:34

Asen Tahchiyski

89
2
7

simonecosci · Answer 3 · 2018-10-26T13:45:17.623

IMHO is better if you divide HTML Markup and scripts using 2 sections eg:

 @section('content')
     <!--PAGE CONTENT...-->
     <div>
         <h1> Something ... </h1>
         <select name="sel"></select>
     </div>
     <script type="text/javascript">
     function MyFunction(){
         obj = document.forms[0].sel;
         for (i=0; i<23; i++) {
             //A similar condition to onload() event.
         }
     }     
    </script>
 @endsection
 @section('script')
     MyFunction();
     // every script here will run onload
 @endsection

and in your layout place both sections

 <main class="container">
      <section id="content">
           @yield('content')
      </section>
 </main>

 <script type="text/javascript">
        $(function(){
            @yield('script')
        });
 </script>

How to add onload() event into @section('content') of laravel

3 Answers3