Laravel 5

Mise-à-jour dynamique d'une liste déroulante

  • Avatar de EricGrizzly
    Membre depuis :
    27/10/2017
    Messages :
    12

    Bonjour,
    Je suis occupé à écrire un module d’enregistrement des membres d’une association.
    Mon formulaire comprend les champs classiques : nom, prénom, date de naissance, adresse (décomposée en rue, numéro, code postal et ville)
    Je dispose dans ma db d’une table contenant id, code postal et ville ; la clé n’est pas code postal car un même code postal correspond à plusieurs villes.
    Je voudrais que quand le nouveau membre entre son code postal, la liste déroulante « ville » ne contienne que les villes correspondant au critère.
    J’ai crée
    • Une fonction dans le controller qui sélectionne les villes sur base du code postal.
    • Une route qui appelle cette fonction.
    • Une fonction javascript dans mon formulaire qui récupère le code postal.
    Malheureusement je suis bloqué quand je veux mettre-à-jour la liste déroulante

    Merci d’avance

  • Avatar de m4rthiz
    Membre depuis :
    05/07/2018
    Messages :
    1

    Il faudrait je pense passer par une requete ajax qui apelle la methode de ton controlleur, pour mettre à jour la liste des villes.

    $.ajax({
    type: 'POST',
    url: 'route vers ta methode'}).done(function (data) {
    $("#list").html(data);
    });

    quelque chose de ce type ..

  • Avatar de EricGrizzly
    Membre depuis :
    27/10/2017
    Messages :
    12

    Voici quelques infos
    Merci d'avance pour votre aide

    le formulaire

    <div class="row">
    <div class="col-12">
    <div class="form-group row">
    {{ Form::label('Npostcode', ('usm.label.address.postcode'), array('class' => 'col-md-4 col-form-label text-right')) }}
    {{ Form::text('Npostcode', null, array('class' => 'col-md-2 form-control','onchange' => 'selectCities()' ,'placeholder' =>
    ('usm.label.address.postcode'))) }}
    </div><!--form-group-->
    </div><!--col-->
    </div><!--row-->

    <div class="row">
    <div class="col-12">
    <div class="form-group row">
    {{ Form::label('Ncity', __('usm.label.address.city'), array('class' => 'col-md-4 col-form-label text-right')) }}
    {{ Form::select('Ncity',['Ville'], null, array('class' => 'col-md-4 form-control')) }}
    </div><!--form-group-->
    </div><!--col-->
    </div><!--row-->

    la fonction dans le contrôleur

    public function selectCitiesAjax($postcode,CityRepository $cityRepository)
    {
    $selectedCities = $cityRepository->getCityByHeadingWithPostcode($postcode);
    return json_encode($selectedCities);

    }

    le repository

    public function getCityByHeadingWithPostcode($postcode)
    {
    return $this->model->where('postcode',$postcode)->pluck('heading');
    }

    la route

    Route::get('members/select-city/{postcode}','MemberController@selectCitiesAjax')->name('members.selectCity');

    la fonction Javascript

    function selectCities()
    {
    var postcode = document.getElementById('Npostcode');
    var cpostal = postcode.value;

    var url_route = "{{ route('frontend.members.selectCity', 'cpostal')}}";

    if (cpostal) {
    $.ajax(
    {
    type: "get",
    url: url_route,
    dataType: "json",
    success: function(selectedCities) {
    $('select[name="Ncity"]').empty();
    $.each(selectedCities,function(key, value) {
    alert("La ville choisie est " + value + " key n° " + key);
    $('select[name="Ncity"]').append('<option value="'+ key +'">'+ value +'</option>');
    });

    },
    error: function (x, e) {
    alert('There seems to be some problem while fetching records!');
    },
    }
    );
    } else {
    alert('Code postal non trouvé');
    }
    }
  • Avatar de EricGrizzly
    Membre depuis :
    27/10/2017
    Messages :
    12

    La fonction du contrôleur renvoie bien les bonnes valeurs quand je tape directement l'url
    j'ai mis un alert(cpostal) après success: function(selectedCities) et j'ai bien un message avec le bon code postal

  • Avatar de MaitrePylos
    Membre depuis :
    27/05/2013
    Messages :
    152

    Bonjour, je viens de faire un truc similaire, je vous montre comment j'ai fais, cela fonctionne bien, a vous d'adapter.

    C'est le même principe, sauf ue j'apelle en post, c'est perfectible et améliorable et je le fais en jquery.....Je me suis basé sur un tuto de developpez.com mais je le retrouve plus soit :

    Dans mon layout en meta je met le crsf (pour plus tard le récupérer) :

    .....
    <meta name="csrf-token" content="{{ csrf_token() }}">
    ........

    Je crée une route dans web.php ou api.php (je reprend la votre, mais en post)

    Route::post('members/select-city,'MemberController@selectCitiesAjax')->name('members.selectCity');

    Je crée ma méthode qui va renvoyer un json reprenant l'id et le nom des ville en fonction du code postal


    public function selectCitiesAjax(Request $request){

    $selectedCities = CityRepository::where('postcode',$request->postcode)->pluck('nom_ville','id');

    return response()->json($selectedCities);

    ensuite je construit mon blade avec mes deux selects , vous remarquerez que je met la route dans data-url :


    <div class="form-group col-sm-6">
    {!! Form::label('Code Postal', 'Code Postal:') !!}
    {!! Form::select('code_postal', $array_code_postal ,null, ['class' => 'form-control',
    'id'=>'code_postal','data-url'=>route('members.selectCity')]) !!}
    </div>

    <div class="form-group col-sm-6">
    {!! Form::label('ville', 'Ville:') !!}
    {!! Form::select('ville', [] ,null, ['class' => 'form-control',
    'id'=>'ville']) !!}
    </div>

    dans ce blade, je met la partie jquery en fin de fichier :
    Je commence par une fonction qui va gérer le crsf (il existe d'autre méthode)

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

    Ensuite, je créer la fonction qui va remplir mon select de ville en fonction du code postall

    let $code_postal = $('#code_postal ');
    let $ville = $('#ville');

    // à la sélection de la localité un dans la liste
    $code_postal .on('change', function() {
    let val = $(this).val(); // on récupère l'id de la localité
    if (val != '') {
    $ville.empty(); // on vide la liste de ville
    $ville.append('<option value="">Choisir une ville</option>');

    $.ajax({
    url: $(this).attr('data-url'),//on récupère la route mise dans le select de départ
    type: 'post',
    data: "postcode="+val,
    dataType: 'json',
    //on rempli le select avec le json
    success: function( json ) {
    $.each(json, function( index, value ) {
    $ville.append('<option value="' + index + '">' + value +
    '</option>');
    });
    },
    });
    }

    });

    C'est un peu long, j'espère que cela pourras t'aider.

  • Avatar de EricGrizzly
    Membre depuis :
    27/10/2017
    Messages :
    12

    J'ai essayé à nouveau mais l'accès ajax ne fonctionne pas.

  • Avatar de MaitrePylos
    Membre depuis :
    27/05/2013
    Messages :
    152

    Le code est sur un dépôt ?

  • Avatar de EricGrizzly
    Membre depuis :
    27/10/2017
    Messages :
    12

    non, j'ai installé laragon et je développe sur mon pc

Vous ne pouvez pas répondre à ce sujet.