I am unable to select a list element when I click on the link I get the list to appear which should make the style display block visible however watir cannot find the element and times out.
Here is a sample of the code just showing one list item but they are all the same. The unique aspect would be the text. "Machine Translation"
<a id="addQuality" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add New Output Quality">
<ul id="addQualityList" class="dropdown-menu" style="display: none;">
<li id="3d3c4316-b8ad-45bf-b8be-03ee69452deb" class="dropdown-menu-list addQualityTabItem add-quality-dropdown" data-url="/Client/AddContractTranslationQuality?id=255b9627-5452-4b6a-af46-084af684ff27&qualityId=3d3c4316-b8ad-45bf-b8be-03ee69452deb&prefix=Contracts[43c13738-abc4-42e1-89b1-7211d581e4be]">Machine Translation</li>
#b.link(:id => "addQuality").click # This will display the list
#b.select_list(:id => "addQualityList").option(:text => "Presentation").when_present.select
and I tried...
#b.select_list(:id => "addQualityList").when_present(2).click
I was able to come up with a solution. If anyone has another that is more elegant please post. Thanks.
#b.link(:id => "addQuality").click
#b.div(:class => "col-md-12").ul.li(:text => "Publication").click
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I am making list of button that will lead to different YouTube videos on ReactJs page. The issue is that when I map the links from json file (which contains video links), all the buttons get the last link of the mapped array. I need a way that all the rendered buttons will get their respective links. My code is below, I am using react ModalVideo to show my YouTube video.
<ul className="list-unstyled">
{datalist.lectures.map((value, index) => {
return (
<li key={index}>
<ModalVideo channel='youtube' autoplay isOpen={isOpen} videoId={value} onClose={() => setOpen(false)} />
<button className="play-icon" onClick={()=> setOpen(true)}> <i className="las la-play"></i> Lecture: {index+1}</button>
</li>
)})}
</ul>
All the links are coming from Json file where the code looks like this
"lectures": [
"BT4YihNXiYw",
"NSFLhnv2pQI",
"sEPxqpFZit8",
"fU8QhoUJ_sE",
"r3XFYOtvUng",
"MZAkMddxhpg"
]
I think the problem I have right now is that after the page render and mapping ends it only remembers what the last link is store in value, because of that no matter which button i click it shows me the last value of the mapped array
Just some quick ideas looking at the minimal snippets available.
let's not to render multiple ModalVideo component like above, move it out from the map.
Use another state to keep track the change of the youtube videos' ID.
For example
const [isOpen, setOpen] = useState(false);
const [videoId, setVideoId] = useState(null);
const playVideo = (vid) => {
setOpen(true);
setVideoId(vid);
};
return (
<div>
<ModalVideo
channel='youtube'
autoplay
isOpen={isOpen}
videoId={videoId}
onClose={() => setOpen(false)}
/>
<ul className="list-unstyled">
{
datalist.lectures.map((value, index) => {
return (
<li key={index}>
<button className="play-icon" onClick={() => playVideo(value)}>
<i className="las la-play"></i>
Lecture: {index + 1}
</button>
</li>
)
})
}
</ul>
</div>
);
We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
I am trying to scrape the building names, addresses, etc from this website.
I have tried using tools such as import.io, Webharvey and others but the issue is that it only allows me to scrape the text in the link tag.
Below is a sample of the source code of the relevant section I want to work with. What I would like is a way to scrape the text but also the 'data-original-title', 'the data content' and other attribute data.
<div class="container">
<ul class="c-buildingbar">
<li><span>Buildings:</span></li>
<li><a class="acc" data-toggle="popover" data-placement="top" data-original-title="Pavillon Des Soeurs Grises" data-content="1190 Guy Street" href="?building="></a></li>
<li><a class="acc" data-toggle="popover" data-placement="top" data-original-title="B Building" data-content="2160 Bishop" href="?building=B">B</a></li>
...
</div>
I dont normally work in C# but this should do the trick for you:
{
HtmlAgilityPack.HtmlWeb web = new HtmlWeb();
HtmlAgilityPack.HtmlDocument doc = web.Load ("http://www.concordia.ca/maps/sgw-campus.html");
foreach (HtmlNode row in doc.DocumentNode.SelectNodes("//li[contains(#class,'acc')]/a"))
{
Console.WriteLine(row.SelectSingleNode("/#data-original-title").Value);
Console.WriteLine(row.SelectSingleNode("/#data-content").Value);
}
Console.ReadKey();
}
Although I can't test it myself this should give you something to work with :)
I am trying to access sequential elements and don't know how to advance the the script down the page. So, here is a snippet of the code.
<div class="card highlighted">
<div class="card-fix">
<a class="card-remove icon" title="Don't show member again" onclick="$jq( '#search-results' ).msg( 'remove', this )" data-userid="93872246">
X
</a>
<dl></dl>
<div class="card-actions">
<a class="quickview" title="Quick view" onclick="$jq('#dialog-profile').msg('show', '/profileinfo/SearchProfi…lTseEdmEQ==&lid=1&searchType=S&pageNumber=1'); return false;" href="#"></a>
<a class="button button-primary" title="Favorite her!" href="/matchbook/addEntry.aspx?uid=Mu/BwYPn0nxhWlTseEdmEQ==&pn=1&rn=4&tp=S&handle=Annie5170&lid=1065"></a>
</div>
</div>
<div class="card-fix">
<a class="card-remove icon" title="Don't show member again" onclick="$jq( '#search-results' ).msg( 'remove', this )" data-userid="108272583"></a>
<dl></dl>
<div class="card-actions">
<a class="quickview" title="Quick view" onclick="$jq('#dialog-profile').msg('show', '/profileinfo/SearchProfi…DA3R3daaQ==&lid=1&searchType=S&pageNumber=1'); return false;" href="#"></a>
<a class="button button-primary" title="Favorite her!" href="/matchbook/addEntry.aspx?uid=y98x/Mj+hc+61DA3R3daaQ==&pn=1&rn=4&tp=S&handle=dancer4498&lid=1065"></a>
</div>
</div>
In other words I need to continue looping through these quickviews and then running a small script and doing it all again. Then go to the next page and do it again...etc. However, if I use this now in a loop it will only pick up the first quickview 5 times.
# 5.times do |n|
# browser.link(:title => 'Quick view').click
# sleep (2)
# browser.link(:class => "icon dialog-abandon").click
# # sleep (2)
# end
So my question is how can I have it advance through all of the quick views which there are 18 per page.
It would also be great to be able to save the
data-user-id="93872246"
and the portion after the handle in the href, ie.
handle=Annie5710
in a file in a hash as well.
Thanks and I appreciate all of the help.
You have to do this:
//get total title in a page
totalTitleSize=browser.link(:title => 'Quick view').size
and looping it:
totalTitleSize.times do |n|
browser.link(:title => 'Quick view', :index=> n).click
sleep (2)
//test it or use index in it If you need
browser.link(:class => "icon dialog-abandon").click
sleep (2)
end
this should be added to the code.
browser.link(:title => 'Quick view', :index=> n).click
now everything works fine.
As the other answers show, the problem is that the line:
browser.link(:title => 'Quick view').click
Will always click the first matching link. Using the :index allows you to override the default first match. However, I would argue the better solution is to get a collection of matching links and iterate through that. It will save you from manually handling the index.
browser.links(:title => 'Quick view').each do |link|
link.click
sleep (2)
browser.link(:class => "icon dialog-abandon").click
sleep (2)
end
Notice here that we have created a collection using links that we iterate though using each.
However, since you also want to collect other data, you might want to iterate through the parent divs:
browser.divs(:class => 'card-fix').each do |parent_div|
puts parent_div.link(:class => 'card-remove').data_userid
#=> "93872246"
href = parent_div.button(:class => 'button-primary').href
puts href[/handle=([^&]+)/, 1]
#=> "Annie5170"
parent_div.link(:class => "quickview").click
sleep (2)
browser.link(:class => "icon dialog-abandon").click
sleep (2)
end