基于Javascript条件的渲染刀片模板

Question

我有

我将其分解为一个小的刀片视图的帐户>带有表格和其他模式的索引页。 在该页面上，我有100000个帐户。

问题

在我的编辑模式之上，有一部分PHP发出了100000个curl请求，这在我的帐户>索引页面上造成了巨大的延迟。

我的目标

是为了防止在右上方渲染这些刀片，并且仅当用户单击“铅笔”图标时才渲染。

---

这是我的account.index刀片

@extends('layouts.internal.master')
    @section('content')



    <div class="panel account-panel" style="padding: 30px;">
      <div class="panel-body">


        <div class="col-sm-2">
          <a id="account-create" class="btn btn-success btn-block mb20" data-toggle="modal" data-target=".account-create">Create</a>
        </div>

        <div class="table-responsive" style="margin-bottom: 0;">
          <table class="table" id="account-table">
            <thead>
              <tr>
                <th>#</th>
                <th>Account ID</th>
                <th>Customer Type</th>
                <th>Name</th>
                <th>Email</th>
                <th class="text-center">Auto Provisioning</th>
                <th class="text-center">AP</th>
                <th style="min-width: 90px;">Action</th>
              </tr>
            </thead>
            <tbody>

              <?php
              $x = 0;

              ?>
              @foreach( $accounts as $account )

              @if($account->email_address !== 'admin@benunets.com')

              <tr>
                <td>{{$x += 1 }}</td>
                <td><a href="/account/{!! $account->account_id !!}">{!! $account->account_id !!}</a></td>
                <td>

                {{-- <img src="{{ $image }}" width="30px"> --}}

                <span class="badge" style="background-color: {{ $color2 }}">{!! $customer_type !!}</span></td>
                <td>{!! ucfirst($account->first_name) !!} {!! ucfirst($account->last_name) !!}</td>
                <td>{!! $account->email_address !!}</td>
                <td class="text-center" >

                  @if($user != null AND $user->auto_provisioning == 1)
                  {!! Helper::intBoolToIcon($user->auto_provisioning) !!}
                  @else
                  <i title="false" style="font-size: 18px; color: #F44336" class="fa fa-times"></i>
                  @endif

                </td>
                <td class="text-center" ><b>{!! $count_cpe !!}</b></td>
                <td class="text-center">

                  <!-- Buttons -->
                  <div class="tool-buttons">
                    <ul class="button-list">

                      <!-- Edit -->
                      <li><a data-toggle="modal" data-target=".account-edit-{!! $account->account_id !!}" class="tooltips account-edit" data-id="{!! $account->account_id !!}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil"></i></a></li>

                      <!-- Delete -->
                      <li><a data-toggle="modal" data-target=".account-destroy-{!! $account->account_id !!}" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></a></li>
                    </ul>
                  </div>

                </td>
              </tr>

              @endif
              @endforeach

            </tbody>
          </table>
        </div>
      </div>
    </div>

    @include('account.modal.account.destroy')
    @include('account.modal.account.create')
    @include('account.modal.account.edit')


@section('pagescripts')

<script type="text/javascript">


  /*=============================================================================================
  =            Edit            =
  ============================*/


  //Edit Mode
  $('.account-edit').click( function() {


    var id = $(this).data("id");
    console.log(id);

    //Style
    var val2 = $("#auto_provisioning_switch-"+id).val();

    //Set the AP switch
    if(val2 == 1){
      $("#auto_provisioning_switch-"+id).bootstrapSwitch('state', true);
      $("[name='auto_provisioning_switch']").val(1);
      $('#service_plan_div-'+id).show();

      // Set the service plan dd menu
      var ajax = $.ajax({url: '/api/account/'+id+'/service_plan'});
      ajax.done(function (service_plan) {
        console.log(service_plan+' | id : ' + id );
        $('#service_plan-'+id).val(service_plan);
        });

    }else{
      $("#auto_provisioning_switch-"+id).bootstrapSwitch('state', false);
      $("[name='auto_provisioning_switch']").val(0);
      $('#service_plan_div-'+id).hide();
    }


  });






</script>

@stop

---

我只想渲染

@include('account.modal.account.edit')

当我单击铅笔进行编辑时。

要么

@include('account.modal.account.destroy')

当我点击垃圾桶将其删除时。

---

我怎么做 ？

---

关于如何预防的任何提示将是巨大的帮助！

Answer 1

您无法使用Javascript代码更改刀片渲染，因为刀片渲染正在服务器上进行，而javascript正在浏览器上进行。

您可以做的是添加一个JavaScript，当用户与您的页面进行交互时，该JavaScript隐藏这些部分。

在所有浏览器中使用javascript显示或隐藏元素