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