I'm making a code for download information from a website. My problem consists of access to a Href in a drop down with submenus. I have tried many codes, but any of them works.
The references with getElementById or getElementsByClassName didn't work because the functions focus, click, selecteditems ="1" are not supported by this objects. The dropdown menu has the particularity of being managed first by a click and then by focussing them. After the first click over three points, it hovers a unique option named Export and approaching it hovers another three options. I need the last one named "Download associated deductions". This is the code of the specific tag.
<a title="Download associated deductions" class="ajax" href="exportPaymentLineItems.lvp?requestUID=&reportType=xls&reportName=Payments and associated deductions&ajax=true&isDrillable=" target="_blank">
<span class="prgx-icon excel-icon"></span> Download associated deductions
</a>
This is the code I have in VBA
Dim IE As Object
Set IE = CreateObject("InternetExplorer.Application")
'...
IE.Document.getElementsByClassName("ajax").Click
Previous in HTML code, the first click to open the dropdown menu
<a class="btn btn-dots-vertical" id="dLabel" role="button" aria-expanded="true" href="#" data-toggle="dropdown" data-target="#">
</a>
<ul class="dropdown-menu multi-level dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Export</a>
<ul class="dropdown-menu dropdown-menuright">
<li><a title="Excel" href="supplierReport.lvp?requestUID=&reportType=xls&reportName=BasicClaimsPaymentReport" target="_blank"><span class="prgx-icon excel-icon"></span>Excel</a></li>
<li><a title="CSV" href="supplierReport.lvp?requestUID=&reportType=csv&reportName=BasicClaimsPaymentReport" target="_blank"><span class="prgx-icon csv-icon"></span>CSV</a></li>
<li><a title="PDF" href="supplierReport.lvp?requestUID=&reportType=pdf&reportName=BasicClaimsPaymentReport" target="_blank"><span class="prgx-icon pdf-icon"></span>PDF</a></li>
'The one I need to click, download or copy to open in another explorer tab
<li>
<a title="Download associated deductions" class="ajax" href="exportPaymentLineItems.lvp?requestUID=&reportType=xls&reportName=Payments and associated deductions&ajax=true&isDrillable=" target="_blank">
<span class="prgx-icon excel-icon"></span> Download associated deductions
</a>
</li>
</ul>
</li>
</ul>
In order to download the document I expect to click the right class, copy the Href and paste in a new explorer tab or just initiate the download with a query sector.
Try an attribute selector
ie.document.querySelector("[title=Excel]").click
ie.document.querySelector("[title='Download associated deductions']").click
Your line:
IE.Document.getElementsByClassName("ajax").Click
won't work if only because that method returns a collection. You would need an index e.g.
IE.Document.getElementsByClassName("ajax")(0).Click
querySelector returns a single node. The first match for the css selector passed to it between the ""
Related
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
Hello i am new to accessibility and i was checking a sidebar like component with axe dev tools, i got this issue: Nested interactive controls are not announced by screen readers.
i was wondering ho i could fix it as i dont understand how else to write it in order to make it accessible heres an example of the code
<nav>
<ul role="tablist" aria-label="menu">
<li role="tab" aria-selected="true">
<a tabindex="-1">Some link</a>
</li>
<li role="tab" aria-selected="true">
<a tabindex="-1">Some link</a>
</li>
<li role="tab" aria-selected="true">
<a tabindex="-1">Some link</a>
</li>
<ul>
<nav>
A tab widget is considered an interactive element. You click on one to switch tabs in a tab navigator. Having a nested element within the tab (in your case, a link <a>) would be weird because clicking on the link might activate the link or it might activate the tab. It's confusing.
See the tab pattern at https://www.w3.org/TR/wai-aria-practices/#tabpanel and also the associated example at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html. You'll see that they use <button> elements for the tabs instead of list elements. You can use a list if you want but the element with role="tab" must be clickable (including via a keyboard) and shouldn't have a nested element that can also be clicked on.
Perhaps your links were supposed to be in the tab panel that displays after selecting on the tab selector?
I created a site using Boostrap and WAMP Server and now I am trying to move it to a virtual server, so more people could use it.
The site looks fine, but when clicking a drop-down toggle for example, it doesn't display anything, it just goes to href="#"
My element looks like this:
<li class="dropdown" style="border-radius: 5px;">
<a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white;font-size: medium; background-color: #8A2BE2;border-radius: 5px;">Search <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a target="_blank" href="search_1" style="color:#601e9e;font-size: medium;border-radius: 5px;">Option 1</a>
</li>
<li><a target="_blank" href="search" style="color:#601e9e;font-size: medium;border-radius: 5px;">Other Options</a>
</li>
</ul>
</li>
Is there anything I need to change? I moved all the files and folders.
You probably missed the bootstrap JavaScript file. Make sure you add after your footer and it should be fine. Your code should have something like this:
<script src="/js/bootstrap.min.js"></script>
Make sure ti put your script after jQuery script. Additionally, you may have this script, but it can't find the file in the specified location. Check if the file exist on your server.
I am developing a translating system where I am using Google Translator API. So I need to have a dropdown list of languages where I have to pass the code of the languages to the API. I tried to do that using bootstrap, But it didnt work. I know how to do this part in HTML. But I preffer to do that in Bootstrap. This is what I have tried so far
<div class="btn-group"> <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" >Spanish</a></li>
<li>Sinhala</li>
<li>Portuguese</li>
<li class="divider">Arabic</li>
<li>Quebec
</li><li>Ontario
</li><li>British
</li>
</ul>
</div>
Please give me an idea to proceed. Thank you in advance
Add a data-* attribute to your a tags. Attach a click event and get this data-* attribute and pass this to the API.
Ex:
<div class="btn-group">
<a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a data-code="spanishCode" href="#" >Spanish</a></li>
<li><a data-code="sinhalaCode" href="#">Sinhala</a></li>
<li><a data-code="portugueseCode" href="#">Portuguese</a></li>
<li class="divider">Arabic</li>
<li><a data-code="quebecCode" href="#">Quebec</a></li>
<li><a data-code="ontarioCode" href="#">Ontario</a></li>
<li><a data-code="britishCode" href="#">British </a></li>
</ul>
</div>
Click Event
$('ul.dropdown-menu li a').on('click',function(){
var code=$(this).data('code');
//pass this code in your API request and get the response
});
Definition and Usage
The data-* attributes is used to store custom data private to the
page or application.
The data-* attributes gives us the ability to embed custom data
attributes on all HTML elements.
The stored (custom) data can then be used in the page's JavaScript
to create a more engaging user experience (without any Ajax calls or
server-side database queries).
The data-* attributes consist of two parts:
The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
The attribute value can be any string
Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent
<div class="btn-group"> <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Spanish</li>
<li>english</li>
</ul>
</div>
jQuery
$(".langclass").on("click",function(){
var code = $(this).data("langcode");//call this code in your functin
callabelfunction(code);
})
I've been using Selenium with the product for a while.
Regular HTML pages, forms and javascript are working well with it.
Our developer just added an AJAX drop-down menu.
I can't 'record' that with selenium, how can I use it? Actually I can record that the control was initially clicked (which makes the drop-down appear) but not what option is then clicked. How can I then detect that they clicked on one of the options?
The HTML that's displayed is:
<ul id="fruit-switcher" class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" href="#">
Change fruit…
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a rel="nofollow" data-method="put" href="/admin/fruits/23-bananas/activate"></a>
</li>
<li>
<a rel="nofollow" data-method="put" href="/admin/fruits/28-apples/activate"></a>
<li>
</li>
<li>
other options (a links)...
</li>...
</ul>
</li>
</ul>
<script>
//<![CDATA[
$(function() {
$('#fruit-switcher .dropdown-toggle').dropdown();
})
//]]>
</script>
You can always send_keys to the element.
Actually it was straight-forward selenium code:
click link="Change..."
pause 200
click //ul[contains(#id,'fruit-switcher')]//ul[contains(#class,'dropdown-menu')]/li[3]/a
click link="Change..."
pause 600
click //ul[contains(#id,'fruit-switcher')]//a[contains(text(),'Bananas')]