搜索

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

它与以前基本相同，但只有一个结果。当我单击此单个结果上的编辑时，模式将按预期显示。但是，这次选择输入并不好看，似乎没有应用select2。

此外，如果我进行更改并单击编辑，则似乎没有任何事情发生。

我是否需要做一些事情才能让客户的搜索版本正常工作？

由于

Answer 1

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

所以你需要在这里添加：

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

Answer 2

这是因为你的脚本将在Dom load上执行。但是在通过ajax更改数据后，会添加新的元素，之前的绑定事件将不起作用。所以你需要在ajax成功后重新定位函数。

XCTest