CODEWITHSUNDEEP
javascriptphplaravellaravel-5laravel-blade
code-8
code-8

Reputation: 58662

Rendering blade template base on Javascript Condition

I have

an account > index page with a table, and other modals, that I slice into a small blade views. On that page, I have 100000 accounts.

Problem

There is a section of PHP on top of my edit modal that is making 100000 curls requests, and cause a huge delay on my account > index page.

My goal

is to prevent rendering those blades right up front and only render if the user click on the Pencil icon.

enter image description here

Here is my account.index blade

@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 !== '[email protected]')
          
              <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

I only want to render

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

when I clicked on the pencil to edit.

OR

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

when I clicked on the trash to delete.

How do I do that ?

Any hints on how to prevent that will be a huge help !!!

Upvotes: 1

Views: 1679

Answers (1)

NiRR
NiRR

Reputation: 5002

You can't cause the blade rendering to change with javascript code becuase the blade rendering is happening on your server and the javascript is happening on your browser.

What you CAN do is add javascript that hides the sections when a user interacts with your page.

Show or hide an element using javascript in all browsers

Upvotes: 1

Related Questions