Form and select not working after search

Question

I use a loop to display a list of clients

@foreach ($clients as $client)
    @include ('clients.modals.editClientModal' , ['client' => $client])
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <div class="panel panel-default clientPanel">
            @if (!empty($client->clientName))
            <div class="panel-body">
                <h4>{{ $client->clientName }}</h4>
                <p>Email : {{ $client->contactEmail or '' }}</p>
                <p>Structure: {{ $client->businessStructure or '' }}</p>
                <p>Type: {{ $client->businessType or '' }}</p>
                <p>Office: {{ $client->office or '' }}</p>
            </div>
            <div class="panel-footer">
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#editClientModal{{ $client->id }}">Edit </button>
            </div>
            @endif
        </div>
    </div>
@endforeach

You can see that I include a modal for each client. This essentially includes the following

<div id="editClientModal{{ $client->id }}" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Edit Client</h4>
            </div>
            <div class="modal-body">
                {!! Form::model($client, [
                       'class'=>'form-horizontal',
                       'method' => 'PATCH',
                       'route' => ['clients.update', $client->id]
                   ]) !!}

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-5">
                                {!! Form::label('office', 'Office:', array('class' => 'control-label blue')) !!}
                            </div>
                            <div class="col-sm-7">
                                {{ Form::select('office', [
                                   'Something' => 'Something','SomethingElse' => 'SomethingElse'],
                                    null,
                                    ['class' => 'selectpicker'])
                                }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                {!! Form::submit('Edit Client', ['class' => 'btn btn-primary']) !!}
            </div>
        </div>
        {!! Form::close() !!}
    </div>
</div>

When I click edit on a client, the modal displays, and the select input is nice because I have this

$(function() {
    $('.selectpicker').select2();
});

So this all works fine. I can edit the client without any issues. On the same page I have a search funtionality. I search for a client and from the list I select one. This triggers the following

select: function (event, ui) {
    $.ajax({
        url: "/returnClient",
        type: "GET",
        datatype: "html",
        data: {
            value : ui.item.value
        },
        success: function(data) {
            $('.container').html(data.html)
        }
    });
},

The data returned from this Ajax call is this

@if(!empty($client))
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <div class="panel panel-default">
                    @include ('clients.modals.editClientModal' , ['client' => $client])
                    <div class="panel-body text-center">
                        @if (!empty($client->clientName))
                            <h4>{{ $client->clientName }}</h4>
                            <p>{{ $client->contactEmail }}</p>
                        @else
                            <h4>{{ $client->contactEmail }}</h4>
                        @endif
                    </div>
                    <div class="panel-footer">
                        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#editClientModal{{ $client->id }}">Edit </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

It is essentially the same as before but for a single result. When I click edit on this single result, the modal displays as expected. However, this time the select input is not nice and it doesnt seem to have select2 applied to it.

Additionally, if I make a change and click edit, nothing seems to happen.

Do I need to do something to get the searched version of the client working?

Thanks

Answer 1

Its because you script will execute on Dom load.But after changing data via ajax new elements are added for which the previous binded events will not work.so you need to reintialize the function post ajax success.

success: function(data) {
            $('.container').html(data.html);
            $('.selectpicker').select2();
        }

Answer 2

It's because you have to reinitialize select2 after every ajax request.

So you need to add here:

success: function(data) {
    $('.container').html(data.html);
    $('.selectpicker').select2();
}