Select dependent with ajax and laravel for an edit view

Question

Select dependent with ajax and laravel for an edit view

Navigation

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

0

I'm currently working on an edit view http://127.0.0.1:8000/dgj/editar_ejuridica/7 , I have two dependent select 'has (' city ')? 'has-error': ''}} "> *City:

                            @foreach($ciudades as $ciudad => $value)
                            <option value="{{$value->id}}">{{$value->city_cty}}</option>
                            @endforeach
                    </select>
                </div>
            </div>

            <div class="form-group {{ $errors->has('municipio') ? 'has-error' : '' }}">
                <label class="col-sm-3 control-label">
                    *Municipio: 
                </label>
                <div class="col-sm-7">
                    <select class="form-control dynamic" id="municipio" name="municipio">
                        <option value="0" disabled="true" selected="true">Municipios</option>
                    </select>
                </div>
            </div>'

I use this AJAX code:

<script type="text/javascript">
  $('#ciudad').on('change', function(e){
    console.log(e);
    var ciudad_id = e.target.value;

    $.get('select_ciudad?ciudad_id=' + ciudad_id,function(data) {

      $('#municipio').empty();
      $('#municipio').append('<option value="0" disable="true" selected="true"></option>');

      $.each(data, function(fetch, regenciesObj){
        $('#municipio').append('<option value="'+ regenciesObj.id +'">'+ regenciesObj.municipality_mty +'</option>');
      })
    });
  });

the route for this AJAX is the following:

Route::get('select_ciudad', 'SelectController@fetch')->name('dgj.vwempresas.fetch');

and this is my controller:

  class SelectController extends Controller
{
    function fetch(Request $request)
    {

      $ciudad_id = Input::get('ciudad_id');

      $regencies = Municipio::where('cityid_mty', '=', $ciudad_id)->get();
      return response()->json($regencies);  
    }
}

my select are City and municipality, in the view create I have the same with the same script and the same controller and it works correctly, in the edit view I am working does not work

ajax laravel

asked by KLAR 06.05.2018 в 02:18

source

3 answers

Can a 'Raw String' be replaced by another once printed? Problems obtaining an image from the public folder in a route. Laravel.

score 1 · Answer 1

I had the same problem as you. The solution was to properly modify the routes.

In your ajax modify the .get in the following way:

<script type="text/javascript">$('#ciudad').on('change', function(e){
console.log(e);
var ciudad_id = e.target.value;

$.get('../select_ciudad/ciudad_id,function(data) {

  $('#municipio').empty();
  $('#municipio').append('<option value="0" disable="true" selected="true"></option>');

  $.each(data, function(fetch, regenciesObj){
    console.log(data);
    $('#municipio').append('<option value="'+ regenciesObj.id +'">'+ regenciesObj.municipality_mty +'</option>');
  })
});

and in your route add the following:

Route::get('/select_ciudad/{id}', 'SelectController@fetch')->name('dgj.vwempresas.fetch');

score 0 · Answer 2

The problem is that you are doing the query to

http://127.0.0.1:8000 /dgj/editar_ejuridica/ select_ciudad
and your route for municipality inquiries is
http://127.0.0.1:8000 / select_ciudad .

The problem is because you are sending a relative route and not an absolute route.
Pass the url to the ajax request

You can add the following in the main view (master template), in this way you will have the url available in all your views.

<script>
  window.App = { host: '{{ url("/") }}/' }
</script>

In the request, call the App variable

Another option (if the script is in the view) is to use the helper url() .

  $('#ciudad').on('change', function(e){
    console.log(e);
    var ciudad_id = e.target.value;

    $.get({{ url("/") }}'/select_ciudad?ciudad_id=' + ciudad_id,function(data) {

      $('#municipio').empty();
      $('#municipio').append('<option value="0" disable="true" selected="true"></option>');

      $.each(data, function(fetch, regenciesObj){
        $('#municipio').append('<option value="'+ regenciesObj.id +'">'+ regenciesObj.municipality_mty +'</option>');
      })
    });
  });

Reference: Vue 2 directive: src does not show image but loads HTML

score 0 · Answer 3

Hello @Maru thanks for your answer, I tried to use the helper url () but I still have problems, the municipality select does not load any data corresponding to the selected city

To the AJAX code that I had add {{url ("/")}}, use the helper url () since I have the script in the edit view.

This is how I have the AJAX code now:

<script type="text/javascript">

  $('#ciudad').on('change', function(e){
    console.log(e);
    var ciudad_id = e.target.value;

    $.get('{{ url("/") }}select_ciudad?ciudad_id=' + ciudad_id,function(data) {

      $('#municipio').empty();
      $('#municipio').append('<option value="0" disable="true" selected="true"></option>');

      $.each(data, function(fetch, regenciesObj){
        console.log(data);
        $('#municipio').append('<option value="'+ regenciesObj.id +'">'+ regenciesObj.municipality_mty +'</option>');
      })
    });
  });

My edit view, the path and the control leave the same but as shown in the image the combobox does not load the municipality data.

Thanks in advance for your help.