Rendering blade template base on Javascript Condition - javascript

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.
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 !== 'admin#benunets.com')
<tr>
<td>{{$x += 1 }}</td>
<td>{!! $account->account_id !!}</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 !!!


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

Related

How do i make a javascript popup input field in php laravel?

I'm trying to make a popup module that once a button is clicked, it displays a popup with some fields like name surname etc that the user can fill out and save. However i tried to do that but i can't seem to connect it together. I'm not sure if anyone can give me directions on where i'm supposed to put the html css and javascript? As im using php laravel.
This is the view page.
#extends('layouts.adminmaster')
#section('section')
<div class="container paddingTop20">
<h1>Negombo View Places</h1>
<hr>
<div class="row">
<div id="date-picker-example" class="col-xs-3">
<form action="{{ route('admin.place.submit') }}" method="POST" id="form1" style="
padding: 7px;
margin-left: 15px;
justify-content: flex-end;
text-shadow: 0 0 black;
float: right;
">
#csrf
<input type="date" id="fDate" name="startDate" value="{{ $startDate ?? '' }}">
<input type="date" id="tDate" name="endDate" value="{{ $endDate ?? '' }}">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</div>
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Place ID</th>
<th>Place Name</th>
<th>Coordinates (Umbrella)</th>
<th>Coordinates (N)</th>
<th>Coordinates (E)</th>
<th>Map Name</th>
<th>Availabilty</th>
#if (Auth::user()->role == "admin")
<th>Action</th>
#endif
<th>Quick Book</th>
</tr>
</thead>
<div id="preloader"></div>
<tbody id="hidden_table_processing">
#foreach ($places ?? '' as $place)
<tr>
<td>{{ $place->place_id }}</td>
<td>{{ $place->place_name }}</td>
<td>L({{ $place->co_xl }}, {{ $place->co_yl }})</td>
<td>{{ $place->coordsn }}</td>
<td>{{ $place->coordse }}</td>
<td>{{ $place->map_name }}</td>
<td>
#if ($place->status==0)
<span style="color: green">Available</span>
#endif
#if ($place->status==-1)
<span style="color: gray"> Not Available </span>
#endif
#if ($place->status==2)
<span style="color: red"> Booked </span>
#endif
</td>
#if (Auth::user()->role == "admin")
<td> Edit /
#if ($place->status == -1)
Activate
#else
Deactivate
#endif
</td>
#endif
<td>
#if ($place->status==0)
<span></span>
// THIS IS THE BUTTON WHERE ONCE CLICKED THE POPUP SHOULD SHOW UP
<button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal"></button>
// END
#endif
#if ($place->status==-1)
<span>Book</span>
#endif
#if ($place->status==2)
<span>Booked</span>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
<div id="loader_space"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
<script>
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
</script>
<script>
var startDate = document.getElementById('fDate').value;
var endDate = document.getElementById('tDate').value;
document.write(startDate);
document.write(endDate);
paceOptions = {
ajax: true,
document: true,
eventLag: false
};
Pace.on('done', function() {
$('#preloader').delay(100).fadeOut(500);
document.getElementById("loader_space").style.display = "none";
$('#hidden_table_processing').fadeIn(200);
});
</script>
</div>
</div>
</div>
#endsection

You can do it something like this
<table class="table table-striped table-nowrap custom-table mb-0 " id="tblAllOrder">
<thead>
<tr>
<th>Price (£)</th>
<th>Status</th>
</tr>
</thead>
<tbody>
#foreach($orderList as $result)
<tr>
<td>{{$result->id}}</td>
<td>
{{$output[0]}} </br> {{$output[1]}}
</td>
#endforeach
</tbody>
</table>
And then add model anywhere where your section ends
<div class="modal right fade" id="project-details" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog" role="document">
<button type="button" class="close md-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content" style="overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close xs-close" data-dismiss="modal">×</button>
<div class="row w-100">
<div class="col-md-7 account d-flex">
Order Detail
</div>
</div>
</div>
<div class="orderDetail"> Order Detail </div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
now when you click the anchor tag each time it will open this model.

how to change the bind grid view in separately

I created one grid view to get the database table details,
here, when I click the Next Sync button it will pop up this box and I can choose the date and time,
but the problem is when I clicked any Next Sync button only change the first DateTime only,
this is the code of the table grid view
<table class="table table-striped border-bottom">
<thead>
<tr>
<th>Select to Sync.</th>
<th class="sorting">Source</th>
<th>Last Sync. Date</th>
<th>Download</th>
<th>Status</th>
<th>Next Sync Schedule</th>
<th>Schedule</th>
</tr>
</thead>
<tbody data-bind="foreach: PayrollIntegrationVM.GridDataList">
<tr>
<td><input type="checkbox" data-bind="checked:SHTYP_IS_MANUAL_SYNC"
class="i-checks" name="foo"></td>
<td data-bind="text:SHTYP_NAME"></td>
<td data-bind="text: moment(SHTYP_LAST_DATE).format('L LTS')"></td>
<td>
<div data-bind="ifnot: SHTYP_SYNC_STATUS">
<a href="#" data-bind="click: PayrollIntegrationVM.ErrorLog">
<span class="mr-2">
<img src="~/Content/img/icon-excel.png"
alt="Download">
</span> Download Error Log
</a>
</div>
</td>
<td data-bind="text: SHTYP_SYNC_STATUS? 'Success' : 'Failed'"><a href="#">
<i class="fa fa-close text-danger"></i></a></td>
<td data-bind="text: moment(SHTYP_NEXT_DATE).format('L LTS')" id="SHTYP_NEXT_DATE_GET"
name="Sync_Next_Date"></td>
<td><a href="#" id="Next-Sync-Value" data-toggle="modal" data-target="#sync"
name="Next_Sync_button">Next Sync.</a></td>
</tr>
</tbody>
this is the date time picker code
<div class="modal" id="sync" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-body">
<div class="col ml-5 d-flex flex-column justify-content-end">
<input type="date" class="form-control" id="NextSyncDate">
<input type="time" class="form-control mt-2" id="NextSyncTime">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="DoneButtonFunction()">Done</button>
</div>
</div>
</div>
</div>
this is the script part
<script language="JavaScript">
function DoneButtonFunction() {
var nextSyncDate = $('#NextSyncDate').val();
var nextSyncTime = $('#NextSyncTime').val();
var DateTime = nextSyncDate +" "+ nextSyncTime;
document.getElementById('SHTYP_NEXT_DATE_GET').innerHTML = DateTime;
}
}
</script>

it looks like in your js function, you find the element with the ID 'SHTYP_NEXT_DATE_GET', and js looks for the first one, try to save the row in the table, or find another way to Identify which 'SHTYP_NEXT_DATE_GET' element you want to edit

Get id of clicked row

I am using "jquery": "^3.4.0" and DataTables 1.10.18.
I am having the following table:
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(() => {
var c = this.id
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
I am trying to put a click listener on the clicked edit button.
However, I currently only get undefined back. Instead I would like to get the id within the first column back.
Any suggestions what I am doing wrong?

I just use your code as example and make some changes in jQuery.
Please try this, hope this works for you.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
$(document).on("click", "#edit-row", function(){
console.log('Id : ', $(this).closest('.text-center').siblings('.sorting_1').text());
alert('Id : '+ $(this).closest('.text-center').siblings('.sorting_1').text());
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>

The this in the click handler was pointing to the global Window object because you were using arrow function, change it to a regular callback and it will work as expected.
Check this answer for more information.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function(event) {
var c = this.id;
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>

You are using arrow functions that will change the scope of this to window so to reference the scope of the element, easiest way is to avoid arrow functions for those handlers and simply use traditional functions:
$(document).ready(function() {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function() {
var c = this.id
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
However, if you still want the arrow functions then pass a event parameter to the arrow function and get the element reference using event.target.
To get the id that you have in the first column you can find the closest table row then select the first table column to get that text value.
You need to use a class selector for all those rows instead of id selector #edit-row as id should be unique in the HTML page.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$(".edit-row").click((e) => {
var c = e.target.id
var hashId = $(e.target).closest('tr').find('td:eq(0)').text().trim();
console.log(hashId)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>

DataTables has own solution, you can use select extension to get selected row data, there is an example very useful for you

Considering your ultimate goal (editable DataTable), I'll allow myself to suggest few improvements to your app, so that you don't really need to get id of clicked row and do all the HTML heavy lifting on your own.
Instead of using external AJAX-call to populate your DataTables, I'd recommend to use embedded ajax option
$("#posts").DataTable({
//specify URL for AJAX-call that retrieves table data in format of array of arrays or array of objects
//where each element/property corresponds to table columns, ajax.dataSrc property should be set to ''
//if data array encompassed into 'data' property (default format), 'dataSrc' can be ommitted
...
ajax: {
url: "/getdata"
dataSrc: ''
}
})
use columns.render option to modify cell contents, to make it appear as a badge or drop-down menu
dataTable = $("#posts").DataTable({
...
columns: [
{ data: "id", title: "Id" },
{
data: "status",
title: "Status",
//render status as a badge, having class, based on status value
render: data => `<span class="badge ${data == "posted" ? "badge-success" : "badge-secondary"}">${data}</span>`
}
...
]
})
and essential point - leave row number mark within dropdown element upon rendering, so you can access this value later on as you need to edit/delete table row
$("#posts").DataTable({
...
columns: [
...
{
data: null,
title: "Actions",
//render 'Actions' column as a drop-down menu wrapper,
//appending 'row' attribute with corresponding row number
//as a value
render: (data, type, row, meta) => `
<div class="dropdown" row="${meta.row}">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i>Edit
<i class="icon-bin"></i>Delete
</div>
</div>
`
}
]
});
use above row numbers in order to modify target table row, using DataTables API methods (e.g. row().remove() for deletion), I'll use simplest example (deletion of the row in the front-end), since you didn't share much details as for whether you want to modify both back end and front end data or only the latter
//delete-row callback as an example of how to use row attribute to modify necessary table row
$("#posts").on("click", ".delete-row", function () {
//grab dropdown wrapper and obtain row number
const rowNumber = $(this)
.closest(".dropdown")
.attr("row");
//delete corresponding table row and re-draw the table
dataTable.row(rowNumber).remove();
dataTable.draw();
});
Complete working DEMO of your sample project can be found over here or you can examine that demo in your browser's Dev Tools, using this link.
P.S. if, for some reason, you still decide to proceed with your approach, you may inquiry this post (which is pretty similar to yours) for a way of getting data model properties ('id', in particular) of clicked row

HTML with id's construct dynamically

I have an html page with a div that has a bootstrap button to collapse/expand a table. I want to click on it to toggle collpase/expand.
I am inspired by this fiddle.
The javascript is
$('.meu-painel-colapsar').on('click', function () {
var id1 = $('.meu-painel-colapsar').attr('id');
var id2 = $('.colapsar-competencias').attr('id');
alert(id1);
$('#' + id2 + ' .colapsar-competencias').collapse('toggle');
});
And the html is
#foreach($dados as $dimensaoNome => $dimensao)
<div class="panel panel-{{ $cores[$dimensaoNome] }} meu-painel-colapsar" id="accordion-{{ $dimensao->id }}">
<button type="button" class="btn btn-success btn-xs"
id="dimensao_{{ $dimensao->id }}"
data-toggle="collapse" data-target="#">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> veja os resultados
</button>
<div class="panel panel-default">
#foreach($dimensao->competencias as $competenciaNome => $competencia)
<div class="panel-heading">
<div class="row">
<div class="col-md-6"><h4 class="competencia-head">{{ $competenciaNome }}</h4></div>
<div class="col-md-6" style="padding-top:8px;">
</div>
</div>
<div class="collapse colapsar-competencias" id="competencia-{{ $competencia->id }}">
<table class="table table-condensed">
<thead>
<tr>
<th>Situação atual</th>
<th class="col-md-6">Oportunidades identificadas</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>{{ $competencia->nivel->texto }}</p>
</td>
<td>
<div class="col-lg-12">
{!! $competencia->recomendacao !!}
</div>
</td>
</tr>
</tbody>
</table>
</div>
#endforeach
</div>
</div>
#endforeach
The id's accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }} are generated with the two foreach's.
The problem is that the javascript code only gets the first id's of accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }}.
I'm struggling with this for hours without success. How can I get this id's correctly when I click the button?

If I'm understanding right, you are much better off not using ids at all and just relying on classes. Use $(this).find(...) to only find .colapsar-competencias elements that are inside the clicked element.
$('.meu-painel-colapsar').on('click', function () {
$(this).find('.colapsar-competencias').collapse('toggle');
});

http://jsfiddle.net/Vq6gt/120/
$('#accordion .panel-collapse',this).collapse('toggle');

Create a reusable modal using JQuery

I know writing an IF-ELSEIF-ELSE statement in the loop below would work, however I want to avoid having to write multiple modals. Instead I am looking for a JQuery modal to pop up when the image icon (basically a info image) is clicked. I want to be able to pass in the error into the function, which will then display in the modal.
Example:
Say I have a 400 Error and 500 Error, when I click the info icon, the definition should appear.
CODE BELOW:
index.gsp
<html>
<%-- Some code (saving space for body) --%>
<body>
<div id="content">
<div id="content-header">
<h1>Error Checking</h1>
</div> <!-- #content-header -->
<div id="content-container">
<div class="portlet">
<div class="portlet-content">
<div class="table-responsive">
<table
class="table table-striped table-bordered table-hover table-highlight table-checkable"
data-provide="datatable"
data-display-rows="25"
data-info="true"
data-search="true"
data-length-change="true"
data-paginate="true">
<thead>
<tr>
<th data-filterable="true" data-sortable="true" data-direction="desc">User ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Task ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Error Message</th>
</tr>
</thead>
<tbody>
<g:each in="${lists}" var="list">
<tr>
<td>${list.userId}</td>
<td>${list.taskId}</td>
<td>
**%{--WANT TO PLACE MODAL CALL HERE--}%**
**<i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i>
${list.errorMsg}**
</td>
</tr>
</g:each>
</tbody>
</table>
</div> <!-- /.table-responsive -->
</div> <!-- /.portlet-content -->
</div> <!-- /.portlet -->
</div> <!-- /#content-container -->
</div> <!-- #content -->
The MODAL I want to pop up:
<div id="styledFreqLargerModal" class="modal modal-styled fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Issue</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-tertiary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

You can generate dynamic id's using your list item's id. Then you can place your modal at the place you have mentioned. The following is a code example:
<div id="styledFreqLargerModal${list.id}" class="modal modal-styled fade">
[..]
</div><!-- /.modal -->
If you are using jQuery-UI
<a class="openDialog" href="#styledFreqLargerModal${list.id}"><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
In your javascript do:
$(document).on("click", "a.openDialog", function() {
$($(this).attr("href")).dialog();
}
If you are using bootstrap
<a data-toggle="modal" href="#styledFreqLargerModal${list.id}"><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>

Solved the problem... Used Jquery modal. This prevented me from having to create multiple modals. In the modal I have a "click" method that determines which item got clicked, then outputs that specific message. See code below.
index.gsp
<html>
<%-- Some code (saving space for body) --%>
<body>
<div id="content">
<div id="content-header">
<h1>Error Checking</h1>
</div> <!-- #content-header -->
<div id="content-container">
<div class="portlet">
<div class="portlet-content">
<div class="table-responsive">
<table
class="table table-striped table-bordered table-hover table-highlight table-checkable"
data-provide="datatable"
data-display-rows="25"
data-info="true"
data-search="true"
data-length-change="true"
data-paginate="true">
<thead>
<tr>
<th data-filterable="true" data-sortable="true" data-direction="desc">User ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Task ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Error Message</th>
</tr>
</thead>
<tbody>
<g:each in="${lists}" var="list">
<tr>
<td>${list.userId}</td>
<td>${list.taskId}</td>
<td>
<g:if test="${(list.errorMsg).contains("400")}">
<a id="modalAlert-${list.taskId}" class="modal-alert-null" ><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
${list.errorMsg}
</g:if>
<g:elseif test="${(list.errorMsg).contains("500")}">
<a id="modalAlert-${list.taskId}" class="modal-alert-outOfBounds" ><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
${list.errorMsg}
</g:elseif>
</td>
</tr>
</g:each>
</tbody>
</table>
</div> <!-- /.table-responsive -->
</div> <!-- /.portlet-content -->
</div> <!-- /.portlet -->
</div> <!-- /#content-container -->
</div> <!-- #content -->
<r:require modules="jquery"/>
<script type="text/javascript">
$(document).ready(function() {
// Null pointer exception
$(".modal-alert-null").click(function() {
modalAlert("400 error message");
});
// outOfBoundsException
$(".modal-alert-outOfBounds").click(function() {
modalAlert("500 error message");
});
});
function modalAlert(description)
{
$("body").append(buildAlertModal());
$("#alert-modal .modal-description").html(description);
$("#alert-modal").modal("show");
}
function buildAlertModal() {
return "<div id='alert-modal' class='modal modal-styled fade'>" +
" <div class='modal-dialog'>" +
" <div class='modal-content'>" +
" <div class='modal-header'>" +
" <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>" +
" <h3 class='modal-titl'>Exception Info</h3>" +
" </div>" +
" <div class='modal-body'>" +
" <p class='modal-description'></p>" +
" </div>" +
" <div class='modal-footer'>" +
" <button type='button' class='btn btn-tertiary' data-dismiss='modal'>Close</button>" +
" </div>" +
" </div>" +
" </div>" +
"</div>";
}
function closeModalAlert() {
$("#alert-modal").modal("hide");
}
</script>

Categories