Jquery.Ajax does not work in Chrome, but if it works in Firefox

1

I am using a method that loads information from a database in a combobox, but what is shown depends on the previous selection in another combobox ... A dynamic combobox.

It happens to work perfectly in Mozilla Firefox (v.54.0) but does not work in Chrome (v.59.0). I tried different versions of Jquery and it is not solved.

I leave the code js and the implementation. It is worth mentioning that I am using Laravel 5.4.

JS

function loadContent(url, destino, qs) {
var spinner = "Cargando...";
var destino = jQuery('#' + destino);

destino.html(spinner);

jQuery.ajax({
    type: "get",
    url: url,
    dataType: 'html',
    data: qs,
    timeout: 30000,
    error: function (xhr, ts, et) {
        alert("Error al cargar la pagina"+"et="+et);
        destino.html('');
    },
    success: function (data, ts) {
        window.setTimeout(function () {
            destino.html('');
            destino.html(data);
        }, 500);
    }
});
}

PHP.

<select name="empresa_id" id='empresa_id' class='form-control'>
<option value="">Seleccione una opcion</option>
@foreach($empresa as $emp)
<option value="{{$emp->id}}" onclick="loadContent('<?php echo route('getsuc', $emp->id)?>', 'sucursal')">{{$emp->nombre}}</option>
@endforeach
</select>
<select name="empresa_id" id='sucursal' class='form-control'>
<option value=''>Seleccione una Empresa</option>
</select>

<script type="text/javascript" src="{{asset('js/jquery-3.2.1.js')}}">
</script>
<script type="text/javascript" src="{{asset('js/load_content.js')}}">
</script>

Response to Gerardo Rosciano

<select name="empresa_id" id='empresa_id' class='form-control' onchange="loadContent('<?php echo route('getsuc', this.value)?>', 'sucursal')">
<option value="">Seleccione una opcion</option>
@foreach($empresa as $emp)
<option value="{{$emp->id}}">{{$emp->nombre}}</option>
@endforeach
</select>
<select name="sucursal_id" id='sucursal' class='form-control'>
<option value=''>Seleccione una Empresa</option>
</select>

<script type="text/javascript" src="{{asset('js/jquery-3.2.1.js')}}">
</script>
<script type="text/javascript" src="{{asset('js/load_content.js')}}">
</script>
    
asked by Israel jara 16.06.2017 в 17:54
source

1 answer

3

Events onclick in option do not work in most versions of IE, Safari and chrome More info (in English)

To obtain functionality in <select> it is advised to use the event onChange

<select name="empresa_id" id='empresa_id' class='form-control'
 onchange="loadContent(this.value, 'sucursal')" >
    <option value="">Seleccione una opcion</option>
  @foreach($empresa as $emp)
    <option value="<?php echo route('getsuc', $emp->id)?>">{{$emp->nombre}}</option>
  @endforeach
</select>

More about the onChange event:

link

link (english)

link

    
answered by 16.06.2017 / 18:49
source