How can I click on the the element "one" in the following code:
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" id="Tiles">cat1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="Wid" href="javascript:void(0);">one</a></li>
<li><a id="Sett" href="javascript:void(0);">two</a></li>
<li><a id="Th" href="javascript:void(0);">three</a></li></ul></li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" id="Groups">Cat2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="Events" href="javascript:void(0);">four</a></li>
<li><a id="Folder" href="javascript:void(0);">five</a></li>
<li><a id="Cat" href="javascript:void(0);">six</a></li>
<li class="disabled"><a id="Procedure" href="javascript:void(0);">Procedure</a></li></ul></li></div>
Thanks:)
"one" is not an element, so you can only locate its parent <a> element:
By.Id("Widgets")
From what I understand, "one" is one value from a dropdown list, correct? If so, you can use one of the following methods to find the dropdown list and the particular value, after you name them in a class:
public void selectFromDropDownListFoundById(String detailIDIdentifier, String text, String value) {
Select droplist = new Select(driver.findElement(By.id(detailIDIdentifier)));
// Choose to Select by Text or by Value of the drop-down list
if (text == null && value != null) {
droplist.selectByValue(value);
} else if (text != null && value == null) {
droplist.selectByVisibleText(text);
} else {
throw new AssertionError("Cannot be both parameters null. Give text or value");
}
}
public void selectFromDropDownListFoundByName(String detailIdIdentifier, String text, String value) {
Select droplist = new Select(driver.findElement(By.name(detailIdIdentifier)));
// Choose to Select by Text or by Value of the drop-down list
if (text == null && value != null) {
droplist.selectByValue(value);
} else if (text != null && value == null) {
droplist.selectByVisibleText(text);
} else {
throw new AssertionError("Cannot be both parameters null. Give text or value");
}
}
Related
I'm trying to find out how to put a TMENU: .ACT-object before a TMENU: .NO-object, since I'm trying to achieve a Bootstrap 3.3.7 dropdown menu structure with the active item as leading <li>-element.
Currently I'm stuck on this part and I hope anyone can get me started to finish this structure. The structure I'm trying to achieve is the following:
<ul class="nav navbar-nav navbar-right pull-right" role="menu">
<li class="dropdown language-menu lang eng">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span>English</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="lang fr"><span>Français</span></li>
<li class="lang de><a><span>Deutsch</span></a></li>
<li class="lang es><a><span>Español</span></a></li>
<li class="lang pt><a><span>Portugues</span></a></li>
<li class="lang nl><a><span>Nederlands</span></a></li>
</ul>
</li>
</ul>
The only thing that goes wrong at the moment, is that the TMENU .ACT-object is appending the TMENU: .NO-object. It is being put insite the <ul class="dropdown-menu">-element.
The TypoScript I am using:
20 = HMENU
20 {
special = language
special.value = 0,1,2,3,4,5
current = 1
wrap = <ul class="nav navbar-nav navbar-right pull-right" role="menu">|</ul>
1 = TMENU
1 {
wrap = <ul class="dropdown-menu">|</ul>
NO = 1
NO {
allWrap = <li class="lang eng">|</li> || <li class="lang nl">|</li> || <li class="lang fr">|</li> || <li class="lang de">|</li> || <li class="lang es">|</li> || <li class="lang pt">|</li>
ATagParams =
ATagBeforeWrap = 1
linkWrap = <span>|</span>
}
#ACT < .NO
ACT = 1
ACT {
allWrap = <li class="dropdown language-menu lang eng">|</li>
}
}
}
I have tried a lot the last two days and I'm hoping anyone can help me out, or at least get me started so I know where my mistakes are.
Thanks a lot!
in general ACT is put inline amongst the NO menu items. to split it up so you have the ACT separated in front of the other NO items you need to render the menu two times: first only the ACT item(s) followed by the NO items.
as you want to have one UL-tag around it I would try a COA with that UL-wrap and then two menus where the first one only renders ACT with their LI-wrap and the second only the NO with their LI-wrap.
20 = COA
20 {
wrap = class="nav navbar-nav navbar-right pull-right" role="menu">|</ul>
10 = HMENU
10 {
special = language
special.value = 0,1,2,3,4,5
current = 1
1 = TMENU
1 {
ACT = 1
ACT.allWrap (
<li class="dropdown language-menu lang eng">|</li> ||
<li class="dropdown language-menu lang nl">|</li> ||
<li class="dropdown language-menu lang fr">|</li> ||
<li class="dropdown language-menu lang de">|</li> ||
<li class="dropdown language-menu lang es">|</li> ||
<li class="dropdown language-menu lang pt">|</li>
)
NO.doNotShowLink = 1
}
}
20 < .10
20 {
ACT.doNotShowLink = 1
NO >
NO = 1
NO {
allWrap (
<li class="lang eng">|</li> ||
<li class="lang nl">|</li> ||
<li class="lang fr">|</li> ||
<li class="lang de">|</li> ||
<li class="lang es">|</li> ||
<li class="lang pt">|</li>
)
ATagParams =
ATagBeforeWrap = 1
linkWrap = <span>|</span>
}
}
Based on Bernd Wilke's answer this is what finally worked for me:
lib.menuLanguage = COA
lib.menuLanguage {
10 = HMENU
10 {
special = language
special.value = 0,1
1 = TMENU
1 {
ACT = 1
ACT {
linkWrap = <li class="extra">| <b class="caret"></b><ul class="dropdown-menu">
doNotLinkIt = 1
stdWrap {
override = EN || DE
}
}
NO = 1
NO.doNotShowLink = 1
}
}
20 < .10
20.1 {
ACT >
NO >
NO = 1
NO {
doNotLinkIt = 1
linkWrap = <li>|</li>
stdWrap {
override = EN || DE
typolink {
parameter.data = page:uid
additionalParams = &L=0 || &L=1
ATagParams = hreflang="en-GB" || hreflang="de-DE"
addQueryString = 1
addQueryString.exclude = L,id,no_cache
addQueryString.method = GET
no_cache = 0
}
}
}
}
wrap = |</ul></li>
}
with this template:
<ul class="nav navbar-nav navbar-right">
<f:cObject typoscriptObjectPath='lib.menuLanguage' />
</ul>
I have a Login page where on login it takes user to Home Page where dynamic menu is loaded.The problem is that when a user clicks on one of the menulink the loaded menu is not visible
This is because I have written the code inside Index action of theHome controller.
So my question is where should I write the logic for dynamic menu so that it is accessible on clicking the menulink.
_Layout.cshtml file where menu is loaded
#model SMS.Models.ViewModel.DashboardVM
#if (Model != null && Model.MenuParentList.Count > 0)
{
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="active">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
#foreach (var parentItem in Model.MenuParentList)
{
<li class="treeview">
<a href="#">
<i class="fa fa-th"></i>
<span>#parentItem.MenuParentName</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
#Html.Partial("_MenuParent", Model.MenuList.Where(x => x.ParentID == parentItem.MenuParentID))
</ul>
</li>
}
</ul>
}
Logic for dynamic menu goes here
public ActionResult Index()
{
var _dashboardVM = new DashboardVM
{
User = _employee.Users.FirstOrDefault(),
MenuParentList=_db.Menus
.Where(x => _parentList.Contains(x.Id))
.Select(x => new SMS.Models.ViewModel.DashboardVM.MenuParent
{
MenuParentID = x.Id,
MenuParentName = x.MenuName
})
.OrderBy(x=>x.MenuParentID)
.ToList(),
MenuList=_employee.Designation.Role.MenuRoles
.Select(x=>x.Menu)
.ToList()
};
}
Create a separate [ChildActionOnly] method that generates your menu and call it from the layout page so its available in all pages
[ChildActionOnly]
public ActionResult Menu()
{
var model = new DashboardVM
{
....
}
return PartialView("_Menu", model);
}
and create a _Menu.cshtml partial view to generate the html
#model DashboardVM
....
and then in your layout, remove #model SMS.Models.ViewModel.DashboardVM (a layout should not have a model unless that model is a base class for all models used by the layout) and then include
#Html.Action("Menu", yourControllerName)
which will call the Menu method and insert the partial view it returns into the layout.
i am trying to display treeview structure for maintower and subtower (subtower has to be displayed under maintower) in mvc4. I used the below code in View. It displays structure like,
maintower1
subtower1
maintower1
subtower2
but, i want to display like
maintower1
subtower1
subtower2
Can anyone help me please?
#foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
{
<div id="treeview">
#if( maintower != #Html.Encode(dr[0]))
{
maintower = #Html.Encode(dr[0]);
<ul>
<li>#Html.Encode(dr[0])
<ul>
#foreach (System.Data.DataRow drow in ViewBag.treedata.Rows)
{
if( maintower == #Html.Encode(drow [0]))
{
<li> #Html.Encode(drow [1]) </li>
}
}
</ul>
</li>
</ul>
}
</div>
}
Before doing the following steps please make sure your ViewBag.treedata is in order by its column 0 (Order by ViewBag.treedata.Column[0])
<body style="font-family : Arial; ">
#{
var name = "";
}
#foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
{
<div id="treeview">
if( name != #Html.Encode(dr[0]))
{
name = #Html.Encode(dr[0]);
<ul>
<li>#Html.Encode(dr[0])
<ul>
#foreach (System.Data.DataRow drow in ViewBag.treedata.Rows)
{
if( name == #Html.Encode(drow [0])
{
<li>#Html.Encode(drow [1])</li>
}
}
</ul>
</li>
</ul>
}
</div>
}
</body>
You must use two loops one for maintower and one for subtower
Or something like that
#{var previousMainTower = String.Empty;
var closePreviousTag = false;}
<div id="treeview">
<ul>
#foreach (System.Data.DataRow dr in ViewBag.treedata.Rows)
{
#if(previousMainTower != dr[0])
{
if(closePreviousTag)
{
</ul>
</li>
}
<li>#Html.Encode(dr[0])
<ul>
<li>#Html.Encode(dr[1])</li>
#closePreviousTag = false;
}
else
{
<li>#Html.Encode(dr[1])</li>
#closePreviousTag = true;
}
#previousMainTower = dr[0]
}
</ul>
</div>
It's not a fully working code it's shows how you should figured it out.
In short you must check in each step of the loop if the current 'maintower' is the same as in previous steap and if it's equal then do not create it.
I have users list and want to bind that on top navigation bar, this will always visible for many pages, how i can bind it, i don't want to add code on each file, is there any method in mvc4 that is called for each view?
My view:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Name Three<b class="caret"></b>
<ul class="dropdown-menu">
//Here i want to show data dynamically, data can be in collection.
<li>Name one</li>
<li>Name two</li>
<li>Name Three</li>
<li>Four</li>
</ul>
</li>
</ul>
</div>
Controller:
ICollection<Names> names = this.obj.GetNames();
In situations like this I prefer to use a code behind call to the view bag. try something like this
#Html.DropDownList("Action", PathToController.GetUsers())
then on the controller where you want to put this method
public static List<SelectListItem> GetUsers(){
List<SelectListItem> ls = new List<SelectListItem>();
var result = //database call here
foreach(var temp in result){
ls.Add(new SelectListItem() { Text = temp.Name, Value = temp.ID });
}
return ls;
}
I need to get the index of the li.play relevant to the ul.showreel_thumbnails. Is this even possible? All i seem to get is the li index inside ul.row
<ul class="showreel_thumbnails">
<li>
<ul class="row">
<li class="play_video">item</li>
<li class="play_video">item</li>
<li class="play_video">item</li>
</ul>
</li>
<li>
<ul class="row">
<li class="play_video">item 4</li>
<li class="play_video">item</li>
</ul>
</li>
</ul>
so if item 4 is clicked it should give me the index of 4 etc...
best, Dan.
It may not be valid HTML but here's how it would work (with JQuery):
function FindMyCount()
{
var item_count = 0;
$("#showreel_thumbnails li").each(function() {
++item_count;
if($(this).hasClass("igotclicked"))
return false;
});
return item_count;
}
$("#showreel_thumbnails li").click(function() {
$(this).addClass("igotclicked");
var myCount = FindMyCount(); // 1 - the # of li's under the showreel piece
$(this).removeClass("igotclicked");
// Do what you want here.
});