I'm trying to get an event to fire on anchors within an unordered list. My goal is to have the event report anytime someone has clicked on any of those anchors, doesn't matter which one. All anchors within the menu have the ID "cos-anch". Here's the list code:
<li><a id="cos-anch" href="#teeth_whitening">Teeth Whitening</a></li>
<li><a id="cos-anch" href="#porcelain_veneers">Porcelain Veneers</a></li>
<li><a id="cos-anch" href="#bonding">Cosmetic Dental Bonding</a></li>
<li><a id="cos-anch" href="#white_fillings">Tooth-Colored (White) Fillings</a></li>
<li><a id="cos-anch" href="#gum_lifting">Cosmetic Gum Contouring (Gum Lifting)</a></li>
<li><a id="cos-anch" href="#smile_makeover">Smile Makeover (Smile Design)</a></li>
I defined the trigger as "Click - Just Links." I set the trigger condition as Click ID equals cos-anch. Yet when I use either Preview mode or publish to my site, my event won't fire. How can I make this work?
Related
I want to create some link buttons that change each others css styling upon being clicked. I found some tutorials on how to do this, which halfway works as shown in this fiddle;
http://jsfiddle.net/6m3rb/23/
<a id="btn1" class="btn" href="#" onclick="btn2.style.background='#007eff'; this.style.background='#9a3e01';">Button 1</a>
<br /><br />
<a id="btn2" class="btn" href="#" onclick="btn1.style.background='#007eff'; this.style.background='#9a3e01';">Button 2</a>
The only problem is that when the link is clicked and the page is loaded, the css-styling of the link resets back to normal, but I want it to keep the styling until the other link is pressed.
As fare as I can imagine, I need to use some javascript to handle this effect, however, javascript isn't the area where I am strongest when it comes to the internet.
Kind regards
Neros
What you will want to try is using jQuery, it is a already predifned library of actions. For this situation you will want something in the .css() section here. http://api.jquery.com/css/
Your code would look something like this
$('#btn1').on('click', function(e){
e.preventDefault(); // In this case I am preventing the link from firing you do not need this if you want to trigger the link, also remove e from your function parameters
$('#btn2').css('background-color': 'red');
});
You can use JavaScript with JQuery (which is easier to use than pure JavaScript). Then you can call a function with the onclick event.
HTML:
<a id="btn1" class="btn" href="#" onclick="changebtn2()">change color of the second button </a>
<a id="btn2" class="btn2" href="#">will change color if you click on the first button </a>
and make sure you also declare the JQuery library in the HTML.
JavaScript:
function changebtn2(){
$("#btn2").removeClass("btn2"); //remove the old class
$("#btn2").addClass("btn2change"); //add the new class with a different color
}
CSS:
.btn2{
color: red;
}
.btn2change{
color: green;
}
Just replace the href="#" with void
Button 1
this void function will stop the browser from passing any query as a request.
I've solved this problem myself.. I already had the same function on a unordered list, so I simply added the buttons within this list.
This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...
So I have this code...
<script type="text/javascript">
var pages=new Array();
pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";
var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
document.getElementById('the_iframe').src=pages[end];
i=0;}
else {
document.getElementById('the_iframe').src=pages[i];
i++;}}
if (operation=="back") {
if (i==0) {
document.getElementById('the_iframe').src=pages[0];
i=end;}
else {
document.getElementById('the_iframe').src=pages[i];
i--;}}}
</script>
</head>
<body>
<ul id="menu" role="group">
<li>Welcome
<ul>
<li>Ease of Access Center</li>
</ul>
</li>
<li>Getting Started
<ul>
<li>Considerations</li>
<li>Changing Perspective</li>
</ul>
</li>
</ul>
<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>
<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />
and if I click on the next or prev button, it does move somewhere,but...
let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).
It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.
Many Thanks For Any Help!
Okay, I'll try the code, but don't down-rate it if its off.
This is the function that you could put before the changeSrc function:
function UpdateI(value) {i = value}
This the one click event that you would add to your links in the a tag. Off course, the 4 that is sent the function in this case, would be changed to whatever is appropriate for whatever ListItem is being referenced:
onClick ="UpdateI(4)"
Does this help you?
I don't understand your code here:
document.getElementById('the_iframe').src=pages[i];
i++;
If that is going to advance to the next element AND display it, you need to increase i first. Perhaps I'm just missing something, though.
I think your problem is that if the user clicks one of your direct links, rather than "next" and "previous" i in your code is not getting updated. So if your on page 2 and click the link for 4 and then click back, i is currently 2 and not 4. Hope that helps you. Be sure mark it as the answer if it does.
add an on click event to each of the link tags that would call a single function just like you have in the input tags. Have the function take an input of some number and assign that number to i. That should do it. Sorry I cant show any source code, JAVASCRIPT is not my language. I can read it but I wouldn't dare to write code from scratch. Hope this helps you.
I am using WebDriver API to test a webpage and the click() method is not working on a particular webpage.
Neither it is showing any exception nor clicking on the webelement (a link in my case). I tried to find the element using xpath, id and link but the click did not work.
However, when I tried contextClick (i.e. right click) operation on the same link, it worked. Also when I print the text or tagName of the web-element, the text or tagName is displayed perfectly fine on the output screen.
My code:
WebDriver browser=new InternetExplorerDriver();
browser.get("some website");
WebElement linkkk=browser.findElement(By.xpath("//*[#id='topsort']/li[2]/a"));
linkkk.click();
web-page code:
<div class="content">
<div class="blind" style="display: none;"></div>
<ul id="topsort">
<li>something</li>
<li><a class="category_nav_remote_link selected" href="some website">some text</a></li>
</ul>
</div>
</div>
I even used:
Actions action=new Actions(browser);<br/>
action.click(linkkk);
action.perform();
But in vain.
Try below options:
WebElement linkkk=browser.findElement(By.xpath("//*[#id='topsort']/li[2]/a"));
linkkk.click();
//click once again
linkkk.click();
OR - Try by sending ENTER key as below:
linkkk.sendKeys(Keys.ENTER);
OR - First move to that link & then click or send ENTER key
Actions moveTo = new Actions(driver);
moveTo.moveToElement(linkkk).click().perform();
Try using IJavaScriptExecutor to click on the button. It's been very successful on my app.
((IJavaScriptExecutor)_webDriver).ExecuteScript("$(arguments[0].click()",webElement);
For my learning, I'm building a document management solution with ASP.NET MVC3. Below are pages I manage:
a search/result page (list of items)
a favorite page (list of items)
an edit page
a create page
I also have a Site.Master page where I show a treeview menu on the left side of the screen. So wherever the user is located in the website, the treeview menu is showing his location by underlining his location in the menu.
For building the treeview menu, I use the code below (cleaned for easy reading):
<ul id="treemenu1" class="treeview">
<li>Documents
<ul>
<%= Html.TreeviewMenu(TreeMenu.Create("Search", "Search", "Affaires", null))%>
<%= Html.TreeviewMenu(TreeMenu.Create("Favorite", "Favorite", "Affaires", null))%>
<%= Html.TreeviewMenu(TreeMenu.Create("New", "Create", "Affaires", null))%>
</ul>
</li>
</ul>
The problem is that I need to underline the active item in my menu. So if user is displaying the search page, my search menu entry must be underlined. How can I proceed? I was thinking about the integration of this information in the strongly typed viewmodel passed to each viewpage but it failed because each page is using a different viewmodel. I prefer not using a session variable because it is not a clean solution.
Any ideas?
A solution with a session variable: I save the "current menu item" in a session variable (from my controller). So, whenever the Site.Master page is reloaded, it recreate every treeview menu item. For each one, it checks if the item is equal to the session variable. If yes, the class "selected" is added to the item (css highlighted with blue).
I don't really like using session variables. Maybe there are more elegant solutions?
How about using a helper:
public static MvcHtmlString MenuItem(
this HtmlHelper htmlHelper,
string text,
string action,
string controller
)
{
var li = new TagBuilder("li");
var routeData = htmlHelper.ViewContext.RouteData;
var currentAction = routeData.GetRequiredString("action");
var currentController = routeData.GetRequiredString("controller");
if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("active");
}
li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
return MvcHtmlString.Create(li.ToString());
}
and then:
<ul>
<%= Html.MenuItem("Search", "Search", "Affaires") %>
<%= Html.MenuItem("Favorite", "Favorite", "Affaires") %>
<%= Html.MenuItem("New", "Create", "Affaires") %>
</ul>
which could yield the following if you navigate to /Affaires/Favorite:
<ul>
<li>Search</li>
<li class="active">Favorite</li>
<li>New</li>
</ul>
Well, there is one easy and effective solution: let each page signal whether it's the active page and set a css class with jQuery.
Assuming your rendered html looks like:
<ul id="treemenu1" class="treeview">
<li>Documents
<ul>
<li class="search"></li>
<li class="favorite"></li>
</ul>
</li>
</ul>
At the bottom of each page, do something like (this would sit on the search view):
<script type="text/javascript">
$(document).ready(function () {
// Set active nav
$('#treemenu1 li.search').addClass('selected');
});
</script>
UPDATE based on new info
A little cleaner than a session vraiable could be to use the ViewBag property from the controller.
public ActionResult Search(/*whatever*/)
{
// do things
// set the selevted view
ViewBag.SelectedMenuItem = "search";
return View();
}
Then in your master page you can check against <%: ViewBag.SelectedMenuItem %>
Note that SelectedMenuItem is a random name. The ViewBag property is of type dynamic so you can use any property name you like.
I've inherited some code which breaks a page up into tabs using divs. On the first page there are many required field and regex validators. The problem is a user can switch to another tab, trigger a postback and fail the validators on the first page, leaving things in a mess.
What I want to be able to do is perform the validation on the first page as a user selects another tab, thus preventing them from moving to a new tab until the first page is valid.
<ul>
<li>Tab 1 </li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
Where isValid needs to fire off the validators.
Thanks!
UPDATE: The answer provided by codeka is pretty close, however, because I need to provide both href and onclick attributes (to avoid messing up display), the tab (anchor) switch is still taking place even if validation fails. Here's how I solved this. disclaimer: ugly code ahead
<ul>
<li><a id="tab1Tab" href="#tab1" style="display:none"/><a onclick="isValid('tab1');">Tab 1</a></li>
<li><a id="tab2Tab" href="#tab2" style="display:none"/><a onclick="isValid('tab2');">Tab 2</a></li>
<li><a id="tab3Tab" href="#tab3" style="display:none"/><a onclick="isValid('tab3');">Tab 3</a></li>
</ul>
function isValid(tab) {
var valid = Page_ClientValidate();
var tabId = (valid ? tab : "tab1") + "Tab";
$("#" + tabId).click();
}
Note use of jQuery for cross-browser compatibility with click event. And this only works if there are no validators on other tabs, as per Thomas' answer, I'll need to use validation groups and extra logic in isValid if any get added.
ASP.NET creates a global javascript function Page_ClientValidate that you can call to fire the validators:
function isValid() {
return Page_ClientValidate();
}
You might try using a validation group per tab. On clicking from one tab to another, you would call something like so where the tab names represent the validation groups:
function TabValidate( tabName ) {
if ( Page_ClientValidate( tabName ) ) {
//do stuff
}
}
ADDITION I mentioned this in a comment, but I figured I would add it to my post. If there aren't any other validators on other tabs, then another solution would be to simply mark the other .NET controls on the other tabs that can trigger a postback with CausesValidation="false" (e.g. DropDownLists with AutoPostBack="true")