Mathieu Mourareau Mathieu Mourareau - 1 year ago 237
HTML Question

Selectbox Laravel select onChange

I would like to filter some results depending on my selectbox

poule_id
in Laravel. For example, if I select
poule_id = 1
, it should display (on click) all teams that are in the
poule_id = 1
.

Anyone knows a good practice or a quick tutorial to achieve that? I would like to use jQuery for this.

Currently, I have:


Route::get('search/equipes' , '[email protected]');


My controller :

public function searchEquipes(Request $request)
{
$equipes = [];

if($request->has('poule_id')){
$equipes = EquipePoule::where('poule_id',$request->poule_id)
->get();
}


return response()->json(['equipes' => $equipes]);
}



<div class="tab-pane" id="tab_2">
<div class="col-md-4 pull-right">


<select id="poule">
@foreach($select_poules as $select_poule)
<option value="{{$select_poule->id}}">{{$select_poule->lb_poule}}</option>
@endforeach
</select>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Club</th>
<th>Nom de l'équipe</th>
<th>Bonus(+/-)</th>
</tr>
</thead>
<tbody>
@foreach($equipes as $equipe)
<tr>
<td><a href="{!! route('club.show', $equipe->equipe->structure->id) !!}">{{$equipe->equipe->structure->nom_structure}}</a></td>
<td><a href="{!! route('equipe.show', $equipe->equipe->id) !!}">{{$equipe->equipe->lb_equipe}}</a></td>
<td>{!! Form::text('nb_bonus') !!}</td>
</tr>
@endforeach
</tbody>
</table>
</div>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).on('change', '#poule', function() {

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

$.ajax({
type: 'GET',
dataType: "json",
url : '/search/equipes',
data : {poule_id : $('#poule').val()},
success:function(data){

$('table tbody').empty().append(data.equipes);

},
timeout:10000
});

});
</script>

Answer Source

In your javascript file:

$(document).on('change', '#poule', function (e) {

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type: 'GET',
                        dataType: "json",
                        url : '/equipes/search',
                        data : {poule_id : $('#poule').val()},
                        success:function(data){

                        $('table tbody').empty(); 
                        for (var i = 0; i < data.equipes.length; i++){
                           $('table tbody').append('<tr><td>'+data.equipes[i].lb_equipe+'</td></‌​tr>')
                          }

                        },
                        timeout:10000
                    });

            });

You should add an id to your select.

In your equipesController define a method 'search', and in your routes add /equipes/search/ route

public function search(Request $request)
    {

        $equipes = [];

        if($request->has('poule_id')){
            $equipes = DB::table("equipes")
                ->where('poule_id',$request->poule_id)
                ->get();
        }

        return response()->json(['equipes' => $equipes]);

    }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download