Laravel 5.4 - How to make @section yield before javascript loads

Question

I'm using javascript to dynamically create a form that takes answers from a chat and adds it to a form. The form exists in a separate blade file register.blade.php. I yielded the form in the home page (index.blade.php) but the @section('registration-form') yields to the page before the js is read. For that reason, the answers from the chat never get input into the form.

register.blade.php holds the (custom) form @section('registration-form'). From there I'd like to create a route::get('/index', 'CustomAuthController') in routes/web.php to store the forms data in my database. Any ideas on how to make this work?

Very new to Laravel. Using Laravel 5.4.

THE CODE:

layouts/app.blade.php

@include('includes.head')

<body>        
    @include('includes.navbar')
    <div class="container">
        @yield('content')
    </div>
    @include('includes.footer')
</body>

index.blade.php

@extends('layouts.app') 

@section('content')

<main>      
  <section class="row" >    

     <!------ a bunch of content here ----------->

     <!----- form yielded here -------->

         @yield('registration-form')

     <!--- form end ----->
     <!------ more content -------->
  </section>
</main>
@endsection

register.blade.php

@section('registration-form')

<div class="padding-32" id="signup-two">
<h4>Review and submit your information</h4>
<form  method="POST" action="{{ route('signup') }}">
  {{ csrf_field() }}

  <div class="form-group" id="fname">
   <label></label>
   <input name="fname"/>
  </div>

  <div class="form-group" id="email">
   <label></label>
   <input name="email"/>
  </div>
  <div class="form-group" id="password">
   <label></label>
   <input name="password"/>
  </div>
  <div class="form-group" id="BMI">
   <label></label>
   <input name="BMI"/>
  </div>
  <div class="form-group" id="height">
   <label></label>
   <input name="height"/>
  </div>
  <div class="form-group" id="weight">
   <label></label>
   <input name="weight"/>
  </div>
</form>

@endsection

I tried yielding @section(registration-form) in app.blade.php the form still did not load. I also couldn't figure out how to create a route and a controller for this. The code looked like this:

layouts/app.blade.php

@include('includes.head')

  <body>

    @include('includes.navbar')
    <div class="container">
        @yield('content')
        @yield('registration-form')
    </div>
    @include('includes.footer')
  </body>
</html>

routes/web.php

Route::get('/index', function () {
  return view('registration-form', [
   'fname' => 'fname',
   'BMI' => 'BMI',
   'height' => 'height',
   'weight' => 'weight'
   ]);
});

if the js is specifically for the register-form only, why don't you create another js file and add and load the script inside(at the bottom of ) `@section('registration-form')`. — Yunhai, Jan 16 '20 at 20:07
It's in the above code block below register.blade.php. I wrapped it in a @section ('registration-form') and tried to yield it in index.blade.php. — bella, Jan 16 '20 at 23:50
@yunhai my JavaScript does calculations and makes and moves objects on the page so I can't move the js for the form to a separate file. — bella, Jan 16 '20 at 23:52
@bella your question is rather confusing, do you want to load the js before the `@yield(form)` or after . It seems like the title of question and what you want to approach is self-contradictory. You might want to edit your question a little bit. — Yunhai, Jan 17 '20 at 00:16
@yunhai I want to load the form first. The js doesn't detect the form — bella, Jan 17 '20 at 00:18

score 0 · Answer 1 · answered Jan 17 '20 at 00:53

Javascript is usually loaded when dom is ready.

But you want to load script before that specific DOM ( @yield(form) ) element is ready.

So you have to do something like "laravel load view using ajax", there are already some practical example around. How can I return a view from an AJAX call in Laravel 5?

You want to create a router for Ajax call, controller function to return the partial view (hence @section('form')). Call the ajax after the necessary code is ready in your js. Then Append the view to desire location. There are not easy way around.

You might want to reconsider you design for whatever you are trying to accomplish right now.

For things like data manipulation, calculation, etc. If they can be done and validated by backend, simply send them to the backend. One common mistake is Frontend is trying to handle the Backend tasks.

lml now I have to learn AJAX!! I used it twice maybe during my short time coding. I want clean code so a redesign might be my best option. Your feedback has helped. Hopefully I figure this out by tomorrow. Will try to remember to send you a link for the finished product. — bella, Jan 17 '20 at 01:20

Laravel 5.4 - How to make @section yield before javascript loads

1 Answers1

Linked