基于Javascript条件渲染刀片模板

Question

我有

帐户＆gt;索引页面有一个表和其他模态，我切成一个小的刀片视图。在该页面上，我有100000个帐户。

问题

在我的编辑模式之上有一部分PHP正在发出100000个卷发请求，导致我的帐户出现大量延迟＆gt;索引页面。

我的目标

是为了防止在前面渲染这些刀片，只有在用户点击铅笔图标时才会渲染。

这是我的 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')

点击铅笔进行编辑。

OR

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

点击垃圾进行删除。

我该怎么做？

任何关于如何防止这种情况的提示都将是一个巨大的帮助！

Answer 1

您不能使用javascript代码更改刀片呈现，因为您的服务器上正在进行刀片呈现，并且您的浏览器上正在发生javascript。

您可以做的是添加当用户与您的网页互动时隐藏这些部分的JavaScript。

Show or hide an element using javascript in all browsers