I am new to slimscroll. I am working on an angular page where slimscroll works fine but when I click on some link and go to other page scroll stops working even for the main page but when I refresh this page it works fine.
Is there any thing I am missing which is making scrolling disable?
What is the thing which is enabling scroll on page refresh?
<div slimscroll data-height="455" scrolly condition="scrolling_condition">-->
<table class="table-grid" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr data-ng-repeat="item in project.list |
filter:project.search:strict |
startFrom: (project.pagination.current_page - 1) * project.pagination.items_per_page |
limitTo: project.pagination.items_per_page"
data-ng-show="project.list.length > 0">
<td width="13%">{{item.name}}</td>
<td width="16%">{{item.portfolio.name}}</td>
<td width="12%" data-ng-if="!project.isClient">{{item.client.name}}</td>
<td width="7%" data-ng-if="!project.isClient">{{item.status}}</td>
<td width="12%">{{item.installation_type}}</td>
<td width="7%">{{item.dc_rating}}</td>
<td width="12%">{{item.location.city_state}}</td>
<td width="8%">{{item.location.country}}</td>
<td width="13%" class="text-center">
<a data-ng-href="#/entity/projects/view/{{item.id}}" class="action-link">
<i class="fa fa-eye fa-lg-icn"></i>
<span data-ng-if='$last' infinite-scroll-disabled='max_data_loaded' infinite-scroll="project.loadMore()" infinite-scroll-distance='1' ></span>
</a>
<a data-ng-href="#/entity/projects/edit/{{item.id}}" class="action-link">
<i class="fa-lg-icn rg-pen"></i>
</a>
<a href="#" class="action-link" confirmed-click="project.delete({{item.id}})" ng-confirm-click="Are you sure to delete this Project?">
<i class="fa-lg-icn rg-bin"></i>
</a>
</td>
</tr>
<tr data-ng-show="project.requests.list == project.request_state.LOADING">
<td colspan="6"><div class="main-loading"> </div></td>
</tr>
<tr data-ng-show="project.requests.list == project.request_state.ERROR">
<td colspan="6">
<div class="error-loading-img"></div>
<div class="error-loading-msg text-center">{{errorMsg}} Click here to reload.</div>
</td>
</tr>
<tr data-ng-show="project.requests.list == project.request_state.SUCCESS && ((project.list | filter:project.search:strict).length == 0 || project.list.length == 0)">
<td colspan="6">No records found.</td>
</tr>
</tbody>
</table>
</div>
If i scroll inside this div and click on any url inside it then on new page scrolling stops.
Related
I'm using Python and Selenium to click through a site to select and reserve a room. The site presents a table of rooms available. I want to find a specific room and click on the button in the table that is associated with that room....but the button name changes depending on where the room is located in the table. Where it is located depends, in part, on what other rooms are available at the time I run through the website.
In this example, I want to reserve 'Room 34".
The table appears to be identified by:
<table id="MainContent_tblPage"....>
The row or section of the table that includes "Room 34" is identified by the following (which changes depending on where Room 34 appears in the table...which depends on how many other rooms are available):
<tr id=MainContent_rptrPropertyList_trContent_1" >
The button I want to click in this example is:
name="_ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:
_ctl0:btnSelect"
(...but the button name changes depending on which other rooms appear in the table...)
My question: How do I find and click the correct button in a table if the button name changes dynamically depending on table content/rows...but the button is always in a row with the text I want to find?
HTML of the section I'm looking at (...sorry, I'm not sure how to make it more readable without the possibility of changes things that might be important for answering my question):
<table id="tblPropertyList" cellpading="0" cellspacing="0" align="center" border="0" width="100%">
<tbody><tr id="MainContent_rptrPropertyList_trContent_0">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> below...
##...I cut it out to save space but I can add it back if it helps --JRrcgp
<tr id="MainContent_rptrPropertyList_trContent_1">
<td class="room_grid_row">
<table cellpading="0" cellspacing="0" width="100%;">
<tbody><tr>
<td colspan="2" class="room_grid_heading_2">
Hornswoggle Tower
<br><span class="text2">CityPlace</span>
</td>
</tr>
<tr>
<td align="right" valign="top">
<div class="room_grid_image">
<a onclick="javascript:ShowGallery('lightSlider_1');" title="Room 34">
<img src="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg" id="MainContent_rptrPropertyList_Image1_1" onerror="showNoImage(this);" style="visibility:true;">
</a>
</div>
<div class="demo">
<ul id="lightSlider_1" style="display:none">
<li data-thumb="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg">
<img src="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg">
</li>
</ul>
</div>
</td>
<td valign="top" width="100%" class="padding_left_1">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td class="room_grid_heading" colspan="3">
<div class="floatleft">
Room 34
</div>
<div class="floatright">
<span class="room_grid_from_rate_text1">From </span>
<span id="MainContent_rptrPropertyList_lblMinRate_1" class="room_grid_from_rate_text2">$88</span>
<!--<span class="room_grid_from_rate_text1">/Night</span>-->
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" cellpading="0" cellspacing="0">
<tbody><tr>
<td valign="top" class="room_grid_discription_2">
<span id="MainContent_rptrPropertyList_reptSectionInline_1_lblSectionInline_0" class="more"><font face="Verdana">Text description of room.</font></span>
</td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td id="MainContent_rptrPropertyList_tdSingleRate_1" style="display: none;">
<font class="Bold"> $<span id="MainContent_rptrPropertyList_lblratePrice_1">88</span><br></font> per night
</td>
</tr>
<tr>
<td valign="bottom" align="left">
<table align="left" width="100%" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="left" nowrap="" width="80%" class="displayRatePlan"><span class="room_grid_rateplanname">
Best Available Rate
</span><span class="room_grid_rateplan_moreinfo">(<a class="thickbox" id="lnkMoreInfo" title="Best Available Rate" href="#TB_inline?height=Div8&width=Div7&inlineId=MainContent_rptrPropertyList_rptPropertyRooms_1_Div9_0">More Info</a>)</span>
<div id="MainContent_rptrPropertyList_rptPropertyRooms_1_Div9_0" class="roomClassSection" style="display: none;">
<div class="popupWidth" id="Div7">
<div class="popupHeight" id="Div8">
<table class="more_info_table" cellspacing="0" cellpadding="0" align="center" border="0">
<tbody><tr>
<td>
<div id="MainContent_rptrPropertyList_rptPropertyRooms_1_excludeRoom_DIV_0">
</div></td></tr><tr>
<td class="alt1">
Name:
</td>
<td style="width: 90%">
Room Rate
</td>
</tr>
<tr>
<td class="alt1">
Date:
</td>
<td>
Fri, Apr 27, 2018 - Sun, Apr 29, 2018
</td>
</tr>
<tr>
<td class="alt1">
Policy:
</td>
<td>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
<td id="MainContent_rptrPropertyList_rptPropertyRooms_1_tdRateDescription_0" align="right" nowrap="nowrap" width="12%">
<span class="room_grid_fullrate">
$188
</span>
<span class="room_grid_fullrate_avgnightly">
<span id="MainContent_rptrPropertyList_rptPropertyRooms_1_lblRateMsg_0">(Avg nightly rate)</span></span>
</td>
<td width="8%" align="left">
<input type="submit" name="_ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:_ctl0:btnSelect" value="Select" onclick="ShowProgress();" language="javascript" id="MainContent_rptrPropertyList_rptPropertyRooms_1_btnSelect_0" class="button green">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="MainContent_rptrPropertyList_trContent_2">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> above...
<tr id="MainContent_rptrPropertyList_trContent_3">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> above...
##...this continues to repeat once for each room available
EDIT: I'm currently working past this issue by hard-coding the button I'm clicking. I use Selenium to navigate to the webpage that creates a table of the rooms available and then I click on the appropriate button as it stands today. But the name of the button will change in the future:
room34 = browser.find_element_by_name('_ctl0:MainContent:rptrPropertyList:_ctl31:rptPropertyRooms:_ctl0:btnSelect')
room34.click()
EDIT 2: I've played the suggestion from #Grasshopper. His code didn't work for me, but I made some changes that I thought made progress....I was mistaken. I'm removing the rest of Edit 2 so as not to confuse the issue.
To click on the button with name as _ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:_ctl0:btnSelect with respect to the element with text as Room 34 you can use either of the following line of code :
Using following :
driver.find_element_by_xpath("//div[#class='room_grid_image']/a[contains(#title,'Room 34')]//following::input[1]").click()
Using following-sibling :
driver.find_element_by_xpath("//div[#class='room_grid_image']/a[contains(#title,'Room 34')]//following-sibling::input[1]").click()
Try this xpath - "//div[normalize-space(.)='Room 34']/ancestor::tbody/tr/td//input[#type='submit']"
The 'Room 34' can be substituted by a python variable. normalize-space is required as the text has a lot of white space.
So i have the following markup:
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount"></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
there are multiple tr elements, but only some of them have the innermost span with "woocommerce-Price-amount" class. The other have nothing after the "festi-cart-product-price" classed span.
I'm trying to remove all the tr elements that does NOT have the "woocommerce-Price-amount" span inside it using jQuery.
jQuery( document ).ajaxComplete(function() {
jQuery(".festi-cart-product-price:not(:has(>span))").each(function(){
jQuery(this).parent('tr.festi-cart.item').hide();
});
});
I've been trying to use the :not selector, but it doesnt seem to produce anything. I'm really not sure where it goes wrong.
Can any of you spot where my code is going wrong, or if it's a completely hopeless approach to a simple solution?
Use .filter function to match elements with specific requirements.
Use $('tr').find('.woocommerce-Price-amount').length > 0 to check if element exists in tr.
Than simply do .hide() (or .remove()) to filtered elements.
$(document).ready(function() {
var hasWoo = $('.festi-cart-list tr').filter(function() {
return $(this).find('.woocommerce-Price-amount').length !== 0;
});
hasWoo.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">WOO</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a>
<br>
<span class="festi-cart-product-price">
EMPTY
</span>
</td>
</tr>
</tbody>
</table>
</div>
You need to use .closest() method of jquery instead of .parent() method.
$('.btn').click(function(){
$('.festi-cart-item').each(function(){
var price = $(this).find('.festi-cart-product-price').children().hasClass('woocommerce-Price-amount');
if(!price)
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list">
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount"></span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img">
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn">remove</button>
You're so close, your selector is valid and select the festi-cart-product-price that have no span's :
$(".festi-cart-product-price:not(:has('>span'))")
You've just to go up to the parents tr using closest() then hide them :
selector.closest('tr').hide();
Check This fiddle using setTimeout() to see the effect .
Hope this helps.
$(function() {
var selector = $(".festi-cart-product-price:not(:has('>span'))");
selector.closest('tr').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="festi-cart-products-content">
<table class="festi-cart-list" border=1>
<tbody>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 1
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p1</span>
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 2
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 3
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
</span>
</td>
</tr>
<tr class="festi-cart-item ">
<td class="festi-cart-product-img"> IMAGE 4
</td>
<td class="festi-cart-product-title">
<a class="festi-cart-title" href="">product name</a><br>
<span class="festi-cart-product-price">
<span class="woocommerce-Price-amount amount">p4</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
How about this.
$("tr:not(:has(>.woocommerce-Price-amount))").hide()
Not tested.
Comes from this question: How to select elements which do not have a specific child element with JQuery which is worth a read on this type of 'descendant without feature' question.
I have the following html in my first column. It shows a icon and an anchor tag.
<tr class="even">
<td class=" sorting_1">
<span data-sortvalue="0">
<img title="icon" src="icon.png">
0
</span>
</td>
</tr>
<tr class="odd">
<td class=" sorting_1">
<span data-sortvalue="1">
<img title="icon" src="icon.png">
1
</span>
</td>
</tr>
<tr class="even">
<td class=" sorting_1">
<span data-sortvalue="2">
<img title="icon" src="icon.png">
2
</span>
</td>
</tr>
....................
...................
...................
I am using aaSorting[0, 'asc']
In chrome, the 0 value is always staying at the top if the column is sorted either ascending or descending. All the remaining values are getting sorted accordingly.
In firefox, the sorting is completely broken.
The data attributes for sorting on your span tags need to be on the td tag. They should also be changed to just 'data-sort' or 'data-order'.
Check out DataTables data-attributes docs here
<tr class="even">
<td class=" sorting_1" data-sort="0">
<span>
<img title="icon" src="icon.png">
0
</span>
</td>
</tr>
...
...
I'm creating a dynamic table using angular.js and it gets populated with results from a study. I need to be able to show more data about each of these studies if a user clicks on that specific row in the table. Here's what the table looks like.. I'm thinking I have to use ngOptions or ngSelect, but I'm not sure. Any help is greatly appreciated.
<table class="table table-condensed table-hover">
<thead>
<tr>
<td class="center" id="table-header">Date</td>
<td class="center" id="table-header">Study</td>
<td class="center" id="table-header">Sample</td>
<td class="center" id="table-header">File</td>
<td class="center" id="table-header">Big Data</td>
<td class="center" id="table-header">Action</td>
</tr>
</thead>
<tbody ng-repeat="study in studies | filter: filter_name">
<tr>
<td class="center">{{ study.created_at }}</td>
<td class="center">{{ study.study }}</td>
<td class="center">{{ study.sample }}</td>
<td class="center">{{ study.fastq }}</td>
<td class="center">{{ study.bigData }}</td>
<td class="center">
<div class="dropdown center">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li id="list-item">Continue</li>
<li id="list-item" data-toggle="modal" data-target="#more-metadata-modal">More Data</li>
<li id="list-item" data-toggle="modal" data-target="#edit-metadata-modal">Edit</li>
<li id="list-item" data-toggle="modal" data-target="#delete-metadata-modal">Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
use ng-Click and pass the object or the id from which you can fetch more values for the selected item.
ng-click=showMore(study);
and using this styudy you can populate a scope object that can be used in a modal panel for that particular study object
I have a table like this:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center" style="width: 30%">Name</th>
<th class="hidden-480 center" style="width: 40%">URI</th>
<th class="hidden-phone center" style="width: 30%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">
Admin_Agency
</td>
<td class="uri">
/admin/agency
</td>
<td>
<a href="#modalEdit">
<i class="icon-pencil"></i>
<span>Edit</span>
</a>
<a href="#modalDelete">
<i class="icon-trash"></i>
<span>Delete</span>
</a>
</td>
</tr>
<tr>
<td class="name">
System_Log
</td>
<td class="uri">
/admin/syslog
</td>
<td>
<a href="#modalEdit">
<i class="icon-pencil"></i>
<span>Edit</span>
</a>
<a href="#modalDelete">
<i class="icon-trash"></i>
<span>Delete</span>
</a>
</td>
</tr>
</tbody>
</table>
When click on Edit < a href="#modalEdit"> , I want to get the the data from the 2 sibling td , that is the < td class="name"> , < td class="uri"> .
I add an onclick event on < a href="#modalEdit"> to parse data to the model when fire event click :
var name = $(this).parent().siblings(".name").html()
var uri = $(this).parent().siblings(".uri").html()
The code does not run.
Is there any suggestion for me?
THanks
you have to use closest() to get its parent tr and then use find() to get td with via class selector, and the use text() to get the text between the opening and closing tag of td.
Like this:
var name = $(this).closest("tr").find(".name").text();
var uri = $(this).closest("tr").find(".uri").text();
FIDDLE EXAMPLE