How capture dynamically populated dropdown list ids in Capybara - ruby

I am using Capybara,Rspec and Ruby for my development. I am having drop down list which is populated with values with dynamic ids because of which I am not able locate the element correctly. Here is HTML code. I tried to get the solution from this site as well as by googling. But I couldn't get the correct solution
when I am doing the firebug I am getting Xpath as //[#id='select2-result-label-8'] and every time I am getting new id in the last meaning, next time if I go I will get it as //[#id='select2-result-label-11']. How to resolve this issue. I am having similar issues with my group of check box also. Hope this solution will help there also
<ul id="Values" class="check" role="listbox">
<li class="Reports " role="presentation">
<div id="select2-result-label-3" class="history" role="option">
<span class="same"/>
Add New
</div>
</li>
<li class="Reports-highlighted" role="presentation">
<div id="select2-result-label-4" class="history" role="option">
<span class="same"/>
Multiple
</div>
</li>
<li class="Reports" role="presentation">
<div id="select2-result-label-5" class="history" role="option">
<span class="same"/>
Last
</div>
</li>
</ul>

Related

Thymeleaf/SB How do I pass in a variable from an object to a link element's href attribute?

I want to pass in the project.url variable into the th:href attribute of the element, but currently the URL that is navigated to is - /project/project.url/contribute which is obviously not what I wanted to happen.
The list above the button displays the project object's information and the URL is shown correctly.
<ul>
<span>Title: </span>
<li th:text="${project.url}">Title</li>
<span>Started: </span>
<li th:text="${project.publishedOn}">Started</li>
<span>Target: </span>
<li th:text="${project.targets}">Target</li>
<span>Description: </span>
<li th:text="${project.description}">Description</li>
<span>Amount Contributed: </span>
<li th:text="${project.amountContributed}">Amount Contributed</li>
</ul>
<div class="contributeButton">
<button>
<!-- Contribute -->
<a th:href="#{/project/${project.url}/contribute(action='show_all')}">Contribute</a>
</button>
</div>
What href do I need to put inside the link for this to work correctly? Thanks.
You can use concatenation to do this. I haven't tested this but give it a try:
<a th:href="#{'/project/' + ${project.url} + '/contribute(action=\'show_all\')'}">view</a>
You should be taking advantage of Thymeleaf's standard URL syntax for this:
<a th:href="#{/project/{url}/contribute(url=${project.url})}">view</a>

How to find xpath in label class?

Can someone assist, I need to identify the xpath that's inside label class for the last ticket-type. The .html code is as below.
<div class="vertical-accordion">
<ul id="accordion-5" class="accordion">
<li class="open-li">
<a class="toggle-link open" href="#">
<span>Tickets on your smart card</span>
</a>
<div class="accordion-drop" style="display: block;">
<ul>
<li>
<li>
<li>
<label class="ticket-type">megarider</label>
<label class="validity"> (7 day: 16 June to 22 June 2016 ) </label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
</div>
</div>
</div>
</article>
If you want to find the last ticket-type, I assume that there are multiple ticket type...
You didn't provide a lot of HTML, I'll answer with that assumption :
//label[#class='ticket-type'][last()]
Hope it'll help !
You can use this xpath to find the element in your example:
//label[#class='ticket-type'][1]
Open up this page using Chrome, Hit F12 Developer tools, Inspect the element, find the label in the F12 window (Elements Tab) right click on the label tag and select Copy -> Copy XPath

Kendo UI TabStrip Helper

I am newbie in Telerik (Kendo). I want to know how can I hide or show tab based on roles or authentication as per user. I guess its been done by Helper, but I am not sure how to do it.
Please help me regarding this.
Thanks in advance.
Regards,
DS
Its a bit difficult to provide you with the best answer without seeing what you have so far, but if your initializing the TabStrip using JavaScript you will have a list if tabs in your html:
<div id="example">
<div id="tabstrip">
<ul>
<li id="TabParis" class="k-state-active">
Paris
</li>
<li id="TabNewYork">
New York
</li>
<li id="TabLondon">
London
</li>
</ul>
<div>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</div>
<div>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
<span class="sunny"> </span>
</div>
</div>
Give each of the tab list items an id.
Then simply show or hide the list item by Id using JQuery
$('#TabNewYork').hide()
Here is a working example in JSFiddle: http://jsfiddle.net/loanburger/9mLz5wnc/

How to fill my html with json object?

I am new in ajax.
I am trying to get value and want to fill in html code snippet.
I have html code and json object that has value.
Now I want to show the specific value in the different-different part of html code.
Here is my html code:-
<div>
<div class="borb clearfix">
<div class="profileholder fleft">
<img src="images/users/1.png" class="userpic">
<div class="icon state green"></div>
</div>
<div class="remainder">
<div class="padl10">
<div class="username">Anurag Shivpuri</div>
<div class="desig">Cheif Information Officer</div>
<div class="loc">Credit Operation | Pune</div>
</div>
</div>
</div>
<ul class="userdata">
<li>
<span class="lbl">Employee Code :</span>
<span> 2007</span>
</li>
<li>
<span class="lbl">Role_Designation :</span>
<span> Senior HR</span>
</li>
<li>
<span class="lbl">Department :</span>
<span> HR</span>
</li>
<li>
<span class="lbl">Sub_Department :</span>
<span> Talent Acquisition</span>
</li>
<li>
<span class="lbl">Official E-mail Id :</span>
<span> atul.gupta#bajajfinserve.co.in</span>
</li>
<li>
<span class="lbl">Mobile No :</span>
<span> 9844333932</span>
</li>
</ul>
<div class="footbar">
Reward
Incentive
Movement
Leaves
LnD
</div>
On success of ajax I am getting the value now I want to fill it in my html code.
Please help me.
You can use a library (like knockout) to do that, or you can use jQuery to create the elements:
$("<div>").append("some text").appendTo("body"); //creates a div, append some text and...
If you already have a success event in your ajax, you could grab an empty DOM element and set its content.
document.getElementById('placeholder').innerHTML = jsonData.myProperty;
You should use innerHTML in javascript.
Set some ID on the element you need to update:
<li>
<span class="lbl">Employee Code :</span>
<span id='employeeCode'> 2007</span>
</li>
Then update it with your json value:
document.getElementById('employeeCode').innerHTML= yourJsonObject.employeeCodeValue;

Twitter Bootstrap Dropdown Hover Open and Stay Active

I read the question on how to get the dropdown to open on hover which was an excellent fix, however I would like to get the nav li to keep "open" class when going down into "dropdown-menu" ul. Here is a jsfiddle http://jsfiddle.net/someyoungideas/29txm/ for my problem.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Help</a>
<ul class="dropdown-menu">
<li>New Item</li>
</ul>
</li>
</ul>
</div>
</div>​
One way to address your concern is to make use of the twitter-bootstrap-hover-dropdown plugin found on github. The plugin is also one of the answers in the old question: https://stackoverflow.com/a/12851616/538962.
Note the use of data-hover="dropdown" to call the plugin.
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"
data-delay="1000" data-close-others="false">Help</a>
Here is a working sample:
http://jsbin.com/xuwokuva/1

Resources