検索なしで編集するとデータを表示します。

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.. 
      } 
     } 
    }); 
}); 

probレムは私が編集しようとするとき、私は再び検索ボタンをクリックする必要があります、それを行うには何かトリックですか？

私はこのように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');