Develop Reference

How to add approve and reject button in each row of datatable in jquery?

I want to add a cross button and a tick button in each row of data table.
Below is the cshtml code:
<div class="content-block">
<!-- Page Container -->
<div class="section-full content-inner">
<div class="container">
<!---data23---->
<div class="row mb-5">
<div class="col-md-12">
<h4 class="font-weight-700 mb-4">Verification</h4>
<hr>
</div>
</div>
<div class="cph-verification-section p-4 mb-5">
<div class="row justify-content-center">
<div class="col-md-10 mt-4">
<table id="cphverification-datatable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>SLNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone number</th>
<th>CPH ID</th>
#*<th>Status/Action</th>*#
</tr>
</thead>
<tbody>
<tr>
#*<td class="text-center">
<button type="button" class="btn btn-sm btn-success" id="approve_cph"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-sm btn-danger ml-2" id="reject_cph"><i class="fa fa-times"></i></button>
</td>*#
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
And given below is the code of javascript:
$.ajax({
url: "GetUserCPHListForVerification",
method: "post",
beforeSend: function () {
$('#loading-area').show();
},
success: function (data) {
$('#loading-area').hide();
if (data == 'There is no data for this request') {
swal("Data Not Found", "There is no data with us for this request", "error");
}
else {
var tabledata = [];
var obj = JSON.parse(data);
for (var k = 0; k < obj.length; k++) {
var row = {};
row["SLNo"] = obj[k].SLNo;
row["Name"] = obj[k].Name;
row["Email"] = obj[k].Email;
row["PhoneNo"] = obj[k].PhoneNo;
row["CPHID"] = obj[k].CPHID;
tabledata.push(row);
var userdataRow = document.querySelector("#cphverification-datatable > tbody");
$('#cphverification-datatable> tbody:last-child').append('<tr><td>' + row.SLNo + '</td><td>' + row.Name + '</td><td>' + row.Email + '</td><td>' + row.PhoneNo + '</td><td>' + row.CPHID + '</td></tr>');
}
$('#cphverification-datatable').DataTable({
searching: false,
paging: true,
info: false,
lengthChange: false,
pageLength: 5,
bSort: false
});
$('.cph-verification-section').addClass('visible', 600);
}
},
error: function (data) {
console.error(data);
$('#loading-area').hide();
}
})
When I am trying to uncomment #Status/Action# data table is unable to load. So how to add buttons in data table row?
Any help will be highly appreciated.
Thank You!

Well the only thing that I don't understand is why you have static content inside the <tbody></tbody> tags, and it might be a mistake where you append the code in your JS code, try this:
<div class="content-block">
<!-- Page Container -->
<div class="section-full content-inner">
<div class="container">
<!---data23---->
<div class="row mb-5">
<div class="col-md-12">
<h4 class="font-weight-700 mb-4">Verification</h4>
<hr>
</div>
</div>
<div class="cph-verification-section p-4 mb-5">
<div class="row justify-content-center">
<div class="col-md-10 mt-4">
<table id="cphverification-datatable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>SLNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone number</th>
<th>CPH ID</th>
<th>Status/Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
$.ajax({
url: "GetUserCPHListForVerification",
method: "post",
beforeSend: function () {
$('#loading-area').show();
},
success: function (data) {
$('#loading-area').hide();
if (data == 'There is no data for this request') {
swal("Data Not Found", "There is no data with us for this request", "error");
}
else {
var tabledata = [];
var obj = JSON.parse(data);
for (var k = 0; k < obj.length; k++) {
var row = {};
row["SLNo"] = obj[k].SLNo;
row["Name"] = obj[k].Name;
row["Email"] = obj[k].Email;
row["PhoneNo"] = obj[k].PhoneNo;
row["CPHID"] = obj[k].CPHID;
tabledata.push(row);
//I commented this cause I didn't find where you used it
//var userdataRow = document.querySelector("#cphverification-datatable > tbody");
var code;
code = '<tbody><tr><td>' + row.SLNo + '</td><td>' + row.Name + '</td><td>' + row.Email + '</td><td>' + row.PhoneNo + '</td><td>' + row.CPHID + '</td>'
+ '<td class="text-center">'
+ '<button type="button" class="btn btn-sm btn-success" id="approve_cph"><i class="fa fa-check"></i></button>'
+ '<button type="button" class="btn btn-sm btn-danger ml-2" id="reject_cph"><i class="fa fa-times"></i></button></td></tr></tbody>';
$('#cphverification-datatable').append(code);
}
$('#cphverification-datatable').DataTable({
searching: false,
paging: true,
info: false,
lengthChange: false,
pageLength: 5,
bSort: false
});
$('.cph-verification-section').addClass('visible', 600);
}
},
error: function (data) {
console.error(data);
$('#loading-area').hide();
}
})
From what I could see it seems you were appending all of the code after the tr you were statically creating creating another tr but since yo had one created with the wrong number of columns, maybe that was the reason it didn't rendered well, use the devtools of your browser maybe the content was there and it was that the html wasn't well formed
I think that only $('#cphverification-datatable').append(code); should be enough with no more things in the selector.
Edit for the question in the comments:
In order for you to use the
$('#approve_cph').click(); listener, such element ('#approve_cph') must exist already. I mean
First you create the element
Secondly, you create the listener.
But there's another solution, which is delegated event listeners, JQuery brings an easy way to do so.
I suggest you something like this, at the beginning of the document, or at least before the ajax call:
I don't know if you have many container-class elements, if you only have one you could add an id to it and be more specific, but don't worry we'll do it using the class container
$(".container").on("click", ".btn-success", function (e) {
//Do something
});
You could change ".btn-success" for "#approve_cph", and if the div class="container"> is unique, you could add an ID to it, but that's just a suggestion.
What the previous code does is,
Attach an event listeners on click to any element with the class "container"
Checks if the click was given in an element with class .btn-success
The previous code is very useful as you attach the listener to the container and then if the click was given in .btn-success, then the function will be executed, otherwise it will not.
As I told you, you could also do something like:
$(".container").on("click", "#approve_cph", function (e) {
//Do something
});
But if the element with class container is unique you could assign it an id, and then use the class in delegation.
Read this short blog https://javascript.info/event-delegation, so you can understand why it is better to use event delegation when possible.

Reading the official Doc here you can try something like this:
Uncomment your #*<th>Status/Action</th>*#
Add columnDefs to DataTable:
$('#cphverification-datatable').DataTable({
searching: false,
paging: true,
info: false,
lengthChange: false,
pageLength: 5,
bSort: false,
columnDefs: [ {
"targets": -1, // A negative integer - column index counting from the right
"data": null, // For 'defaultContent' param
"defaultContent": "<button>Click!</button>" // Your custom HTML
} ]
});
/* And from official Doc here the event trigger */
$('#cphverification-datatable tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
alert("The Name is: "+ data[ 1 ] );
} );
I clearly can't test it, but conceptually I hope it works.
Cheers

Call an AngularJS function on button click is not working

I have a requirement where I want to call an AngularJS function on button click. So I tried like below
var app2 = angular.module('grdContrl', ['datatables']);
app2.controller('dtAssignVendor', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.GetFiler = function () {
var strZone = $('#SAPExecutive_R4GState').val();
var strUtility = $('#ddlUtility').val();
$scope.dtColumns = [
DTColumnBuilder.newColumn(null, '').renderWith(function (data, type, full) {
return '<input type="checkbox" class="check" data-object-id="' + full.objectid + '">'
}),
DTColumnBuilder.newColumn("MAINTENANCEZONENAME", "MAINTENANCEZONENAME"),
DTColumnBuilder.newColumn("MAINTENANCEZONECODE", "MAINTENANCEZONECODE")
]
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: AppConfig.PrefixURL + "/App/GetMPFilter",
type: "POST",
data: JSON.stringify({ strZone: strZone, strUtility: strUtility }),
})
.withPaginationType('full_numbers')
.withDisplayLength(10);
}
}])
<button class="btn btn-default customBtn" ng-click="GetFilter();">
<i class="fa fa-filter" aria-hidden="true"></i>
Filter
</button>
---------------------------
<div ng-app="grdContrl">
<div class="flTable" id="dtAssignVendor">
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%">
</table>
</div>
</div>
I want this to work on the above mentioned button click.

You can not get filter values, because filter button is outside of controller and if you are using datatable then also add dt-option, dt-columns and dt-instance into <table> as attributes.
You have do like this way
<div ng-app="grdContrl" ng-controller="dtAssignVendor"> <!-- COMMON ANCESTOR-->
<button class="btn btn-default customBtn" ng-click="GetFilter();">
<i class="fa fa-filter" aria-hidden="true"></i> Filter
</button>
<div class="flTable" id="dtAssignVendor">
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%" datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstanceNonInvProduct">
</table>
</div>
</div>
Also inject into controller.
app2.controller('dtAssignVendor',function ($scope, $http, DTOptionsBuilder, DTColumnBuilder,DTInstances) {
$scope.GetFiler = function () {
//get input values into scope instead of javascript variable
//var strZone = $('#SAPExecutive_R4GState').val();
//var strUtility = $('#ddlUtility').val();
$scope.strZone = $scope.SAPExecutive_R4GState;
$scope.strUtility = $scope.ddlUtility;
//redraw table on button click
$scope.dtInstanceNonInvProduct.DataTable.draw();
}
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: AppConfig.PrefixURL + "/App/GetMPFilter",
type: "POST",
data: JSON.stringify({ strZone: $scope.strZone, strUtility: $scope.strUtility }),
})
.withPaginationType('full_numbers')
.withDisplayLength(10);
$scope.dtColumns = [
DTColumnBuilder.newColumn(null, '').renderWith(function (data, type, full) {
return '<input type="checkbox" class="check" data-object-id="' + full.objectid + '">'
}),
DTColumnBuilder.newColumn("MAINTENANCEZONENAME", "MAINTENANCEZONENAME"),
DTColumnBuilder.newColumn("MAINTENANCEZONECODE", "MAINTENANCEZONECODE")
]
$scope.dtInstanceNonInvProduct = {};
})

The template of your code should be something like this:
<div ng-app="myApp">
<div controller="ctrl1">
<button ng-click="someFunInCtrl1()">Click Me</button>
...
</div>
<div controller="ctrl2">
<button ng-click="someFunInCtrl2()">Click Me</button>
...
</div>
</div>
You are unable to call GetFilter function because you are calling it from outside controller scope. As #Karim said
you need to use the ng-controller directive and wrap the button inside it

As far as i see you did not bind the controller to your template, you need to use the ng-controller directive and wrap the button inside it (and correct the spelling error on $scope.getFilter as raised in the comments)
<div ng-app="grdContrl" ng-controller="dtAssignVendor"> <!-- COMMON ANCESTOR-->
<button class="btn btn-default customBtn" ng-click="GetFilter();">
<i class="fa fa-filter" aria-hidden="true"></i> Filter
</button>
---------------------------
<div class="flTable" id="dtAssignVendor">
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%">
</table>
</div>
</div>

Trying to return to previous page with javascript + html

UPDATE
I solved the problem, it was quite silly, I named the "id" wrong. It was: id="groups_menu_left" when it actually is: id="especies_menu_left".
Sorry to waste your guys's time.
When I hit the button "Voltar" which means "Back" it isn't going back, can anyone help me?
My application is basically a database for shelters, so when people want to adopt a new pet, they can look for the options various shelters have. When choosing the "Species" it shows all the animals in that category, and when you like an animal, you can click on it for more info. But if a person didn't like the specific info for some reason, they can return to look for more animals, and that's where the button "Voltar" is helpful, but it's not working. When I click on it it doesn't do anything. It doesn't show an error when debugging, so my guess is that I'm missing something in the code.
(function($) {
$.extend({
route: function(path) {
var previousUrl = window.location.hash.slice(1);
window.location.hash = '#' + path;
var pathArray = path.split('/');
$('div[id^="template_"]').hide();
$('button[id^="menu_"]').hide();
var routes = [{
id: 1,
name: 'index',
regex: '(index)'
}, // index
{
id: 2,
name: 'register',
regex: '(register)'
}, // register
{
id: 3,
name: 'especies',
regex: '(especies)'
}, // especies
{
id: 4,
name: 'especie_show',
regex: '(especie).*?(\\d+)'
}, // especie/{:id}
{
id: 5,
name: 'animal_show',
regex: '(animal).*?(\\d+)$'
}, // animal/{:id}
];
var route = 0;
var template = null;
$.each(routes, function() {
var test = new RegExp(this.regex);
if (test.test(path)) {
route = this.id;
template = this.name;
}
});
//Logout button
$('#' + template + '_menu_logout').on('click', function() {
removeToken('token');
});
switch (template) {
case 'index':
break;
case 'register':
break;
case 'especies':
setButton('left', template, 'index', 'redirect', null);
$.api.getRecords('especie', null, getToken('token'), populateEspeciesTable);
break;
case 'especie_show':
setButton('left', template, 'especies', 'redirect', null);
setButton('right', template, 'especie/' + pathArray[1] + '/edit', 'redirect', null);
var params = 'filter=id_especie%3D' + pathArray[1] + '&fields=nome_especie';
$.api.getRecords('especie', params, getToken('token'), populateEspecieShowName);
params = 'filter=especie_id_especie%3D' + pathArray[1] + '&fields=nome_animal, notas_animal, foto_animal';
$.api.getRecords('animal', params, getToken('token'), populateEspecieTable);
break;
case 'animal_show':
var animalId = $('#id_animal').val();
setButton('left', template, 'especie/' + animalId, 'redirect', null);
setButton('right', template, 'animal/' + pathArray[1] + '/edit', 'redirect', null);
var params = 'filter=id_animal%3D' + pathArray[1] + '&fields=nome_animal';
$.api.getRecords('animal/' + pathArray[1], null, getToken('token'), populateAnimal);
var urlParts = previousUrl.split('/');
$('#id_animal').val(urlParts[1]);
break;
}
$('#template_' + template).show();
}
});
function setButton(button, page, url, type, func) {
switch (type) {
case 'redirect':
$('#' + page + '_menu_' + button).off().on('click', function() {
$.route(url);
});
break;
}
}
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="template_especies">
<nav class="navbar navbar-fixed-top df-nav cen col-md-12" role="navigation" style="">
<ul class="nav navbar-nav" style="width: 100%">
<li style="float: none; display: inline-block; position: relative; text-align: center">
<img src="img/icone_ap.png" height="47">
</li>
</ul>
</nav>
<div class="row vert-offset-top-30"></div>
<div class="col-md-2"></div>
<div class="col-md-8">
<img src="img/cao.jpg" width="150" hspace="20"> <img src="img/gato.jpg" width="150">
<table class="table" id="table_especies">
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<footer>
<ul class="nav navbar-nav" style="width: 100%">
<li class="pull-left"><button type="button" id="groups_menu_left" class="btn btn-default btn-menu">Voltar</button></li>
<li class="pull-left"><button type="button" id="groups_menu_logout" class="btn btn-default btn-menu-logout">Sair</button></li>
</ul>
</footer>
<div class="col-md-2"></div>
</div>
Thanks in advance!!!

Try using window.history.back(); and attaching it to the element with onclick="window.history.back();
You can try it below.
<li class="pull-left">
<button type="button" onclick="window.history.back();" id="groups_menu_left" class="btn btn-default btn-menu" >Voltar</button>
</li>
UPDATE: I don't know if I understand your problem but you can try:
<li class="pull-left">
<button type="button" id="groups_menu_left" class="btn btn-default btn-menu" >Voltar</button>
</li>

fullcalnder not calls on button click and inside any function

I am using fullcalendar.
When my page loads fullcalendar loads properly.
Now, I want to retrieve new data from table and want to display it on calendar.
For that, I call an ajax on button click, The ajax will retrieve the new data from table and display on fullcalendar.
But i am getting an error in firebug console.
TypeError: $(...).fullCalendar is not a function
It works when page will load, but when i used it in a function or any click event it wont works.
Here is my code. Please check it and suggest me.
<script>
$(document).ready(function() {
var today = new Date();
// This works because it calls on page load
$('#calendars').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay,prev,next today'
},
defaultDate: today,
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/demos/php/get-events.php',
error: function(eee) {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
// This doesn't works because it calls on button click. It gives me TypeError: $(...).fullCalendar is not a function
$("#clickme").click(function(){
var timezone = localStorage.getItem("timezone");
var start = "2016-10-16";
var end = "2016-10-21";
$('#calendars').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
type: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
});
});
</script>
<div id='script-warning'>
<code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
<div>
<div class="row" style="border-top:2px solid">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid">
<div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
<div><b>Filter By Eventname</b></div>
<div>
<input type="text" placeholder="Search"/>
</div>
<div><b>Filter By Stage</b></div>
<ul style="list-style:none">
<li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
<li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
</ul>
<br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
<button id="clickme"> Click</button>
<div id="calendars"></div>
</div>
</div>
</div>

I have update my code according your code. Please check on click function where I have made changes modified you code accordingly and let me know outcome
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.css" />
<script>
$(document).ready(function() {
var today = new Date();
// This works because it calls on page load
$('#calendars').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay,prev,next today'
},
defaultDate: today,
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/demos/php/get-events.php',
error: function(eee) {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
// Please check this part only
$("#clickme").click(function(){
var timezone = localStorage.getItem("timezone");
var start = "2016-10-16";
var end = "2016-10-21";
$.ajax({
url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
type: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
//$("#calendars").fullCalendar('removeEvents'); //If you want to remove existing events from calender
$("#calendars").fullCalendar('addEventSource', events);
}
});
});
});
</script>
</head>
<body>
<div id='script-warning'>
<code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
<div>
<div class="row" style="border-top:2px solid">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid">
<div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
<div><b>Filter By Eventname</b></div>
<div>
<input type="text" placeholder="Search"/>
</div>
<div><b>Filter By Stage</b></div>
<ul style="list-style:none">
<li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
<li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
</ul>
<br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
<button id="clickme"> Click</button>
<div id="calendars"></div>
</div>
</div>
</div>
</body>
</html>

Reload Div on button click

I have a MVC view that has bootstrap navtabs in it. On each tab a different view loads. They are called delayed spiff, and instantspiff. I have added a datepicker and a button that should display data in the 2 views. The only problem is that when I click my button the views don't refresh. They keep their original data instead of the new data based on the date. I need to somehow reload the view after the date is selected and then show the new data. I'll share some of my code. Here's my code:
Main view:
<div class="container-fluid delayed_spiff_main">
<div class="row-fluid 1">
<div class="col-lg-12 delayed_spiff_body">
<div class="row spiff-datepicksection">
<div class="col-lg-6 pull-right">
<div class="col-sm-5 col-lg-offset-4">
<div class="form-group">
<div class="input-group date">
<input type="text" id="startDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-3">
<input class="spiffdate-btn" type="button" value="Submit" />
</div>
</div>
</div>
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
<script>
$(function () {
FormGet('dashboard/delayedspiff', 'delayedspiff');
});
</script>
javascript to load details in view:
function pullDetails(carrierId, startDate, status, divid) {
$.get("#Url.Action("getDelayedSpiffOrderDetails", "Dashboard")",
{ carrierId: carrierId, startDate: startDate, status: status },
function (data) {
$('.' + divid + ' .submitted_details').html(data);
$('.' + divid).removeClass('carrier-hide');
});
}
And just to make this even more confusing here is my Controller code:
public ActionResult DelayedSpiff(DateTime? startDate)
{
var available = _appService.GetFeatureStatus(1, "spiffDashboard");
if (!available)
return RedirectToAction("DatabaseDown", "Error", new { area = "" });
//var startDate = DateTime.Today.AddDays(-6);
if (!startDate.HasValue || startDate.Value == DateTime.MinValue)
{
startDate = DateTime.Today.AddDays(-7);
}
else
{
startDate = startDate.Value.AddDays(-7);
}
var acctId = User.AccountID;
var endDate = DateTime.Today.AddDays(1); // 1
Dictionary<DateTime, List<SpiffSummaryModel>> dict = new Dictionary<DateTime,List<SpiffSummaryModel>>();
try
{
var properties = new Dictionary<string, string>
{
{ "Type", "DelayedSpiff" }
};
telemetry.TrackEvent("Dashboard", properties);
dict = _reportingService.GetDailyDelayedSpiffSummaries(acctId, startDate.Value, endDate);
}
catch (Exception e)
{
if (e.InnerException is SqlException && e.InnerException.Message.StartsWith("Timeout expired"))
{
throw new TimeoutException("Database connection timeout");
}
var error = _errorCodeMethods.GetErrorModelByTcError(PROJID.ToString("000") + PROCID.ToString("00") + "001", "Exception Getting DelayedSpiff Dashboard View", PROJID, PROCID);
error.ErrorTrace = e.ToString();
_errorLogMethods.LogError(error);
return RedirectToAction("index", "error", new { error = error.MaskMessage });
}
var spiffDateModels = new List<DelayedSpiffDateModel>();
foreach (var entry in dict)
{
var spiffDateModel = new DelayedSpiffDateModel();
spiffDateModel.Date = entry.Key;
spiffDateModel.Carriers = new List<DelayedSpiffCarrierModel>();
foreach (var item in entry.Value)
{
var spiffCarrierModel = new DelayedSpiffCarrierModel();
spiffCarrierModel.Carrier = item.CarrierName;
spiffCarrierModel.CarrierId = item.CarrierId;
spiffCarrierModel.ApprovedSpiffTotal = item.ApprovedSpiffTotal;
spiffCarrierModel.EligibleActivationCount = item.EligibleActivationCount;
spiffCarrierModel.IneligibleActivationCount = item.IneligibleActivationCount;
spiffCarrierModel.PotentialSpiffTotal = item.PotentialSpiffTotal;
spiffCarrierModel.SubmittedActivationCount = item.SubmittedActivationCount;
spiffCarrierModel.UnpaidSpiffTotal = item.UnpaidSpiffTotal;
spiffDateModel.Carriers.Add(spiffCarrierModel);
}
spiffDateModels.Add(spiffDateModel);
}
spiffDateModels = spiffDateModels.OrderByDescending(x => x.Date).ToList();
return PartialView(spiffDateModels);
}
UPDATE code that loads inside of tabpanel:
<div class="container-fluid">
<div class="row">
<div class="col-lg-11 col-center-block delayspiffdata" id="details">
<table class="delay_spiff_tbl">
<thead>
<tr>
<th class="blank"></th>
<th>Submitted Activations / Potential Spiff</th>
<th>Approved Activations / Approved Spiff</th>
<th>Ineligible Activations / Unpaid Spiff</th>
</tr>
</thead>
<tbody>
#for (int date = 0; date < Model.Count; date ++)
{
<tr class="date-row" onclick="$('.date_#date').toggleClass('date-hide');">
<td class="spiffdate">
#Model[date].Date.ToString("dddd MM/dd/yyyy")
<i class="fa fa-plus-circle expander_open" ></i>
</td>
<td>#Model[date].Carriers.Sum(c => c.SubmittedActivationCount) / #Model[date].Carriers.Sum(c => c.PotentialSpiffTotal).ToString("C")</td>
<td>#Model[date].Carriers.Sum(c => c.EligibleActivationCount) / #Model[date].Carriers.Sum(c => c.ApprovedSpiffTotal).ToString("C")</td>
<td>#Model[date].Carriers.Sum(c => c.IneligibleActivationCount) / #Model[date].Carriers.Sum(c => c.UnpaidSpiffTotal).ToString("C")</td>
</tr>
for (int carrier = 0; carrier < Model[date].Carriers.Count; carrier++)
{
<tr class="date_#date date-hide" onclick="$('.submitted-#date-#carrier').toggleClass('carrier-hide');">
<td><span class="pull-left dash"><i class="fa fa-caret-up"></i></span> #Model[date].Carriers[carrier].Carrier</td>
<td>
<a onclick="pullDetails('#Model[date].Carriers[carrier].CarrierId', '#Model[date].Date', 'potential' ,'submitted-#date-#carrier')">
#(Model[date].Carriers[carrier].SubmittedActivationCount == 0 ? "--" :
Model[date].Carriers[carrier].SubmittedActivationCount + " / " +
Model[date].Carriers[carrier].PotentialSpiffTotal.ToString("C"))
</a>
</td>
<td>
<a onclick="pullDetails('#Model[date].Carriers[carrier].CarrierId', '#Model[date].Date', 'eligible' ,'submitted-#date-#carrier')">
#(Model[date].Carriers[carrier].EligibleActivationCount == 0 ? "--" :
Model[date].Carriers[carrier].EligibleActivationCount + " / " +
Model[date].Carriers[carrier].ApprovedSpiffTotal.ToString("C"))
</a>
</td>
<td>
<a onclick="pullDetails('#Model[date].Carriers[carrier].CarrierId', '#Model[date].Date', 'ineligible' ,'submitted-#date-#carrier')">
#(Model[date].Carriers[carrier].IneligibleActivationCount == 0 ? "--" :
Model[date].Carriers[carrier].IneligibleActivationCount + " / " +
Model[date].Carriers[carrier].UnpaidSpiffTotal.ToString("C"))
</a>
</td>
</tr>
<tr class="date_#date date-hide submitted-#date-#carrier carrier-hide carrier">
<td class="submitted_details" colspan="100%">
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
<script>
$(function () {
$('.date-row').click(function () {
$(this).find('i').toggleClass('fa-minus-circle fa-plus-circle');
});
});
$(function () {
$('.date-hide').click(function () {
$(this).find('i').toggleClass('fa-caret-down fa-caret-up');
});
});
function pullDetails(carrierId, startDate, status, divid) {
$.get("#Url.Action("getDelayedSpiffOrderDetails", "Dashboard")",
{ carrierId: carrierId, startDate: startDate, status: status },
function (data) {
$('.' + divid + ' .submitted_details').html(data);
$('.' + divid).removeClass('carrier-hide');
});
}

Try something like this
$("#startDate").change(function () {
// call your function here
});