I want to know how to choose the www.test.com?p=2 with css selector
I use next_page = sel.css(u"div.page_sp > a.pagecl:nth-of-type(2)::attr(href)")
www.test.com?p=2
But it didn't work
Please guide me
Here is the structure looks like:
<div class="page_sp">
<a class="pagecl" href="">prevpage</a>
<a class="page" href="">1</a>
<a class="page" href="">2</a>
....
<a class="page" href="">9</a>
<a class="page" href="">10</a>
<a class="pagecl" href="www.test.com?p=2">nextpage</a>
<span class="page_sp">1/20 </span>
</div>
nth-of-type would not work with a class name, see css3 nth of type restricted to class.
Instead, you may search for a with nextpage text:
>>> response.css("div.page_sp > a:contains('nextpage')::attr(href)").extract()
[u'www.test.com?p=2']
Very poor code!!!
Are you just trying to fetch the next page link?
Use this:
$("a:last-of-type").attr("href");
Although, I must say, there are better ways to do this and you should use other selectors. But well, you didn't give us any contexts so here it is!!!
Related
I am trying to dynamically populate a Bootstrap 4 carousel via an ngFor iterating over an array of strings that contain the image urls. The carousel is not displaying the images, though looking at the markup generated everything looks fine. I'm guessing that the component is rendering before Angular is adding in the divs for each slide, as the "carousel slide" div has a height of 0px, which I think is what is hiding the slides themselves.
Behind-the-scenes I have an exposed property named "primarySlideshowImages" containing an array of urls:
ngOnInit() {
this.primarySlideshowImages = this.photoService.getImageLists(ImageListKeys.BrochureProductsPrimary);
}
The HTML markup looks like this:
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let image of primarySlideshowImages; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
<img class="d-block img-fluid w-100" [src]="image" >
</div>
</div>
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
FYI, I have tested this by hardcoding rather than dynamically adding the images, and everything renders just fine. I think it's a timing thing, but given my relative unfamiliarity with this technology I just don't know how to even search for a solution at this point.
Thank you in advance for your assistance. I do recognize that there are other components and approaches I could use - the ng-bootstrap components, open-source components, purchasable ones, etc. I'd like to try to figure this out using the bootstrap components because I'm pretty new at this technology and hate to jump to an easy solution if there is something I just don't understand that I should be doing. Thanks again for any help you may offer.
It may be that the div containing the image has a width and/or height of the div containing the image is/are 0.
Try setting a style on them. e.g .carousel-item {width:200px; height:200px;}
Also, try checking if the images are being retrieved by the browser using the Network tab on the dev tools.
In my application, dynamic elements are used which are basically icon/CSS selector references; for ex - save, delete, cancel buttons. These elements doesn't works with xpath's as i have tried with most of the ways. My reading is that the CSS selector will work for these elements. but i'm unable to find it out. Below is the HTML for the same.
Parent class is <div class="rTableCell ActionCell">
under this class <a> tag is used given like below
<a class="SaveRow" onclick="UpdateInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ManageDesignation')" data-toggle="tooltip" data-original-title="Save" >
under this class <i> tag is used like given below
<i class="fa fa-floppy-o themeSaveIcon"></i>
<div class="rTableCell ActionCell" style="height: 88px;"><a class="SaveRow" onclick="UpdateInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ManageDesignation')" data-toggle="tooltip" data-original-title="Save"><i class="fa fa-floppy-o themeSaveIcon"></i></a><a class="CancelRow" onclick="ResetInlineData(event,'49b3f007-fbc5-492c-b609-8b24a3044ee1','GridDesignation','../MasterData/ResetDesignation')" data-toggle="tooltip" data-original-title="Cancel"><i aria-hidden="true" class="fa fa-times themeCancelIcon"></i></a></div>
try action chains on selenium API
if you user python you can see this document
for example you have
xpath_element = "a xpath address"
from selenium.webdriver.common.action_chains import ActionChains
hover = ActionChains(self.driver).move_to_element(xpath_element)
hover.click().perform()
you can perform more actions on hover depending on your purpose
I am having some issues adding a hyperlink to a 'hcard' in ionic. I am using the following plugin (https://github.com/drewrygh/ionic-ion-horizontal-scroll-cards) and the codepen is here: http://codepen.io/drewrygh/pen/jEJGLx
When I try to add hyperlink to hcard nothing happens. What is the best way to do this, does anyone know?
<div ng-controller="barsCtrl">
<h4>Top Rated Bars</h4>
<hscroller>
<hcard ng-repeat="bar in bars" index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}">
</hcard>
</hscroller>
</div>
Do you mean you want the cards to link to something as an anchor tag? You can wrap the cards in an anchor tag: http://codepen.io/anon/pen/Nqvjpv
<a ng-repeat="item in items" href="http://www.google.com?q={{item.desc}}" target="_blank">
<hcard index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
</a>
So I have some HTML that I do not control.
<div id="myDiv">
Stuff inside my div...
</div>
I want to add an ngClick to it. If I could control the html, I would just do this
<div id="myDiv" ng-click="doSomething()">
Stuff inside my div...
</div>
But like I said, I can't change the html. If this was jQuery, I would just do
$('#myDiv').click(function(){
doSomething();
});
How do I do this in Angularjs? Thanks.
UPDATE
Judging from the downvotes, it seems like you guys are not happy with what I am trying to do here, so let me explain.
I am using AngularUI in my app. AngularUI has all these templates that they insert. For example
<accordion-heading></accordion-heading>
becomes
<div class="panel-heading">
<h4 class="panel-title">
<a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span class="ng-binding ng-scope">Heading</span>
</a>
</h4>
</div>
I want to add ngClick to "panel-title". I COULD overwrite the template and add it, but I don't want to do that. Coming from jQuery, it makes sense to just listen to a click event on "panel-title". How it is done Angular? Thanks.
You need to find the element, smth like: angular.element(//selector here); then add attribute you need(ng-click), .attr('ng-click', '//whatever should be here'), and then compile it with angular $compile.
But. I feel sad that you have to do this, I hope you'll find a possibility to change html.
Docs for compile
I'm trying to create a menu using angular. A menu item can have children requiring another ng-repeat to print the sub nav items. I'm noticing some strange behavior when attempting to insert an anchor tag within the 2nd ng-repeat.
Link to fiddle: http://jsfiddle.net/npU7t/
<li ng-repeat="sub_menu_item in menu_item.sub_menu">
<a href="">
{{ sub_menu_item.title }}
</a>
</li>
With
{
title: 'menu item with children',
sub_menu: [
{
title: '<-- empty anchor tag???'
}
]
}
Results in
<li ng-repeat="sub_menu_item in menu_item.sub_menu" class="ng-scope">
<-- empty anchor tag???
</li>
Where the did duplicate / empty anchor tag come from? How can I prevent it from being created?
Appreciate the help!
This isn't a bug with Angular, but rather how you have your markup.
UPDATE:
The issue is actually the nested <a> tag, not the <ul> tag.
<a href="">
<span class="title">{{ menu_item.title }}</span>
<ul class="sub-menu" ng-if="menu_item.sub_menu">
<li ng-repeat="sub_menu_item in menu_item.sub_menu">
<a href="">
{{ sub_menu_item.title }}
</a>
</li>
</ul>
</a>
In fact, if you remove Angular from the equation altogether, you will see that the extraneous <a> tag is still added to the DOM: http://jsfiddle.net/jwcarroll/cXkj4/
If you get rid of the nested <a> tag, then the extra element will disappear.
<a href="">
<span class="title">{{ menu_item.title }}</span>
</a>
<ul class="sub-menu" ng-if="menu_item.sub_menu">
<li ng-repeat="sub_menu_item in menu_item.sub_menu">
<a href="">
{{ sub_menu_item.title }}
</a>
</li>
</ul>
In both HTML 4.01, and HTML 5, having a nested <a> tag is a no no.
The simplest possible recreation of the problem I could come up with is this bit of markup:
<a href="">Outer
<p>Blah
Inner
</p>
</a>
Because you can't nest <a> elements within each other, the browser is doing it's best to recreate your intent while keeping the DOM clean. What you end up with is this:
Outer
<p>
Blah
Inner
</p>
This makes sense when you realize what the browser is trying to do. The browser is trying to do three things:
Keep Outer, Blah and Inner text elements inside hyperlinks
Contain Blah and <a>Inner</a> inside a single <p> tag
Ensure no <a> tags are nested within each other
The only sensible way to accomplish all three of these is to wrap both Outer and Blah text elements in separate <a> tags in a way that isn't nested. This is the closest approximation to the original intent without breaking the DOCTYPE rules.
I hope this helps.
Very strange. It doesn't appear with any tag besides <a> (like <p> or <div>). It looks like an outright bug to me - I'd submit a proper bug report.