I have the following code:
$(".clickable").click(function() {
window.location = $(this).data("target");
});
$(".clickableB").click(function() {
alert('I got a click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Employee</th>
<th>Total hours</th>
<th>Comments</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-target="#events-modal" class="clickable success">
<td>Pedro</td>
<td>1</td>
<td>This is a very loooooooooooooooooooong text</td>
<td>
<span style="color:green" class="clickableB fa fa-check-square"></span>
<span style="color:orange" class="clickableB fa fa-warning"></span>
<span style="color:red" class="clickableB fa fa-minus-square"></span>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="events-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" style="height: 400px">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Then, what I want to get is to show a modal when a click in the row but get an alert when I click on the icons/spans. Everytime I click in the icons, the modal shows up.
Try this. You bind it to every td that isnt a .noclick and use .parent to get the data target.
$(".clickable td:not(.noclick)").click(function() {
console.log("modal click");
window.location = $(this).parent().data("target");
});
$(".clickableB").click(function() {
alert('I got a click');
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Employee</th>
<th>Total hours</th>
<th>Comments</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-target="#events-modal" class="clickable success">
<td>Pedro</td>
<td>1</td>
<td>This is a very loooooooooooooooooooong text</td>
<td class="noclick">
<span style="color:green" class="clickableB fa fa-check-square"></span>
<span style="color:orange" class="clickableB fa fa-warning"></span>
<span style="color:red" class="clickableB fa fa-minus-square"></span>
</td>
</tr>
</tbody>
</table>
This is happening because of event bubbling. To prevent it use stopPropagation:
$(".clickable").click(function(evt) {
window.location = $(this).data("target");
});
$(".clickableB").click(function(evt) {
evt.stopPropagation()
alert('I got a click');
});
That way, when you click a row it will open the modal, but when clicking the span, it will only alert without opening the modal
it could help you:
$(".clickable").click(function(e) {
if($(e.target).hasClass("clickableB")) {
alert('I got a click');
}
else {
window.location = $(this).data("target");
}
});
Cheers
There is no data inside clickableB span class, you need to add some text or image then it will be work
$(".clickable").click(function() {
window.location = $(this).data("target");
});
$(".clickableB").click(function() {
alert('I got a click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Employee</th>
<th>Total hours</th>
<th>Comments</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-target="#events-modal" class="clickable success">
<td>Pedro</td>
<td>1</td>
<td>This is a very loooooooooooooooooooong text</td>
<td>
<span style="color:green" class="clickableB fa fa-check-square">clickableB</span>
<span style="color:orange" class="clickableB fa fa-warning">clickableB</span>
<span style="color:red" class="clickableB fa fa-minus-square">clickableB</span>
</td>
</tr>
</tbody>
</table>
instead of
<span style="color:green" class="clickableB fa fa-check-square"></span>
i would just use
<span onclick='functionOfChoice();' style="color:green"> ....
Related
I have different table in every button, and I hide the table by putting the visibility to hide in the css, when I click the button the table will show. The problem is when I click the button again it won't hide the table anymore. And another thing is when I click the other buttons the table which is currently showing will hide then another table will show.
function toggle() {
if( document.getElementById("Patient-Table").style.visibility='hidden' )
{
document.getElementById("Patient-Table").style.visibility = 'visible';
}
else{
document.getElementById("Patient-Table").remove(visibility);
}
}
#Patient-Table {
visibility: hidden;
}
<div id="Patient-Table" class="container col-sm-8">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>List of <b> Patients</b></h2>
</div>
<div class="col-sm-6">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<div class="tables border shadow border-3 mt-3 mb-5">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>3 </td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td>low.key#gmail.com</td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
</tbody>
</table>
function patienttoggle() {
let patientTable = document.getElementById("Patient-Table");
if(patientTable.style.display == "none") {
patientTable.style.display = "block";
}else{
patientTable.style.display = "none";
}
}
Heres my upadted JS CODE
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>
I have a table with rows that can be collapsed, when I click the button to toggle collapse I see the font awesome icon update immediately but the collapse doesnt happen for almost half a second. When the collapse does happen it just jumps instantly to its final position rather than using an animation. Its almost as if it is running an animation that inst being displayed. Even when changing the .collapsing selector to have no transition this delay exists.
Here is the HTML
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.funcName)
</th>
<th></th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td class="hiddenField funcID">
#Model.ElementAt(i).funcID
</td>
<td class="funcName col-md-1">
#Html.DisplayFor(modelItem => Model.ElementAt(i).funcName)
</td>
<td class="row-actions col-md-1">
<div class="btn-group">
<button type="button" class="btn btn-default editFuncButton">Edit</button>
<button type="button" class="btn btn-default deleteFuncButton">Delete</button>
</div>
<i class="btn btn-toolbar fa fa-chevron-right expandFuncButton" data-target="#extraInfo_#i"></i>
</td>
</tr>
<tr id="extraInfo_#i" class="collapse out">
<td colspan="5">
<div class="argsList">
#Html.Action("Index", "Args", new { funcID = Model.ElementAt(i).funcID })
</div>
</td>
</tr>
}
</tbody>
Here is the JS that happens on toggle (I moved the collapse from the HTML to the JS while testing, but it occurs with both methods of triggering)
$(function ()
{
$(document).on("click", '.expandFuncButton', function ()
{
if ($(this).hasClass('fa-chevron-right'))
{
$(this).removeClass('fa-chevron-right');
$(this).addClass('fa-chevron-down');
}
else
{
$(this).removeClass('fa-chevron-down');
$(this).addClass('fa-chevron-right');
}
$($(this).attr("data-target")).collapse("toggle");
});
});
Here is the CSS I tried to apply to .collapsing to remove the transition
.collapsing
{
-webkit-transition: none;
transition: none;
display: none;
}
All of the data and such on the page works, and the collapse almost works except for this minor but annoying issue.
Your issue is in this line:
transition: none;
The default value must be unset and in order to change it you need to set important:
.collapsing {
transition: unset !important;
}
In any case, I suggest to handle directly the events: show.bs.collapse & hide.bs.collapse. In this way you overcome the transition at all:
$('[id^=extraInfo_]').on('show.bs.collapse hide.bs.collapse', function(e) {
$(this).toggle();
})
$('[id^=extraInfo_]').on('show.bs.collapse hide.bs.collapse', function(e) {
$(this).toggle();
})
$(document).on("click", '.expandFuncButton', function ()
{
$(this).toggleClass('fa-chevron-right fa-chevron-down')
$($(this).attr("data-target")).collapse("toggle");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.js"></script>
<table class="table">
<thead>
<tr>
<th>
funcName)
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="hiddenField funcID">
funcID
</td>
<td class="funcName col-md-1">
funcName)
</td>
<td class="row-actions col-md-1">
<div class="btn-group">
<button type="button" class="btn btn-default editFuncButton">Edit</button>
<button type="button" class="btn btn-default deleteFuncButton">Delete</button>
</div>
<i class="btn btn-toolbar fa fa-chevron-right expandFuncButton" data-target="#extraInfo_1"></i>
</td>
</tr>
<tr id="extraInfo_1" class="collapse out">
<td colspan="5">
<div class="argsList">
1<br/>
1<br/>
1<br/>
</div>
</td>
</tr>
<tr>
<td class="hiddenField funcID">
funcID
</td>
<td class="funcName col-md-1">
funcName)
</td>
<td class="row-actions col-md-1">
<div class="btn-group">
<button type="button" class="btn btn-default editFuncButton">Edit</button>
<button type="button" class="btn btn-default deleteFuncButton">Delete</button>
</div>
<i class="btn btn-toolbar fa fa-chevron-right expandFuncButton" data-target="#extraInfo_2"></i>
</td>
</tr>
<tr id="extraInfo_2" class="collapse out">
<td colspan="5">
<div class="argsList">
1<br/>
1<br/>
1<br/>
</div>
</td>
</tr>
</tbody>
</table>
I have the following table in my HTML page, I'm a newbie to Jquery
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Start Date</th>
<th>Severity</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="myTable">
<tr style="display: table-row;">
<td>New Rule</td>
<td>New Rule</td>
<td>2017-04-04</td>
<td>High</td>
<td>
<button class="btn btn-primary btn-sm editBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit
</button>
<button onclick="window.location ="/EmployeeSpringMVC/delRule/5"" data-method="delete" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>
As you can see there is an edit button I can write a function to recognize clicks to this button as given below
$('.editBtn').click(function(){
alert("test");
});
I also need the data in the particular row for some processing in the function. How can I get this data from the table row. Please feel free to suggest if there is a better way.
I saw the question here but I did not understand this statement of the answer.
var id = $(this).attr('id');
How is the id passed to the function. What specifies the id in this.
<input id="btn" type="button" value="click" />
Because you probably need all <td> in row, except current one I would suggest to use siblings() method of closest <td>:
$('.editBtn').click(e => {
e.preventDefault();
const $td = $(e.target).closest('td');
const fields = Array.from($td.siblings('td').map((i, e) => $(e).text()));
console.log(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Start Date</th>
<th>Severity</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="myTable">
<tr style="display: table-row;">
<td>New Rule</td>
<td>New Rule</td>
<td>2017-04-04</td>
<td>High</td>
<td>
<button class="btn btn-primary btn-sm editBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit
</button>
<button onclick="window.location ="/EmployeeSpringMVC/delRule/5"" data-method="delete" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>
Now I have to click on subscribe button and get the value of the plan name that is either Platinum or Gold.
HTML:
<div role="tabpanel" class="tab-pane active col-md-9" id="home">
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan" style="background: #E8FFD2;">
<tr>
<th style="background: #60D760;">
<h3 class="Plan">Platinum</h3>
<p>AGENCIES & MARKETING TEAMS</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$299</p>
<span>per month</span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="btn btn-success pricing-button">Subscribe</span>
</td>
</tr>
</table>
</div>
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan">
<tr>
<th style="background: #22D3FF;">
<h3 class="Plan">Gold</h3>
<p>CONSULTANTS & SMALL BUSINESSES</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$199</p>
<span>per month</span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</td>
</tr>
<tr>
<td>
<span class="btn btn-info pricing-button">Subscribe</span>
</td>
</tr>
</table>
</div>
</div>
jQuery:
$(function() {
$(".pricing-button").click(function() {
alert($(this).find('.Pricing-Plan Plan').text());
//$('.Plan').val(function () {
// $(this).text();
//});
});
});
I need to get price and plan name on Subscribe button click, I hope someone help me out with this.
You can get it by slightly modifying your code to:
$(".pricing-button").click(function() {
alert($(this).parents('table').find('.Plan').html());
});
DEMO
OR
You can add custom attribute data-plan="Plantinum/Gold" to your pricing button as:
<span class="btn btn-info pricing-button" data-plan="Gold">Subscribe</span>
And get attribute value as following:
$(".pricing-button").click(function () {
alert($(this).attr('data-plan'));
});
DEMO
This will work.
$(function () {
$(".pricing-button").click(function () {
alert($(this).closest('.Pricing-Plan').find('.Plan').text());
});
});
Try to this way .
Used to this
$(this).parents('table').find('.Plan').html();
Demo
$(function () {
$(".pricing-button").click(function () {
var htmlString =$(this).parents('table').find('.Plan').html();
alert( htmlString );
//$('.Plan').val(function () {
// $(this).text();
//});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane active col-md-9" id="home">
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan" style="background: #E8FFD2;">
<tr>
<th style="background: #60D760;">
<h3 class="Plan">Platinum</h3>
<p>
AGENCIES & MARKETING
<br />
TEAMS
</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$299</p>
<span>per month</span>
</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="btn btn-success pricing-button">Subscribe</span></td>
</tr>
</table>
</div>
<div class="col-sm-4">
<table class="table table-bordered Pricing-Plan">
<tr>
<th style="background: #22D3FF;">
<h3 class="Plan">Gold</h3>
<p>CONSULTANTS & SMALL BUSINESSES</p>
</th>
</tr>
<tr>
<td>
<p class="table-price">$199</p>
<span>per month</span>
</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
</tr>
<tr>
<td><span class="btn btn-info pricing-button">Subscribe</span></td>
</tr>
</table>
</div>
</div>
You can do like following way to get price and package name.
HTML:
<span class="btn btn-success pricing-button" onClick="$(this).MessageBox('platinum','$299');">Subscribe</span>
<span class="btn btn-info pricing-button" onClick="$(this).MessageBox('gold','$199');">Subscribe</span>
JQuery:
$.fn.MessageBox = function(package,price) {
alert(package + " has price " + price);
};
Working Fiddle
This will work
$(".pricing-button").click(function () {
alert($(this).closest('.col-sm-4').find('.Plan').text());
});