I'm using find as that in order to select inner
$(".pauseAnomaly[data-id=78]").parent().parent().prev().find(".pauseaction").each(function (i) {
pauseActionUI($(this).data("id"));
});
I want to launch .pauseAction on each .pauseAction found in $(".pauseAnomaly[data-id=78]").parent().parent().prev().
Here, it works perfect when there is single .pauseaction but nothing when there is multiple .pauseaction, why? and how resolve this?
In other words
When I do
$(".pauseAnomaly[data-id=35]").parent().parent().prev().find(".pauseaction").each(function (i) {
alert($(this).data("id"));
});
where there is one .pauseaction, it returns one id, but when there is multiple .pauseaction, it returns me [], but I wound like to see all id's and apply funcito to all of them, why and how?
I think find() only returns one element, so if it's true, how can I make change in order to have all elemetns?
Here is the code when I $(".pauseAnomaly[data-id=14]").parent().parent().prev()
<table>
<tr>
<td style="border-top-width:0;padding-top:0;padding-left:0;padding-right:0;padding-bottom:0;">
<table class="table table-striped" style="margin-bottom:0;">
<tbody>
<tr class="actionRow actionRow" data-id="9">
<td><span class="glyphicon spaceAfterIcon vorx late glyphicon-remove red" data-id="9"></span></td>
<td>TEXT</td>
<td>TEXT</td>
<td class="date" data-id="9">03/04/2015</td>
<td>SELECT</td>
<td><span class="glyphicon glyphicon-comment commentAction red" data-actiondescr="Reparer le chauffage (date de fin plann. depassée)" data-actionid="9" data-id="9"></span> | <span class="glyphicon glyphicon-pause red pauseAction" data-id="9"></span> <span class="closeActionButtons" data-id="9">| <span class="glyphicon glyphicon-ok-circle red closeOKAction" data-id="9"></span>/ <span class="glyphicon glyphicon-remove-circle red closeNOKAction" data-id="9"></span></span></td>
</tr>
<tr class="actionRow desactivatedColor actionRow" data-id="10">
<td><span class="glyphicon spaceAfterIcon vorx late" data-id="10"></span></td>
<td>TEXT</td>
<td>TEXT</td>
<td class="date" data-id="10">03/04/2015</td>
<td>SELECT</td>
<td><span class="glyphicon glyphicon-comment commentAction red" data-actiondescr="Installer un thermostat pour réguler le chauffage" data-actionid="10" data-id="10"></span> | <span class=" glyphicon glyphicon-play red playAction" data-id="10"></span> <span class="closeActionButtons" data-id="10" style="display:none;">| <span class="glyphicon glyphicon-ok-circle red closeOKAction" data-id="10"></span>/<span class="glyphicon glyphicon-remove-circle red closeNOKAction" data-id="10"></span></span></td>
</tr>
<tr class="actionRow actionRow" data-id="13">
<td><span class="glyphicon spaceAfterIcon vorx late glyphicon-remove red" data-id="13"></span></td>
<td>TEXT</td>
<td>TEXT</td>
<td class="date" data-id="13">27/03/2012</td>
<td>SELECT</td>
<td><span class="glyphicon glyphicon-comment commentAction red" data-actiondescr="Action closed" data-actionid="13" data-id="13"></span> | <span class=" glyphicon glyphicon-pause red pauseAction" data-id="13"></span> <span class="closeActionButtons" data-id="13">| <span class="glyphicon glyphicon-ok-circle red closeOKAction" data-id="13"></span>/ <span class="glyphicon glyphicon-remove-circle red closeNOKAction" data-id="13"></span></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
The problem is with the case of the selector as it needs to be pauseAction as opposed to pauseaction. Below is a demo that clarifies it.
$("table").find(".pauseAction").each(function (i) {
alert($(this).data("id"));
});
So, your code would become (provided .pauseAnomaly[data-id=14] selector exists!):
$(".pauseAnomaly[data-id=14]").parent().parent().prev().find(".pauseAction").each(function (i) {
alert($(this).data("id"));
});
Demo#Fiddle
Could you try in your each function:
$(this)[i].data('id')
If that doesnt work try:
$($(this)[i]).data('id')
What I've done is select the element that you found and as it is an array you are selecting the specific index in the loop
For example if i = 2 in the loop the selector would look like:
$(this)[2].data('id')
which would return the 3 element in that array
Related
I'm using Angularjs to repeat some elements in my HTML. Angular repeats the divs correctly, but when trying to repeat an specific div it just doesn't work. Explanation after the code:
<tr ng-repeat="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
<tr class="spacer"></tr>
</tr>
Angular repeats everything inside <tr ng-repeat="x in controlList" class="tr-shadow"> </tr> BUT the last div <tr class="spacer"></tr>
If I comment the spacer the ng-repeat it does repeat the spacer, but if I don't the spacer only shows once at the end of the repeated code.
<!-- <tr class="spacer"></tr> -->
I tried changing the HTML Tag for spacer but I'm having the same issue.
As you can see in the Chrome's debugger, the spacer shows after the repeated code:
If you really want to include your spacer in your iteration there is another option called ng-repeat-start and ng-repeat-end
Something like the following should work
<tr ng-repeat-start="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
</tr>
<tr class="spacer" ng-repeat-end>...</tr>
You can find this exact information here on their documentation page.
<tr> inside <tr> is not valid html. You must include ng-class="{'spacer': someCondition}"
<tr ng-repeat="x in controlList" class="tr-shadow" ng-class="{'spacer': someCondition}>
Try to add condition ng-if="$last" to your spacer
So I need to be able to expand some details on each row of a table. Right now I'm having two issues:
Clicking the expand/collapse toggle will trigger the action for every row in the table.
The first row always puts the details above it.
Here's the code segment:
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1=!collapsed1">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
</tr>
<div *ngIf="!collapsed1">
<p>Details</p>
</div>
</tbody>
And what it looks like:
Toggling
Also I had my *ngFor statement in the tag earlier but I realized I can't hit individual client objects if I build a separate for details.
Let me know how I can improve!
It's a very common pattern.
The best and quick solution is to use some ID instead of just a boolean in your collapsed1 variable.
<tbody>
<tr *ngFor="let client of clients">
<td class="details-control">
<a class="btn btn-link" (click)="collapsed1 = collapsed1 ? 0 : client.id ">
<i class="material-icons">
expand_more
</i>
</a>
</td>
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}</td>
<td><input type="checkbox"></td>
<div *ngIf="collapsed1=client.id">
<p>Details</p>
</div>
You need a boolean array collapsed[] and use index in your ngFor, so you can use collapsed[i]. Take a look here for using index in ngFor:
ngFor using Index
Let me know if you need more info. Wellcome
Nevermind, here is the code that solved it.
<tbody>
<tr *ngFor="let client of clients; let i = index">
<td class="details-control">
<a class="btn btn-link" (click)="client.hideme=!client.hideme">
<i class="material-icons" *ngIf="!client.hideme">
expand_more
</i>
<i class="material-icons" *ngIf="client.hideme">
expand_less
</i>
</a>
</td>
<td width="30%">{{client.firstName}}
<tr *ngIf="client.hideme">
<td>Hey, I'm a bunch of details!</td>
</tr>
</td>
<td>{{client.lastName}}</td>
<td>{{client.company}}
<tr *ngIf="client.hideme">
<td>More Issuer details</td>
</tr>
</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
I am using this lib: https://github.com/Dynamitable/Dynamitable
It's pretty nice, and it works perfectly for me, for now.
When I'm trying to filter it (like filter "name" when I'm typing "abc" on the input field) all rows are dissapearing in order to show me every "name" rown which contains "abc. So this is nice !
My problem is, I'm using a very big table, and the filter works "too" good for me. I mean, I can't type my entire "research" before it start working.
So, my question is, is it possible to add a "delay", in order to let people type some letter before starting filtering ? Something like 0.5 sec or even 1 sec ?
I had try to play with this on line 150/153, but no success :
$(selector).on('change keyup keydown', filterAction);
// initialization
filterAction();
My proposal is to disconnect the original filters and add your own filter with the capability to start the filtering only after n char.
In the following an example:
$('.js-dynamitable .js-filter').off('change keyup keydown').on('change keyup keydown', function (e) {
//
// start filtering on text input only after 2 chars
//
if ($(this).is(':text') && $(this).val().length < 2) {
return; // stop filtering
}
var index = $(this).closest('tr').children('td, th').index($(this).closest('td, th'));
var dynamitable = $('.js-dynamitable').dynamitable();
dynamitable.displayAll();
$(dynamitable).find('.js-filter').each(function () {
var $this = $(this);
dynamitable.filter(index, $this.val());
});
});
.glyphicon {
cursor: pointer;
}
input, select {
width: 100%;
}
.second, .glyphicon-chevron-down, .glyphicon-chevron-up {
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://rawgit.com/Dynamitable/Dynamitable/master/dynamitable.jquery.js"></script>
<div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
<h1><span class="first">Dynami</span><span class="second">table</span></h1>
<div class="table-responsive">
<table class="js-dynamitable table table-bordered">
<thead>
<tr>
<th>Name
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Email
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Age
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Account
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
<th>Scoring
<span class="js-sorter-desc glyphicon glyphicon-chevron-down pull-right"></span>
<span class="js-sorter-asc glyphicon glyphicon-chevron-up pull-right"></span>
</th>
</tr>
<tr>
<th>
<input class="js-filter form-control" type="text" value="">
</th>
<th>
<select class="js-filter form-control">
<option value=""></option>
<option value="#dynamitable.com">dynamitable.com</option>
<option value="#sample.com">Sample</option>
</select>
</th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
<th><input class="js-filter form-control" type="text" value=""></th>
</tr>
</thead>
<tbody>
<tr>
<td>Freddy Krueger</td>
<td>freddy.krueger#sample.com</td>
<td class="text-right">122</td>
<td class="text-right">2300$</td>
<td class="text-right">+15</td>
</tr>
<tr>
<td>Clint Eastwood</td>
<td>clint.eastwood#sample.com</td>
<td class="text-right">62</td>
<td class="text-right">48 500$</td>
<td class="text-right">+12</td>
</tr>
<tr>
<td>Peter Parker</td>
<td>peter.parker#dynamitable.com</td>
<td class="text-right">22</td>
<td class="text-right">210$</td>
<td class="text-right">-5</td>
</tr>
<tr>
<td>Bruce Wayne</td>
<td>bruce.wayne#dynamitable.com</td>
<td class="text-right">42</td>
<td class="text-right">-8500$</td>
<td class="text-right">+2</td>
</tr>
<tr>
<td>Jackie Chan</td>
<td>jackie.chan#sample.com</td>
<td class="text-right">32</td>
<td class="text-right">-250.55$</td>
<td class="text-right">0</td>
</tr>
<tr>
<td>Bruce Lee</td>
<td>bruce.lee#sample.com</td>
<td class="text-right">32</td>
<td class="text-right">510$</td>
<td class="text-right">-7</td>
</tr>
</tbody>
</table>
</div>
</div>
I have this table and I want to access the prod_sku value and define it as a variable:
<tr class="border first last" id="order-item-row-386470">
<td><h3 class="product-name">prod_name</h3>
</td>
<td data-rwd-label="SKU">prod_sku</td>
<td class="a-right" data-rwd-label="Preço">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
</tr>
I get this table with this line:
data = document.getElementsByClassName("odd")[0].innerHTML;
From this tbody
<tbody class="odd">
<tr class="border first last" id="order-item-row-386470">
<td><h3 class="product-name">prod_name</h3>
</td>
<td data-rwd-label="SKU">prod_sku</td>
<td class="a-right" data-rwd-label="Preço">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
<td class="a-right" data-rwd-label="Qtd">
<span class="nobr">
Solicitado: <strong>1</strong><br>
</span>
</td>
<td class="a-right last" data-rwd-label="Subtotal">
<span class="price-excl-tax">
<span class="cart-price">
<span class="price">prod_price</span>
</span>
</span>
<br>
</td>
</tr>
</tbody>
How can I access prod_sku?
You can use a query selector to match the data-rwd-label attribute.
document.querySelector('td[data-rwd-label=SKU]').innerHTML
If you don't have to support stone age browsers, then you can use querySelector to grab your td based on data attribute. If you have to support a myriad of outdated browsers and you need to d a lot of these types of lookups, then jquery is quite good at it.
var data = document.querySelector('td[data-rwd-label="SKU"]').innerHTML;
But would be more interesting to improve the html structure of your 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());
});