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

问题

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

@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'
   ]);
});

回答1:

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.

来源：https://stackoverflow.com/questions/59776781/laravel-5-4-how-to-make-section-yield-before-javascript-loads

标签

javascript

php

forms

laravel-5