1

El problema es el siguiente, tengo una formulario y utilizo ajax para que me traiga una sección especifica del mismo por medio de un campo select, utilizo vistas creadas con 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);   


});

hasta ahí todo normal me trae la vista dinamicamente sin problemas, pero esa vista traida del AJAX necesita acceder al archivo app.js generado por webpack, el problema es que como la vista es dinámica el formulario pierde el acceso a ese archivo, pero si yo no utilizo el AJAX y cargo la vista con laravel de manera estática todo funciona perfecto, como se podría refrescar solamente esa sección de la vista y que esta cargue el archivo .js, una cosa que he notado es que cuando doy clic derecho y veo el codigo fuente de la pagina la sección que trae Ajax no muestra nada del código HTML de dicha sección pero yo la veo visualmente en el navegador.

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()!!}

Controlador Laravel:

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());
            }

        }
    }

2 respuestas 2

1

Cuando cargas html por AJAX, para que jQuery lo reconozca/vea tienes que usar la función .on(), que asigna eventos a elementos del DOM, de tal manera que tu código quedaría así:

    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();
     });
3
  • Gracias Pedro Prada, intente hacerlo según su recomendación pero no funciono, me toco mientras tanto en las vistas que llamo con el AJAX insertar al final de cada una <script src="{{asset('js/app.js')}}"></script> y eso me lo resuelve pero se estaría llamando dos veces el mismo .js al cargar la pagina y pues no seria lo ideal, de que otra forma se podría traer ese .js a través de una petición AJAX Commented el 13 dic. 2017 a las 23:00
  • ¿Puedes poner el html que debería cargar AJAX y la parte en la que se pone? Commented el 14 dic. 2017 a las 8:04
  • Listo Pedro Prada, ya agregue el HTML del Form y el ajax que utilizo para mostrar las vistas, muchas gracias por la ayuda. Commented el 14 dic. 2017 a las 18:38
0

lo más seguro es que después de hacer .on() del html o el .append() debas volver a ejecutar algún método de app.js, es decir si desde ese app.js estas esperando un

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

No te va a leer ya que ese html aun no existe en el DOM, así que después de hacer .append() debes hacer una llamada a un método dentro de tu app.js que escuche los eventos de este nuevo html en tu página.

Algo así:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.