jquery - 搜索后表单和选择不起作用

Question

我使用循环来显示客户端列表

@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

您可以看到我为每个客户端添加了一个模式。这主要包括以下内容

<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>

当我在客户端上单击“编辑”时，会显示模式，并且选择输入很好，因为我有这个

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

所以这一切都很好。我可以毫无问题地编辑客户端。在同一页面上我有搜索功能。我搜索一位客户，然后从列表中选择一个。这会触发以下内容

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

这次Ajax调用返回的数据是这样的

@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

它本质上与以前相同，但只有一个结果。当我单击此单个结果的编辑时，模式将按预期显示。然而，这次的 select 输入不太好，而且似乎没有应用 select2。

此外，如果我进行更改并单击编辑，似乎什么也没有发生。

我需要做些什么才能使搜索到的客户端版本正常工作吗？

谢谢

Answer 1

这是因为每次 ajax 请求后都必须重新初始化 select2。

所以你需要在这里添加:

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