There is a table which is populated by ng_repeat, I am going to show a loading/progress/spinner on it while data is loading
<div class="panel-body panel-success">
<div class="col-lg-12">
<table class="table table-bordered" >
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()"
items-per-page="pageSizeSelected"
direction-links="true" ng-model="pageIndex"
max-size="maxSize"
class="pagination"
boundary-links="true"
rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
How can show loading/progress/spinner inside table dusring loading data? I want to show spinner inside table (Instead of rows, I mean keep table column name)
Show spinner while data is not loaded... once loaded, hide it !!
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="soQuestion">
<div class="panel-body panel-success" ng-controller="soController">
{{results.length}}
<div class="col-lg-12">
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-if="results.length<1">
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
</tr>
<ng-container ng-if="results.length>0">
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
</ng-container>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Related
Brief:
In Mobile Screen would like to Click on Column in Table 1 will Hide it and Slide to display a Column in Table 2 and I can Click on back button to return back to Column in Table 1 using Javascript/jQuery or it can been done with the help of CSS too. How i can do that and provide an example will be much of help too ?
Screenshot of current page:
https://ibb.co/51SRgKw
Current page structure:
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
my idea with jquery i will use .hide() and .show() to switch your div, first load set style is display:none.
or use jquery mobile.
$(function(){
let switch_page = function(p_id){
$('.manage-at__scroll').hide(200)
$(`#${p_id}`).show(200);
}
$('a.list-class').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
$('a.list-st').on('click', function(e){
e.preventDefault();
switch_page('tab3');
});
$('#b1').on('click', function(e){
e.preventDefault();
switch_page('tab1');
});
$('#b2').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body class="container">
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;" id="tab1">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-class" style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab2">
<p>
<a class="btn btn-default" href="#" id="b1"> back </a>
</p>
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-st" style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab3">
<p>
<a class="btn btn-default" href="#" id="b2"> back </a>
</p>
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
I'd like some help please.
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
When the page loads for the first time I want the table to be collapsed. When I click the Toggle button I want to change the table status, so basically to expand it and collapse it again if the button is clicked again.
This is my script
<script>
$(document).ready(function() {
$('.toggle-btn').closest('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).closest('table').toggle();
});
});
</script>
How can I make this work correct ?
why not just use toggle function directly?
$(document).ready(function() {
$('table').hide();
$('.toggle-btn').on('click', function() {
$('table').toggle();
});
});
if you have only one table then only do
$(document).ready(function() {
$('tbody').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$('tbody').toggle();
});
});
For more then one sibling tables
You can find closest h2 and next() gives you table
$(document).ready(function() {
$('.toggle-btn').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$(this).closest('h2').next().find("tbody").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('.toggle-btn').parent().next('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().siblings('table').toggle();
});
});
Selector should be $('.toggle-btn').parent().next('table')
DEMO
the function closest() goes up the element's parents, so it will never find the table. You would have to do something like this:
$(document).ready(function() {
$('.toggle-btn').parent().parent().find('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().parent().find('table').toggle();
});
});
But this would not work if there are multiple tables. Consider using an id or for the table, so that you can access it directly. Eg:
<table id="data-table-1" class="data" cellpadding="8" border="1">
That would make the javascript much simpler, ie:
$('.toggle-btn').on('click', function(event) {
$('#data-table-1').toggle();
});
I have a game that i'm working on and in it theres a shop that has two divs: a "Buy" section and a "Checkout". The first allows you to select different items and then move them into the "Checkout" using a button for each row. My problem is that i'm unsure how to move each selected row across to the second div (checkout).
Eg:
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<th>Level Required</th><th>Item</th><th>Cost</th>
<tr><td>Level 1</td><td><img src="img/shop/pickaxe_rusty.png" id="item1"></td><td>50 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 10</td><td><img src="img/shop/pickaxe_iron.png" id="item2"></td><td>500 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 25</td><td><img src="img/shop/pickaxe_steel.png" id="item3"></td><td>5000 Gold</td><td class="moveToCheckout">⇒</td></tr>
</table>
</div>
The <td class="moveToCheckout">⇒</td>or ⇒ is what the user will click on to move the items across.
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table>
<th>Items</th><th>Quantity</th><th>Price</th>
<tr><td><img src="" id=""></td><td><input type="text" value="1" id="quantity"><td>X Gold</td></td></tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>
Additional info:
I have an array for each item with all the info for it (cost, level, img src), would it be possible to use this to create a new row in the checkout section and insert the details into it using a for loop?
I don't exactly understand what you want, but something like this should look close enough :
function buy(elem) {
$(elem).parents('tr').appendTo("#co-table");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<tr>
<th>Level Required</th>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Level 1</td>
<td>
<img src="img/shop/pickaxe_rusty.png" id="item1">
</td>
<td>50 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 10</td>
<td>
<img src="img/shop/pickaxe_iron.png" id="item2">
</td>
<td>500 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 25</td>
<td>
<img src="img/shop/pickaxe_steel.png" id="item3">
</td>
<td>5000 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
</table>
</div>
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table id="co-table">
<tr>
<th>Items</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>
<img src="" id="">
</td>
<td>X Gold</td>
<td>
<input type="text" value="1" id="quantity">
</td>
</tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>
I have a bootstrap table with expandable rows, what I want is, opening the page with an already expanded row (say first row).
Below is the table I am using.
<table class="table no-padding-table">
<thead>
<tr>
<th>Date</th>
<th>Date2</th>
<th>Date3</th>
</tr>
<tbody>
<tr data-toggle="collapse" data-target="#extend{{$index}}"
ng-repeat-start="date in dates">
<td>
<p>{{date}}</p>
</td>
<td>
<p>{{date}}</p>
</td>
<td>
<p>{{date}}</p>
</td>
</tr>
<tr ng-repeat-end="">
<td colspan="3" class="hiddenRow">
<div class="accordian-body collapse">
TEST
</div>
</td>
</tr>
</tbody>
I want to select the apply button in the following code. There are two buttons and only one button is visible.
//input[#value='Apply' and #id='btn' and #name='btn' and not(ancestor::td[contains(#style,'display:none')])]
I have written above XPath to select the visible one but in web driver it says unable to access the element. (browser - IE8)
<table class="ColumnTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="dashboard~120" class="Section" style="" headeron="" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style=" display:none;">
<div id="dashboard~Contents" style="">
<table style="width:100%">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="dashboard~121" class="Section" style="" headeron="true" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div id="dashboard~Contents" style="">
<table class="SectionTD" style="width:100%; border-top:none;">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
My question is there anyway other work around for this issue. I think there are plenty of ways to write the above xpath am i right?
You could try the following in case this is a Selenium issue:
//input[#value='Apply'][#id='btn'][#name='btn']
[not(ancestor::td[contains(#style,'display:none')])]
It's the same expression with the same result, but as mentioned here Xpath does not work with Selenium it's possible that Selenium has an issue with evaluating and in XPath.
Another issue I just want to mention is that you shoudn't use the same id for multiple elements, ids should be unique. Otherwise your HTML is not valid. When you change the ids to unique values, it'd be possible to reduce the XPath match conditions.
Selecting an element using xpath:
Selecting the first element:
//div[#id='dashboard~120']descendant::input[#id='btn'].Click;
Selecting the second element:
//div[#id='dashboard~121']descendant::input[#id='btn'].Click;