Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chosen update not working after ajax response #3116

Open
kowalskitPhp opened this issue Apr 14, 2021 · 1 comment
Open

chosen update not working after ajax response #3116

kowalskitPhp opened this issue Apr 14, 2021 · 1 comment

Comments

@kowalskitPhp
Copy link

I have some issue with jquery chosen (ver 1.5.1). In my laravel project I have view with modal. In view is select with alreay some list. User using modal with form, can add position to the table from which I wanna update select list and update chosen. My code: View:

<div class="form-group row">
        <label class="col-3 text-right" for="car">Klient: <a href="/car/create" data-toggle="modal" data-target="#myModal" data-whatever="">(Add car)</a></label>
        <div class="col-9">
            {!! Form::select('cari', $car, null, ['class'=>'form-control form-control-sm form-control-chosen', 'id' => 'client', 'placeholder' => 'Chose car']) !!}
            {!! $errors->first('cari', '<strong><p style="color:red;" class="help-block">:message</p></strong>') !!}
            <script type="text/javascript">
                $("#client").chosen({
                    no_results_text: 'Missing sorry.',
                });
            </script>
        </div>
    </div>
<div class="modal fade bd-example-modal-lg" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">add new car:</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col response-client">

                        </div>
                    </div>
                    @csrf
                    <div class="form-group {{ $errors->has('car') ? 'has-error' : ''}}">
                        <label for="exampleFormControlFile1">car danem: </label>
                        <input class="form-control form-control-sm" name="car" type="text" id="newcar">
                        {!! $errors->first('car', '<strong><p style="color:red;" class="help-block">:message</p></strong>') !!}
                    </div>
</div>
                    <button type="submit" id="add-car" class="btn btn-primary btn-sm">{{ __('save') }}<i class="icon-floppy"></i></button>
       </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>    

script code:

   $('#add-car').click(function(){
       var car = $('#newcar').val();                                    

      $.ajax({
     url:"{{ url('cars/carNew') }}",
     method:"POST",
   data:{car:car, _token:"{{ csrf_token() }}"},

     success:function(result)
     {
      if(result.result > 0)
       {
              NewCar();
       }
       else
       {
            $("#msg").html("Error can't add new car!");
            $("#msg").fadeOut(2000);
       }
      },
      error:function(xhr)
      {
           console.log(xhr.responseText);
      }
     })                                 

   });

                                function NewCar()
                                {                                    
                                    $('#myModal').modal('hide');
                                    $('.modal-backdrop').remove();
                                    $('#client').empty();                                   

                                    $.ajax({
                                        url:"{{ url('umowy/klienci') }}",
                                        method:"POST",
                                        data:{ _token:"{{ csrf_token() }}"},

                                        success:function(result)
                                        {
                                            $("#client").append('<option>Chose car</option>');
                                            if(result)
                                            {
                                                $.each(result,function(key,value){
                                                    $('#client').append($("<option/>", {
                                                        value: key,
                                                        text: value
                                                    }));
                                                });
                                            }

                                            $('#client').trigger('chosen:updated');                                         

                                        },
                                        error:function(xhr)
                                        {
                                            console.log(xhr.responseText);
                                        }

                                    });

                                }
                            });

Everything works very well except that $('#client').trigger('chosen:updated');. Nothing happen no errors. I'm not sure if I'm doing everything right? Sorry for my english.

@AbdullahKhdir
Copy link

AbdullahKhdir commented Mar 24, 2023

do try to call the trigger function in the each loop when you append the option to the select.
and try to use as an alternative way as string instead of an object to append your options

success:function(result)
                                        {
                                            $("#client").append('<option>Chose car</option>');
                                            if(result)
                                            {
                                                $.each(result,function(key,value){
                                                    $('#client').append($("<option/>", {
                                                        value: key,
                                                        text: value
                                                    })).trigger('chosen:updated');
                                                });
                                            }                                     
                                        }

see if it works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants