Laravel views loaded with Ajax do not run external js files created with webpack

Question

Laravel views loaded with Ajax do not run external js files created with webpack

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

The problem is this, I have a form and I use ajax to bring me a specific section of it by means of a select field, I use views created with Laravel.

ajax:

$(function(){

    function showPlanningFormProduct(){

        var value = this.value;
        var url = "create/"+value;
        console.log(url);

            $.get(url, function(data){
                $('#toggle-3').empty().append(data);
            });
    }

    $('#product_line').change(showPlanningFormProduct);   


});

So everything normal brings me the view dynamically without problems, but that view brought from the AJAX needs access to the app.js file generated by webpack, the problem is that since the view is dynamic the form loses access to that file, but if I do not use the AJAX and I load the view with laravel in a static way everything works perfect, how could only that section of the view be refreshed and that the .js file be loaded, one thing I have noticed is that when I right click and I see the source code of the page the section that Ajax brings does not show anything of the HTML code of that section but I see it visually in the browser.

html:

    {!! Form::open(['route' => 'datasheet.store', 'method' => 'POST', 'class'=>'uk-form-stacked','files'=>true]) !!}
        @include('errors')

        <button href="#toggle-0" class="uk-button toggle-datasheet uk-width-1-1" type="button" 
        uk-toggle="target: #toggle-0; animation: uk-animation-fade">Tipo de Producto</button>

        <div id="toggle-0" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
            @include('backend.profile.users.datasheet.forms.product-type')
        </div>

        <button href="#toggle-1" class="uk-button toggle-datasheet uk-width-1-1" type="button" 
        uk-toggle="target: #toggle-1; animation: uk-animation-fade">Información del Producto</button>

        <div id="toggle-1" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
            @include('backend.profile.users.datasheet.forms.product-info')
        </div>

        <button href="#toggle-2" class="uk-button toggle-datasheet uk-width-1-1" type="button" 
        uk-toggle="target: #toggle-2; animation: uk-animation-fade">Estructuras</button>

        <div id="toggle-2" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
            @include('backend.profile.users.datasheet.forms.structure')
        </div>

        <button href="#toggle-3" class="uk-button toggle-datasheet uk-width-1-1" type="button" 
        uk-toggle="target: #toggle-3; animation: uk-animation-fade">Planeamiento</button>

        <div id="toggle-3" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
            {{-- @include('backend.profile.users.datasheet.forms.doypack-planning') --}}
**//en esta sección debe ir la vista dinámica que traigo con AJAX, anteriormente usaba el @include del sistema blade de Laravel**
        </div>

        <div class=" uk-width-1-1 uk-text-right uk-margin">
            <a href="{{route('datasheet.index')}}" class="uk-button uk-button-default uk-modal-close" type="button">Cancelar</a>
            <button class="uk-button uk-button-info" type="submit" id="submit">Generar Ficha</button>
        </div>

    {!! Form::close()!!}

Laravel Driver:

public function getview(Request $request, $code)
    {
        if($request->ajax()){
            if($code == "Doypack"){
                return response()->json(View::make('backend.profile.users.datasheet.forms.doypack-planning')->render());
            } elseif ($code == "Wicket") {
                return response()->json(View::make('backend.profile.users.datasheet.forms.wicket-planning')->render());
            } elseif($code == "null"){
                return response()->json(View::make('backend.profile.users.datasheet.forms.null')->render());
            }

        }
    }

javascript jquery laravel laravel-5

asked by Darwin Gomez 13.12.2017 в 03:47

source

2 answers

Validate field depending on the value of another Angular Authentication with jsowebtoken

score 1 · Answer 1

When you load html by AJAX, for jQuery to recognize / see you have to use the function .on() , which assigns events to elements of the DOM, so that your code would look like this:

    function showPlanningFormProduct() {
         var value = this.value;
         var url = "create/" + value;
         console.log(url);

          $.get(url, function (data) {
               $('#toggle-3').empty().append(data);
          });
     }

     $(document).on('change', '#product_line', function () {
          showPlanningFormProduct();
     });

score 0 · Answer 2

The safest thing is that after doing .on() of html or .append() you must re-execute some method of app.js, that is if from that app.js you are waiting for a

$('.uk-form-stacked').submit(...)

It will not read you since that html does not yet exist in the DOM, so after making .append() you must make a call to a method within your app.js that listens to the events of this new html in your page.

Something like this:

$.get(url, function(data){ $('#toggle-3').empty().append(data); listenerForm(); // esto debe estar en app.js });