ASP.NET MVC JavaScript not working on all table lines - javascript

I have the following asp code
<div class="widget-content">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th id="table_id">
Context ID
</th>
<th id="">
Context Name
</th>
<th id="">
Context Country
</th>
<th id="">
Context State
</th>
<th id="">
Context City</th>
<th class="td-actions" id="table_action">Action</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Id);
</td>
<td>
#Html.DisplayFor(modelItem => item.ContextName);
</td>
<td>
#Html.DisplayFor(modelItem => item.ContextCountry.CountryName);
</td>
<td>
#Html.DisplayFor(modelItem => item.ContextState.StateName);
</td>
<td>
#Html.DisplayFor(modelItem => item.ContextCity.CityName);
</td>
<td class="td-actions">
<a class="btn btn-default btn-xs" href="#viewModal" id="btnView" data-toggle="modal" data-id="#item.Id">
<span class="glyphicon glyphicon-eye-open"></span> View
</a>
<a class="btn btn-default btn-xs" href="#editModal" id="btnEdit" data-toggle="modal" data-id="#item.Id">
<span class="glyphicon glyphicon-pencil"></span> Edit
</a>
<a class="btn btn-default btn-xs" href="#assignModal" id="btnAssign" data-toggle="modal" data-id="#item.Id">
<span class="glyphicon glyphicon-user"></span> Assign
</a>
<a class="btn btn-default btn-xs" href="#Url.Action("deleteContext","SuperUser", new { id=item.Id})" id="btnDelete" data-toggle="modal" data-id="#item.Id">
<span class="glyphicon glyphicon-remove"></span> Delete
</a>
</td>
</tr>
}
</tbody>
</table>
</div> <!-- /widget-content -->
And the following java script for View button, which was added for each table line as can be noticed above.
<script type="text/javascript">
$('#btnView').click(function (eve) {
$('#modal-content').load("/SuperUser/ViewContext/" + $(this).data("id"));
})
</script>
The problem is that, the function is called only for the first table line.
For example.
Line 1 - it will do what needed on View button click
Line 2 - it will not fire the event, or, if the line 1 button was clicked before, it will display the data from line 1 which is not what i expected for this code.
Do you have any idea what can cause this behavior?
Thanks!


do like this:
avoid using duplicate ids, work always with classes if you have a for loop
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Id);
</td>
<td>
#Html.DisplayFor(modelItem => item.ContextName);
</td>
<td>
#Html.DisplayFor(modelItem => item.ContextCountry.CountryName);
</td>
<td>
#Html.DisplayFor(modelItem => item.ContextState.StateName);
</td>
<td>
#Html.DisplayFor(modelItem => item.ContextCity.CityName);
</td>
<td class="td-actions">
<a class="btn btn-default btn-xs btnView" href="#viewModal" data-toggle="modal" data-id="#item.Id">
<span class="glyphicon glyphicon-eye-open"></span> View
</a>
<a class="btn btn-default btn-xs btnEdit" href="#editModal" data-toggle="modal" data-id="#item.Id">
<span class="glyphicon glyphicon-pencil"></span> Edit
</a>
<a class="btn btn-default btn-xs btnAssign" href="#assignModal" data-toggle="modal" data-id="#item.Id">
<span class="glyphicon glyphicon-user"></span> Assign
</a>
<a class="btn btn-default btn-xs" href="#Url.Action("deleteContext","SuperUser", new { id=item.Id})" id="btnDelete" data-toggle="modal" data-id="#item.Id">
<span class="glyphicon glyphicon-remove"></span> Delete
</a>
</td>
</tr>
}
for your script, then:
<script type="text/javascript">
$('.btnView').click(function (eve) {
$('#modal-content').load("/SuperUser/ViewContext/" + $(this).data("id"));
})
</script>

Related

How to add numbers in a <td> to an array only if another <td> contains certain text

I'm trying to push some numbers that are outputted onto my table from my database to an array so I can get the sum of those numbers and then compare them to a different set of data. However, I only want to add numbers where the previous <td> contains text 'implementation'. So for example, in this HTML output I'm interested in the <td> with class sumCosts, but I only want to add the numbers where the first <td>, with the class costPhase, has text of 'implementation'. If you look at the last <tr>, the <td> with class costPhase contains text 'annual'. I want to omit that specific table data, where the number is 313, from my array.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">analysts</td>
***<td class="text-end sumCosts commas">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts commas">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">implementation</td>***
<td class="text-start">materials</td>
***<td class="text-end sumCosts commas">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
***<td class="text-start costPhase">annual</td>***
<td class="text-start">emo</td>
***<td class="text-end sumCosts commas">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is my current function set up. Right now it grabs all the values with class sumCosts
let costsArray = [];
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
console.log(costsArray)
This is what is logged to the console. (trying to omit 313)
(5) [4091, 6282, 2873, 1185, 313]
0: 4091
1: 6282
2: 2873
3: 1185
4: 313
length: 5
__proto__: Array(0)
I've tried using an if block with the selector :contains and costPhase.text() === 'implementation'
but neither of these seem to work. The .text() method logs an empty array and the :contains selector logs the same output as above from the original function.
if ($('.costPhase').text() === 'implementation') {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
if ($('.costPhase:contains("implementation")')) {
$(".sumCosts").each(function () {
let values = parseInt($(this).text().replace(/,/g, ''));
costsArray.push(values);
});
}
If anyone has any advice on how to achieve this, it would be greatly appreciated! Thanks!

To build the array you can use map() to iterate through all the .costPhase elements which contain the word implementation. From there you can retrieve the sibling .sumCosts and add its value to the array.
To get the total of the values in the resulting array you can use reduce().
Try this:
let values = $('.costPhase:contains("implementation")').map((i, el) => parseInt($(el).siblings('.sumCosts').text().trim().replace(/,/g, ''), 10)).get();
let total = values.reduce((a, b) => a + b, 0);
console.log(values);
console.log(total);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">4,091</td>
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">analysts</td>
<td class="text-end sumCosts commas">6,282</td>
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">maintenance</td>
<td class="text-end sumCosts commas">2,873</td>
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">implementation</td>
<td class="text-start">materials</td>
<td class="text-end sumCosts commas">1,185</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
<tr class="text-end">
<td class="text-start costPhase">annual</td>
<td class="text-start">emo</td>
<td class="text-end sumCosts commas">313</td>
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>

How to display the show hide option at the end of each column

Here I want to display the show and hide function at the end of the of the table column, where it's showing at the top of the column now. It is using the first column of the table as the parent and displaying the show and hide at the first of the column.
Here the fiddle
<div class="col-lg-12" style="width: 100%"
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-condensed"
style="border-collapse:collapse;">
<tr>
<th></th>
<th>Driver</th>
<th>First Name</th>
<th>Cell Phone</th>
<th>Acct To</th>
<th>Container#</th>
<th>Ord Typ</th>
<th>Start Date</th>
<th>Start Time</th>
<th>Sched From</th>
<th>Sched To</th>
<th>Order Status</th>
</tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
<tr data-toggle="collapse"
data-target="#DADRVC" class="accordion-toggle">
<td><button
class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse"
id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button"
class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4"/>
</div></thead></table>
</div>
</td></tr>
Here's the code. Thanks in advance.

Working fiddle.
You've just to move the column to the end of the row like :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="col-lg-12" style="width: 100%" <div class="panel panel-default">
<div class="panel-body">
<table class="table table-condensed" style="border-collapse:collapse;">
<tr>
<th></th>
<th>Driver</th>
<th>First Name</th>
<th>Cell Phone</th>
<th>Acct To</th>
<th>Container#</th>
<th>Ord Typ</th>
<th>Start Date</th>
<th>Start Time</th>
<th>Sched From</th>
<th>Sched To</th>
<th>Order Status</th>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC1" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC1">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#DADRVC2" class="accordion-toggle">
<td> /%DADRVC%/ </td>
<td> /%NMEFRS%/ </td>
<td> /%PHNCEL%/ </td>
<td> /%DAACCO%/ </td>
<td> /%DACNT#%/ </td>
<td> /%DAORDT%/ </td>
<td> /%DASTRD%/ </td>
<td> /%DASTRT%/ </td>
<td> /%DASAFR%/ </td>
<td> /%DASATO%/ </td>
<td> /%DAORDS%/ </td>
<td><button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-eye-open">
</span></button></td>
</tr>
<tr>
<td colspan="13" class="hiddenRow">
<div class="accordian-body collapse" id="DADRVC2">
<table class="table table-striped">
<thead>
<div class="">
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span>SEND</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Mobile App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Show Text</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Update App</button>
<button type="button" class="btn btn-default btn-md btn3d">
<span class="glyphicon glyphicon-cloud"></span> Thank You</button>
<input type="text" class="col-sm-4" />
</div>
</thead>
</table>
</div>
</td>
</tr>

It's why you're putting everything inside thead tag, you need to put your show/hide function in the table's footer, using the tag tfoot. Like this:
<table>
<thead>
<tr>
<th>MyColumnHeader</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyContent</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button>show</button></td>
</tr>
</tfoot>
</table>

Angular ng-repeat doesn't show items

I have worked with angularjs before but for some reason I cannot seem to get it to iterate through my array.
If I look in browser's console I can see that its not empty
Here is my code.
AngularJS
$scope.Clients = [];
$scope.LoadClients = function () {
$.get('/Client/GetClientList').then((d) => {
angular.copy(d.results, $scope.Clients);
console.log($scope.Clients);
$("#clientTable").DataTable();
});
};
HTML
<table class="table table-bordered" id="clientTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Active</th>
<th>Nr. Branches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in Clients">
<td ng-bind="client.Name"></td>
<td class="text-center" ng-bind="client.Active"></td>
<td class="text-center" ng-bind="client.Branches.length" ng-click="ViewBranches($index)"></td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-primary btn-xs" ng-click="ViewClient($index)">
<span class="fa fa-eye"></span>
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="ViewBranches($index)">
<span class="fa fa-list"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="DeleteClient($index)">
<span class="fa fa-trash"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>

Insert row below clicked button

I am looking for a way to insert an element directly below a row. My table should look like the following:
As you can see the following element is inserted below my row:
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
Below you can find my viable example:
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement
plusButtonParent.insertAdjacentHTML('beforebegin', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 1</td>
<td>
<button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
Add Product1
</button>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
<button type="button" class="btn btn-dark btn-sm product3">+</button>
</td>
</tr>
</tbody>
</table>
As you can see the element is inserted on the side and not at the bottom.
Any suggestions how to insert the element below the row?
I appreciate your replies!

It is an issue with your Javascript. You were close!
This is the problematic line:
let plusButtonParent = plusButton[0].parentElement;
You are accessing the <td> element. So inserting a <tr> before the <td> starts would result in something like this:
<tr>
<tr> <!-- this code is added -->
<td>...</td> <!-- this code is added -->
</tr> <!-- this code is added -->
<td>...</td>
</tr>
That's clearly not what you want. So target the parent <tr> instead, and problem solved.
let plusButtonParent = plusButton[0].parentElement.parentElement;
And you will probably want to keep the Product 2 at the top like in your example. Easy, just change beforebegin to afterend.
$(".btn.btn-dark.btn-sm").on("click", this.clickDispatcherTable.bind(this))
function clickDispatcherTable(e) {
let plusButton = $(e.target).closest(".btn.btn-dark.btn-sm")
if (plusButton.hasClass("product2")) {
let plusButtonParent = plusButton[0].parentElement.parentElement;
plusButtonParent.insertAdjacentHTML('afterend', `
<tr>
<td></td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
</td>
</tr>
`)
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
<tbody>
<tr>
<td>Product 1</td>
<td>
<button type="button" data-exists="cpu" class="btn btn-primary btn-sm product1">
Add Product1
</button>
</td>
</tr>
<tr>
<td>Product 2</td>
<td>
<button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
Add Product2
</button>
<button type="button" class="btn btn-dark btn-sm product2">+</button>
</td>
</tr>
<tr>
<td>Product3</td>
<td>
<button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
Add Product 3
</button>
<button type="button" class="btn btn-dark btn-sm product3">+</button>
</td>
</tr>
</tbody>
</table>

Retrieving Array of Objects Sent Using AJAX in JSP

With respect to this question pass array of objects to jsp, how do you retrieve the results in JSP?
The question is, I have this in my Javascript:
data = [
{
id: "333",
date: "22/12/2015"
},
{
id: "333",
date: "22/12/2015"
}]
$.post(eval.jsp, {data:data}, function(){}, "json");
How do i recover data in eval.jsp. I tried
request.getParameterValues("data");
But the value returned is null. This is not the value passed of course as can be seen in the headers (using Chrome).

You can use a dynamic table or Foreach to show data in it .
Example:
<table id="allStudent" class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>studentCode</th>
<th>Major</th>
<th>FatherName</th>
<th>id</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tmplBody">
<script id="scriptTmp">
<tr id="deleteTr" >
<td>
${firstName}
<td>
${lastName}
</td>
<td>
${studentCode}
</td>
<td>
${major}
</td>
<td>
${fatherName}
</td>
<td>
${id}
</td>
<td>
<button id="updateStudent" class="btn btn-success"><i class="fa fa-pencil" style="padding-right: 10px;"></i>
Update
</button>
<a href="#" type="button" class="btn btn-danger deletebtn" role="button" onclick="deleteSt(${id})"><i class="fa fa-trash" style="padding-right: 10px;"></i>
Delete
</a>
<button class="btn btn-info" role="button"><i class="fa fa-check" style="padding-right: 10px;"></i>Course
Selection
</button>
</td>
</tr>
</script>
</tbody>
</table>
</div>

Categories

Resources