如何显示＆＃34;显示：无＆＃34;编辑时形成

时间：2016-11-24 14:24:31

标签： javascript jquery laravel

我使用相同的表单进行创建和编辑。其中大部分都是display: none。这是流量，输入日期和点击搜索按钮的方式。它将返回数据并显示隐藏的表单。这是迄今为止的代码：

＆＃13;
＆＃13; 
$('button[type="search"]').click(function()
{
    $(".row-bot, .row-info, .table-bordered").show();
});

$('button[type="search"]').click(function(e)
{
    $.ajax(
    {
        url: "{{ route('fine.search') }}",
        type: "POST",
        data:
        {
            '_token': '{{csrf_token() }}',
            'driver_id': $('select[name="driver_id"]').val(),
            'fine_date': $('input[name="fine_date"]').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-3 col-sm-3 col-md-3',
                    }).attr(
                    {
                        type: 'radio',
                        name: 'car_id'
                    }).val(data.car_id);
                    PlateEle = $("<div/>",
                    {
                        "class": 'col-xs-3 col-sm-3 col-md-3',
                    }).html(data.plate_no);
                    StartELe = $("<div/>",
                    {
                        "class": 'col-xs-3 col-sm-3 col-md-3',
                    }).html(data.start_time);
                    EndEle = $("<div/>",
                    {
                        "class": 'col-xs-3 col-sm-3 col-md-3',
                    }).html(data.end_time)
                });
                $('#search-result').empty().append(CarEle, PlateEle, StartELe, EndEle, HideEle);
                $('#noData').hide();
                $('#search-result').show()
            }
        },
        error: function(data)
        {
            if (data.getCarbyDriver == null)
            { // if the result is null
                $('#noData').show();
                $(".row-bot, #search-result, .table-bordered").hide(); // show the div..
            }
        }
    });
});
＆＃13; 
<div class="row top">
    <div class="col-xs-4 col-sm-4 col-md-4">
        <div class="form-group">
            <label class="control-label">Driver Name:</label> {!! Form::select('driver_id', $driver, null, array('class' =&gt; 'form-control')) !!}
        </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4">
        <div class="form-group">
            <label>Fine Date:</label> {!! Form::text('fine_date', null, array('id' =&gt; 'datetimepicker', 'class' =&gt; 'form-control')) !!}
        </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4">
        <div class="form-group filter-btn">
            <button class='btn btn-info' type='search'>Search</button>
        </div>
    </div>
</div>
<div class="row-info"></div>
<table class="table table-bordered" style="display: none">
    <tr>
        <td class="col-xs-3 col-sm-3 col-md-3" style="text-align: center;">
            <label>End Time</label>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <label>#</label>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <label>Plate Number</label>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <label>Start Time</label>
            </div>
            <div id="search-result"></div>
        </td>
    </tr>
</table>
<div class="col-xs-12 col-sm-12 col-md-12" id="noData" style="display: none; text-align: center;">
    No data to display
</div>
<div class="row-bot" style="display: none;">
    <div class="col-xs-6 col-sm-6 col-md-6">
        <div class="form-group">
            <label>Reference No:</label> {!! Form::text('reference_no', null, array('class' =&gt; 'form-control')) !!}
        </div>
        <div class="form-group">
            <label class="control-label">Type:</label> {!! Form::select('type', $FineTypeList, null, array('class' =&gt; 'form-control')) !!}
        </div>
    </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
    <button class="btn btn-primary" type="submit">Submit</button>
</div>
＆＃13;
＆＃13;
＆＃13;

一切正常，但当我尝试编辑时，我希望它显示所有表单而不点击搜索按钮。有什么想法吗？

1 个答案:

答案 0 :(得分：0)

我没有看到任何编辑器函数挂钩到与所述函数关联的任何事件，所以我只是添加了一个按钮和jQ来显示所有表单（至少OP提供的内容）：

<button class="btn btn info">Edit</button>

$(".btn-info").on('click', function() {
$('.top').show();
 // editor functions...
});

＆＃13;
＆＃13; 
$('button[type="search"]').click(function() {
  $(".row-bot, .row-info, .table-bordered").show();
});


$('button[type="search"]').click(function(e) {
  $.ajax({
    url: "{{ route('fine.search') }}",
    type: "POST",
    data: {
      '_token': '{{csrf_token() }}',
      'driver_id': $('select[name="driver_id"]').val(),
      'fine_date': $('input[name="fine_date"]').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-3 col-sm-3 col-md-3',
          }).attr({
            type: 'radio',
            name: 'car_id'
          }).val(data.car_id);
          PlateEle = $("<div/>", {
            "class": 'col-xs-3 col-sm-3 col-md-3',
          }).html(data.plate_no);
          StartELe = $("<div/>", {
            "class": 'col-xs-3 col-sm-3 col-md-3',
          }).html(data.start_time);
          EndEle = $("<div/>", {
            "class": 'col-xs-3 col-sm-3 col-md-3',
          }).html(data.end_time)
        });
        $('#search-result').empty().append(CarEle, PlateEle, StartELe, EndEle, HideEle);
        $('#noData').hide();
        $('#search-result').show()
      }
    },
    error: function(data) {
      if (data.getCarbyDriver == null) { // if the result is null
        $('#noData').show();
        $(".row-bot, #search-result, .table-bordered").hide(); // show the div..
      }
    }
  });
});
$(".btn-info").on('click', function() {
  $('.top').show();
  // editor functions...
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row top">
  <div class="col-xs-4 col-sm-4 col-md-4">
    <div class="form-group">
      <label class="control-label">Driver Name:</label>
      {!! Form::select('driver_id', $driver, null, array('class' => 'form-control')) !!}
    </div>
  </div>

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

  <div class="col-xs-4 col-sm-4 col-md-4">
    <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-3 col-sm-3 col-md-3" style="text-align: center;">
      <label>End Time</label>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <label>#</label>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <label>Plate Number</label>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <label>Start Time</label>
  </div>
  <div id="search-result"></div>
  </div>
</table>

<div id="noData" class="col-xs-12 col-sm-12 col-md-12" style="display: none; text-align: center;">No data to display</div>

<div class="row-bot" style="display: none;">
  <div class="col-xs-6 col-sm-6 col-md-6">
    <div class="form-group">
      <label>Reference No:</label>
      {!! Form::text('reference_no', null, array('class' => 'form-control')) !!}
    </div>

    <div class="form-group">
      <label class="control-label">Type:</label>
      {!! Form::select('type', $FineTypeList, null, array('class' => 'form-control')) !!}
    </div>
  </div>
</div>

<div class="col-xs-12 col-sm-12 col-md-12">
  <button type="submit" class="btn btn-primary">Submit</button>
</div>
<button class="btn btn info">Edit</button>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题