Question

我正在使用ajax搜索数据并将其返回，并使用append将其显示在浏览器中。

到目前为止，这是我的代码：

<div class="row top">
<div class="col-xs-3 col-sm-3 col-md-3">
    <div class="form-group">
        <label class="control-label">Car Plate No:</label>
        {!! Form::select('car_id', $car, null, array('class' => 'form-control', 'placeholder' => '')) !!}
    </div>
</div>

<div class="col-xs-3 col-sm-3 col-md-3">
    <div class="form-group">
        <label>Offence Date:</label>
        {!! Form::text('fine_date', null, array('class' => 'form-control datetimepicker')) !!}
    </div>
</div>

<div class="col-xs-3 col-sm-3 col-md-3">
    <div class="form-group">
        <label>Time:</label>
        {!! Form::text('fine_time', null, array('class' => 'form-control fine_time')) !!}
    </div>
</div>

<div class="col-xs-3 col-sm-3 col-md-3">
    <div class="form-group filter-btn">
        <button class='btn btn-info' type='search'>Search</button>
    </div>
</div>

这里是附加结果的div：

<table class="table table-bordered" style="display: none">
<div class="row-info">
    <td class="col-xs-12 col-sm-12 col-md-12">
        <div class="col-xs-3 col-sm-3 col-md-3" style="text-align: center; width: 20%">
           <label>#</label>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3" style="width: 20%">
           <label>Driver Name</label>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3" style="width: 20%">
           <label>Start Time</label>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3" style="width: 20%">
           <label>End Time</label>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3" style="width: 20%">
           <label>Shift</label>
        </div> 
        <div id="search-result"></div>
    </td>
</div>
</table>

这是我到目前为止的ajax代码：

$('button[type="search"]').click(function(e) {
    $.ajax({
        url: "{{ route('fine.search') }}",
        type: "POST",
        data: { 
            '_token' : '{{csrf_token() }}',
            'car_id' : $('select[name="car_id"]').val(),
            'fine_date' : $('input[name="fine_date"]').val(),
            'fine_time' : $('input[name="fine_time"]').val(),
        },
        success: function(data) { 
            if(data.status == true) { 
            var result= []; 

            $.each(data.getCarbyDriver, function(i, data) { 
            HideEle = $('<input>').attr({type:'hidden', name:'fleet_id'}).val(data.id);   
            CarEle =  $('<input/>', {"class": 'col-xs-2 col-sm-2 col-md-2', "style": 'width:20%'}).attr({ type: 'radio', name: 'driver_id'}).val(data.driver_id);
            DnameEle = $("<div/>", {"class": 'col-xs-2 col-sm-2 col-md-2', "style": 'width:20%'}).html(data.full_name);
            StartELe = $("<div/>", {"class": 'col-xs-2 col-sm-2 col-md-2', "style": 'width:20%'}).html(data.start_time);
            EndEle = $("<div/>", {"class": 'col-xs-2 col-sm-2 col-md-2', "style": 'width:20%'}).html(data.end_time);
            SnameEle = $("<div/>", {"class": 'col-xs-2 col-sm-2 col-md-2', "style": 'width:20%'}).html(data.name);
            }); 
            $('#search-result').empty().append(CarEle, DnameEle, StartELe, EndEle, SnameEle, HideEle); 
            $('.row-bot, .row-info, .table-bordered, #search-result').show();
            $('#noData').hide();
            }
        },
        error: function(data) {
           if(data.getCarbyDriver == null ) { // if the result is null
                $('#noData').show();
                $(".row-info, .row-bot, #search-result, .table-bordered").hide(); // show the div..
            }
        }
    });  
});

问题是当我尝试编辑时，我需要再次点击搜索按钮，有什么技巧可以做到吗？

我使用jquery检查条件是这样的：

var CarId = $('select[name="car_id"]');

    function checkCarId(select) {
        if(select.val() != '') {
            $('.row-bot').show();
        } else {
            $(".row-bot").hide();
        }
    }
    checkCarId(CarId);

但代码仅适用于FORM而不适用于ajax。

Answer 1

使用js：

触发点击

$('button[type="search"]').trigger('click');

在没有搜索的情况下进行编辑时显示数据。

1 个答案: