Event when element has been loaded into the DOM - javascript

Using Angular, I have created a table that displays data. The data comes from a CSV that is parsed with the Papa Parse library. My data is almost immediately available in the console but takes about 10 seconds to be displayed in the table. Here is the code for the table:
<div class="table-responsive" *ngIf="searchData?.length" style="padding-bottom: 10px;">
<table class="table table-striped table-sm">
<thead>
<tr>
<th *ngFor="let header of headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let record of searchData; let i = index">
<ng-container *ngIf="((i && !searchOn) || searchOn) && record.length > 1">
<td *ngFor="let index of indexes; let x = index">
<a *ngIf="x == 3" href="{{record[index]}}" target="_blank">{{record[index]}}</a>
<ng-container *ngIf="x != 3">{{record[index]}}</ng-container>
</td>
</ng-container>
</tr>
</tbody>
</table>
</div>
I am wanting to display a loading spinner while the table loads in but will need to listen for when the data has loaded into the DOM. How can I do this?

You already have *ngIf="searchData?.length" so this will work for when data has been loaded. Now, you only need to show spinner when data is loading... Just add another if condition with if it is not:
<div *ngIf="!searchData?.length">Loading...</div>

Related

Create unique variable name inside *ngFor

I am trying to make a table that, when you click a button, it needs to display the row directly beneath it.
I have had a look at this post, but I could not find an answer from it.
When I have it like below, it works, but the problem is, it displays all other hidden rows since they all share the same collapse variable.
This is the working example, but not 100% correct:
<table>
<thead>
<th>Path out of this queue</th>
<th *ngFor="let role of roles">{{role.RoleName}}</th>>
</thead>
<tbody>
<ng-container *ngFor="let queue of workQueues; let i = index">
<tr>
<td><button (click)="collapse=!collapse">{{queue.WorkQueueName}}</button></td>
<td *ngFor="let role of roles">
<input type="checkbox" />
</td>
</tr>
<tr *ngIf="collapse">
Yay...
</tr>
</ng-container>
</tbody>
I thought I would be able to make the collapse variable unique, by appending the i, which is the index, to it, but then I get the following error:
Parser Error: Got interpolation ({{}}) where expression was expected
Here is my attempt:
<table>
<thead>
<th>Path out of this queue</th>
<th *ngFor="let role of roles">{{role.RoleName}}</th>>
</thead>
<tbody>
<ng-container *ngFor="let queue of workQueues; let i = index">
<tr>
<td><button (click)="{{collapse+i}}={{!collapse+i}}">{{queue.WorkQueueName}}</button></td>
<td *ngFor="let role of roles">
<input type="checkbox" />
</td>
</tr>
<tr *ngIf="{{collapse+i}}">
Yay...
</tr>
</ng-container>
</tbody>
Specifically, in my (click) event, how can I make a unique variable that could be used?
(click)="{{collapse+i}}={{!collapse+i}}"
should be
(click)="this[collapse+i] = !this[collapse+i]"
This allows you to use an indexer to obtain the field on the component. If it actually works depends on how you have collapse fields defined on your component.
Personally I would prefer extending the type contained in the workQueues array with an additional field.
(click)="queue.collapsed = !queue.collapsed"
...
<tr *ngIf="queue.collapsed">
An other alternative is to define a new field in the *ngFor.
<ng-container *ngFor="let queue of workQueues; let i = index; let isCollapsed = true">
<tr>
<td><button (click)="isCollapsed = !isCollapsed">{{queue.WorkQueueName}}</button></td>
<td *ngFor="let role of roles">
<input type="checkbox" />
</td>
</tr>
<tr *ngIf="!isCollapsed">
Yay...
</tr>
</ng-container>
stackblitz

Show only one element of a panel using Angularjs

I am new to Angularjs and I am trying to figure out how it's different modules work. So, I am working on a project on which I wanna achieve an accordion-like style for a page, in which a table is shown when I click a panel button. The HTML code that creates(dynamically from a database) the div elements I modify is posted below.The problem is that in this panel, any number of tables can be shown,while I need to only have one opened at a time,so when one opens,the one opened before it should close.Any ideas how I can achieve this functionality?(I assume the error is because the showDB variable is local to each table scope, but I don't know how to work around it.) Thanks!' `
<div ng-repeat="(key, value) in data.services">
<div ng-show="showSection(key)" class="top_panel-section">
<button class="btn top_btn btn-header" type="button" name="showDB"
ng-click="showDB=!showDB">{{key}}</button>
<table ng-show="showDB"
class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
<thead class="n-table-thead">
<tr>
<th width="70%">VM Name</th>
<th width="30%">Status</th>
</tr>
</thead>
<tbody class="n-table-body">
<tr ng-repeat="vm in value.vms">
<td width="76%">{{vm.vm}}</td>
<td width="24%" ng-style="getStatusStyle(vm.status)">
{{vm.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Yes, you should remove that local showDB variable to achieve what you need.
You can easily replace it with a $scope.activeKey and evaluating it by the
<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>
And in your controller:
$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
$scope.activeKey = keyToBeActivated;
}
Now you can reach that exclusivity by checking:
<table ng-show="activeKey === key" ... >
Using table $index as unique field: (available from ng-repeat)
<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>
And
<table ng-show="activeKey === $index" ... >

How to change the value of a data-attribute and a td in a table HTML e Jquery

I have this table in html, and I load it with Php Laravel
<div class="form-row col-md-12">
<table id="contacts" class="table table-striped">
<tbody>
<tr>
<th>Id</th>
<th>Cel</th>
<th>Tel</th>
<th>Email</th>
<th>Actions</th>
</tr>
#if(isset($contacts) && count($contacts)>0)
#foreach($contacts $c)
<tr>
<td class="inf" data-id="{{ $c->id }}"> {{ $c->id }} </td>
<td class="inf" data-cel="{{ $c->cel}}"> {{ $c->cel}} </td>
<td class="inf" data-tel="{{ $c->tel}}"> {{ $c->tel}}</td>
<td class="inf" data-email="{{ $c->email }}"> {{ $c->email }} </td>
<td>
<button class='btn btn-primary btnAlterarContato' type="button">Alterar</button>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
You can see that each row has its data attribute for creating data. I made a method that I can retrieve the data from the TD and alter them, however I can not change the data of the data. how do I change how information that is without data attribute?
$('.btnAlterarContato').click(function(){
var Row= $(this).closest('tr');
var Posicao = 1;
// Switch: 1 = Id, 2 = Cel, 3 = Tel, 4 = Email
Row.find('td').each(function(){
switch(Posicao)
{
case 2: $(this).text('new value '); $(this).attr('data-cel', 'Hi');
$(this).data('data-cel','Hi') ;break;
}
Posicao++;
});
});
I have a repeat loop to walk on every table td, and in case position 2 is the value of cel, I would like to change your display item and your cell-date when I do $ (this) .text ('new value ') this works, but I can not change the mobile date, how do I do this?
For changing data attribute use .data() like below:-
$(this).data('cel', 'Hi');
Note:- Once clear your browser cache and check

How to show empty message in datatable, If no data found in angularjs

I am using this code
<table class="table table-striped b-t b-b patient-search-table"
ui-jp="dataTable" ui-option='{"emptyTable": "My Custom Message On
Empty Table"}'>
<tr><th>Name</th></tr>
<tr ng-repeat="user in users">
<td class="text-capitalize">{{user.name}}</td>
</tr>
So, how to show empty message in datatable, If no data found in angularjs.
You can use ng-hide and check it array is not empty
<div ng-hide="users.length">No Data Found</div>
ng-if to check for length of users:
<table class="table table-striped b-t b-b patient-search-table"
ui-jp="dataTable" ui-option='{"emptyTable": "My Custom Message On
Empty Table"}' ng-if="users.length > 0">
<tr><th>Name</th></tr>
<tr ng-repeat="user in users" >
<td class="text-capitalize">{{user.name}}</td>
</tr>
<div ng-if="users.length == 0">My Custom Message On Empty table</div>

angularjs ng-repeat in a modal with ng-if

I have a list of data which i need to show in a modal popup. This modal is done in bootstrap. I have a controller attached to this html. Based on selected type or click i have to open the popup and display data in it in tabular format.
<modal visible="showModal" >
<div class="table-responsive" > <!-- <div class="table-responsive" > -->
<table class="table table-bordered table-hover success table-striped table-condensed">
<thead>
<tr class="success" style="table-layout:fixed">
<th class="alignAll visited" >Country</th>
<th class="alignAll visited" >Current Date</th>
<th class="alignAll visited" >Previous Date</th>
<th class="alignAll visited" >Difference</th>
</tr>
</thead>
<!-- thead Ends ./ -->
<tbody id="tableRowData">
{{dim}}
<tr ng-if="dim==totalRevenue" ng-repeat="disp in allDimensions">
<td class="alignLeft" ><strong>{{disp.country}}</strong></td>
<td class="textCenter" >{{disp.prevDate}}</td>
<td class="textCenter" >{{disp.prevToPrevDate}}</td>
<td class="textCenter" >{{disp.diffRevenue}}</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" ng-click="hideModal()" data-dismiss="modal">Close</button>
</modal>
and the controller looks like this.
app.controller('landingPageController', function($scope,$http,$rootScope,$q)
{
/*Global Variables*/
//Configure Every Page Aspect From MainController Such as common Calendar Dates
/*Modal PopUp At RootScope*/
$rootScope.showModal = false;
$rootScope.toggleModal = function(val)
{
$rootScope.showModal = !$scope.showModal;
if(val=="revenue")
{
$rootScope.dim = "totalRevenue";
log($rootScope.allDimensions);
// Filter Data Based On Selection
//$scope.filterDim = $.filterByDim($scope.dim,$rootScope.allDimensions);
// $.calculateDimensions(dim,$scope.allDimensions);
}
else if(val=="cartAban")
{
$rootScope.dim = "cartAbandonment";
} else if(val=="totalOrders")
{
$rootScope.dim = "totalOrders";
} else if(val=="pageView")
{
$rootScope.dim = "totalPageViews";
}
else
{
log("No Context Found");
}
};
$rootScope.hideModal = function()
{
$rootScope.showModal =false;
}
}
I have all $scope.allDimensions which contains all the object.My object looks like this.
{"data":[
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
},
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
}]}
I am not able to make this work.
Is there any way i can have ng-repeat use with ng-if and make this scenario work. ng-if="dim==<some value> can have any anything and based on that I would populate the table in a modal.
If you're just looking to have your data displayed then take a look at my Fiddle. This I believe is what you need..
<tr ng-repeat="disp in allDimensions.data">
Instead of ng-if you should use a filter (http://docs.angularjs.org/api/ng.filter:filter) on your ng-repeat to exclude certain items from your table.

Categories