How to rendering blade base on JS condition?

I have an index page with a table

I load them like this on my account.index blade.

@extends('layouts.internal.master')
@section('content')
<link rel="stylesheet" href="http://ift.tt/2bQMwCo">

@include('layouts.internal.styles.datatable')

<style type="text/css">
  .ui-autocomplete { z-index:2147483647; }
  .eac-sugg{
    color:#ccc;
    padding-left: 10px;
  }
  #map,#fake-map{
    width: 100%;
    height: 300px;
    border-radius: 10px;
  }
  #loading{
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 40%;
    width: 40px;
  }
</style>


<div class="row">
  <div class="col-xs-12">
    <img id="loading" src="/images/loaders/svg/2.svg">
    <img id="fake-map" src="/images/photos/map/2.png" class="">
    <div id="map" class="r-panel hidden"></div>
  </div>
</div>

<br>

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

    <div class="col-sm-10">
      <input type="text" class="form-control mb20" id="myInputTextField" placeholder="Search">
    </div>
    <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')

          <?php

          if (strstr($account->account_type,'customer')){
            $color = 'success';
          }elseif (strstr($account->account_type,'admin-super')){
            $color = 'danger';
          }elseif ($account->account_type =='admin-readonly'){
            $color = 'info';
          }elseif ($account->account_type =='admin'){
            $color = 'warning';
          }else
          $color = 'default';


          $count_cpe = 0;

          if(isset($vcpes)){
            foreach( $vcpes as $vcpe ){
              if( $vcpe->account_id == $account->account_id ){
                $count_cpe++;
              }
            }
          }



          $account_type = $account->account_type;
          $customer_type = $account->customer_type;

          if ($customer_type == 1){
            $customer_type = 'Business';
            $color2 = '#FF8300';
            $image = '/images/map/3.png';
          }else if ($customer_type == 2){
            $customer_type = 'Residential';
            $color2 = '#009688';
            $image = '/images/map/4.png';
          }else{
            $customer_type = 'Small Business';
            $color2 = '#673AB7';
            $image = '/images/map/sb.png';

          }

          $user = DB::table('users')->where('account_id','=',$account->account_id)->first();


          ?>

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

            " width="30px"> --}}

            <span class="badge" style="background-color: ">{!! $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')

---

Right now, I rendering all those blade as page load, but now, I only want to render

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

when I clicked on the pencil to edit.

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

when I clicked on the trash to delete.

---

How do I do that ?

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2bJzEjU
via IFTTT