I have a input field where the user can type normally. Just beside the field there is an arrow
on click of that arrow a dropdown will get open that contains list of data.
Now when the user clicks on any of the values in the dropdown list that should get displayed in the input field
This selected value can be edited by the user as it will be treated as a normal input value.
The issue at my end is that when i select the value from dropdown it is coming like this
HTML Code
<input type="text" value="" id="job" placeholder="Job title" class="form-control title" name="job">
<button type="button" class="form-control btn btn-default toggle-dropdown pj-dropdown-menu pj-jobtitle" data-toggle="dropdown" name="job_title" id="job_title">
<input type="hidden" name="selected_value" data-bind="bs-drp-sel-value" value="">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu line pj-dropdown-menu" role="menu" >
<li class="line" >
<a href="#">
<span class="developer">Frontend Developer </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
<li class="line">
<a href="#">
<span class="developer">Backend Developer </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
<li class="line" >
<a href="#">
<span class="developer">Business Consultant </span>
<p class="years">12 yrs</p>
<div class="san-francisco-calif">
SanFrancisco california USA
<p class="hour"> $24/hour</p>
</div>
</a>
</li>
</ul>
Script Code
<script>
$('.dropdown-menu a').on('click', function(){
$('.toggle-dropdown').html($(this).find('span').html() + '<span class="caret"></span>');
})
</script>
Can you please try this script.
<script>
$('.dropdown-menu a').on('click', function(){
$("#job").val($(this).find("span").text());
})
</script>
On click of a tag simply find the inner span's text and assign that as a value in a text box with ID #job.
Related
js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?
In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileDoc.doc">fileDoc.doc</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
<div class="">
<span>
<div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<i aria-label="icon: paper-clip" class="anticon anticon-paper-clip">
...
</i>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="fileJpeg.jpeg">fileJpeg.jpeg</span>
<span class="ant-upload-list-item-card-actions ">
<a title="Remove file">
<i aria-label="icon: delete" title="Remove file" tabindex="-1" class="anticon anticon-delete">
...
</i>
</a>
</span>
</span>
</div>
</div>
</span>
</div>
This is my case, i want to select the " .ant-upload-list-item-card-actions > a" when the class "ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" contains fileDoc.doc
I made this
candidateUploadFileButton = '#filesUpload';
candidateUploadRemoveButton = '.ant-upload-list-item-card-actions > a';
cy.get(this.candidateUploadFileButton, {force: true}).contains(fileName);
cy.get(this.candidateUploadRemoveButton).click();
It works for a single input only for a single div class, if there two classes like in the previously example , it doesn't work beacuse it says there are multiple values
I added this picture, maybe it will help what i want to do, i want to press Remove button for the file named "fileDoc.doc"
https://i.stack.imgur.com/voQqp.png
Refer here:
As per your markup, you can use this:
cy.contains(fileName).next().find('> a').click()
How to click on drop-down element which appears after clicking on item:
<div class="field loan-selection">
<label class="field__body">
<div class="field__label">Nettokreditbetrag
<!-- -->
</div>
<div class="field__control">
<div class="Select customSelect has-value Select--single">
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-2663001--value">
<div class="Select-value">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2663001--value-item">10.000 €</span>
</div>
<div aria-expanded="false" aria-owns="" aria-activedescendant="react-select-3--value" aria-disabled="false" class="Select-input" role="combobox" style="border:0;width:1px;display:inline-block" tabindex="0"></div>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"></span>
</span>
</div>
</div>
</div>
</label>
</div>
So, after clicking on element: id="react-select-2663001--value"
Drop down menu appears inside this div:
<div aria-expanded="false" aria-owns="" aria-activedescendant="react-select-3--value" aria-disabled="false" class="Select-input" role="combobox" style="border:0;width:1px;display:inline-block" tabindex="0"></div>
And item aria-activedescendant change value according number of item inside the list, for example react-select-3--options-2 or 1 in the end.
So what will be better, can i just change the value for 20 000 for:
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2663001--value-item">10.000 €</span>
or i need to click in some item like: aria-activedescendan="react-select-3--options-2"
Q. How to click on drop-down list which doesn't have id
A. Its not necessary that all element should have id attribute. You can use other attributes to make that unique and locate the same
Now about your problem :
Suppose you clicked on react-select-2663001--value and it started showing some dropdown based on your selection
So either you can get all the dropdown option as below
List<WebElement> noOfDropdown = driver.findElement(By.cssSelector("div[aria-activedescendant^='react-select-3--value']"));
I have a problem with the next code
scorm
In the previous image you can see a scorm with a list of pages on the left and a counter down at the center.
$(document).ready(function(){
$(".ViewerPagination__fullpage").html($("li.liItem").size());
$(".ViewerPagination__page").text(1);
$("li.liItem").on( "click", function(){
var numpag = $("li.liItem").index(this);
$(".ViewerPagination__page").text(numpag+1);
$('a.nav_delante').on( "click", function(){
var summa = ++numpag;
$(".ViewerPagination__page").text(summa+1);
if (summa === $("li.liItem").length) {
$(".ViewerPagination__page").html($("li.liItem").size());
$('a.nav_delante').off();
}
});
$('a.nav_atras').on( "click", function(){
var rest = --numpag;
$(".ViewerPagination__page").text(rest-1);
if (rest === 1) {
$(".ViewerPagination__page").text(1);
$('a.nav_atras').off();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--this is the html code that I use for the list:-->
<ul class="uItem">
<li title="text1" class="liItem ">
<div class="divItem notattempted selected" data-pag="001">
<span class="spanItem">
<a class="aItem">text1</a>
</span>
</div>
</li>
<li title="text2" class="liItem ">
<div class="divItem notattempted" data-pag="002">
<span class="spanItem">
<a class="aItem">text2</a>
</span>
</div>
</li>
<li title="text3" class="liItem ">
<div class="divItem notattempted" data-pag="003">
<span class="spanItem">
<a class="aItem">text3</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="004">
<span class="spanItem">
<a class="aItem">text4</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="005">
<span class="spanItem">
<a class="aItem">text5</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="006">
<span class="spanItem">
<a class="aItem">text6</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="007">
<span class="spanItem">
<a class="aItem">text7</a>
</span>
</div>
</li>
</ul>
<!--this is the html code that I use for the counter:-->
<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">·</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>
If you click on the item of the list, it works fine, but i have problems with the next and back buttons, it does not work until you select an item from the list and sometimes they work badly since they start counting -1, -2 when you press the back button and they go past the number of items in the list with the forward button.
Can someone help me to solve this problem with a best code? thanks.
i just uploaded the scorm, you can see it online following the next link, you only have to loging, I know, it is boring, but it is the only way that I can show you this, so I am waiting for your help.
https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3
Thanks in advance.
<div class="scrolling-items-wrapper">
<div class="menu" style="max-height: 105px;">
<div class="scrolling" style="width: 196px; max-height: 105px;">
<div class="scrolling-content">
<ul >
<li data-menuid="ABC_1">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_1</span>
</a>
</li>
<li data-menuid="ABC_2">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_2</span>
</a>
</li>
<li data-menuid="ABC_3">
<a style="white-space:nowrap;" href="#">
<span class="checkbox-container" href="#">
<span class="checkbox" visibility="hidden"></span>
</span>
<span>ABC_3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Manual click :
Whenever that element is clicked manually it generates a dynamic ID.
Using jQuery :
I want to click a particular element suppose ABC_1 using jQuery.
When it is clicked it should generate the Dynamic ID.
Did you try this?
$( "li[data-menuid='ABC_1']" ).click()
If it doesn't work here is a list of all jquery selectors: https://api.jquery.com/category/selectors/
If you have al element with ID ABC_123, you can do this:
$(document).ready(function() {
$("#ABC_123").click(function () {
var newId = "ABC_"+new Date().getTime();
this.id= newId;
});
});
This will change the id of the element by adding the date in miliseconds. Then, do what you want with the new ID.