Why is my css class not firing upon initial load? - css

I have a bootstrap tabbed component on my page. I am trying to control which tab is active upon reload of the page. But, on initial load the behavior of the tab is very peculiar. Here is the code:
<li #(Model.tab == 1 ? "class=tab-pane active" : "class=tab-pane" id="tab1"><l1>
what it is showing in the markup and it is not working is (notice the active out outside the quotes
<li class="tab-pane" active id="tab1"><l1>
the behavior only happens on inital load, but it the tabs are pressed, the behavior is normal, but the extra "active" remains. I am confused where the active outside the quotes is coming from?

The problem is your output doesn't render the double quotes so it looks like this, where the active class doesn't get attached to anything but the browser will just see it as a standalone attribute:
<li class=tab-pane active id="tab1"><l1>
Instead try this:
<li class="#(Model.tab == 1 ? "tab-pane active" : "class=tab-pane")" id="tab1"><l1>

Related

Click variables are empty

I'm trying to track all outbound links that contains the target=_blank, and after many hours of testing I realized that each click variables (in the debug mode) seems to be empty. I guess this is because there's a span element within the anchor. On some clicks the variables contain the full URL and attributes etc, but most of the time they don't - and there doesn't seem to be any constistency in this behavior.
Does anyone have any idea what's wrong here? Thanks!
DOM for the link:
<div class="elementor-button-wrapper">
<a href="#" class="elementor-button-link elementor-button elementor-size-sm" target="_blank" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Se priset</span>
</span>
</a>
</div>
The problem is, that you are using click trigger for all elements, which captures the exact element clicked, which is the span.elementor-button-text
You should use just "Click - Just links" type of trigger, and specify the links you would like to track. This will ensure, that the clicked element is the a tag, regardless of its child elements, that can get clicked.
You can set your trigger to capture only links with target=_blank attribute as {{Click Element}} matches CSS selector a[target="_blank"]
E.g.
EDIT:
Based on your relevant code part, the Link Click event should look like this:

MDL menu does not work when user clicks back button when using Turbolinks

So here is code to show the mdl menu. They click the edit button and then a menu appears.
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="edit-button"> edit</button>
<ul id="edit_menu" class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="edit-button">
<li>change</li>
<li>do something else</li>
</ul>
Unfortunately the drop down no longer works when the user clicks the back button to the page with the drop down. I can't seem to reinitialize MDL. If i click on a link in the menu and then hit the back button, the drop down will be left open. Any ideas?
Related issue was that turbolinks breaks the MDL stuff but this code fixes it. Unfortunately it does not fix the drop down when a user hits the back button
document.addEventListener 'turbolinks:load', ->
componentHandler.upgradeDom();
This was my workaround solution to solve the problem. It was only happening for 1 specific page so I found a unique string in the URL and then overrode the back button to do a turbolinks visit.
window.addEventListener "popstate", (e)->
if (e.target.location.pathname.indexOf('customize_board') != -1 )
Turbolinks.visit( e.target.location)
I hope that at least can help someone out so their page isn't broken.
I was experiencing the same issue. Apparently this happens only when using the back button (not the forward button). My workaround was to add a javascript file with the following content
document.addEventListener "turbolinks:load", ->
componentHandler.upgradeDom()
#addEventListener "popstate", (e)->
Turbolinks.visit(e.target.location)
This actually fixed my issue
<meta name="turbolinks-cache-control" content="no-cache">

How to locate a button defined within a list?

I am writing a selenium script that automates a web-page. I need to click on a button which is defined within a list.
This is the image of my web UI - New Account is the button I am referring to
This is my XML code :
<div id="00B4E000000LQ2C_topNav" class="topNav primaryPalette">
<div id="00B4E000000LQ2C_subNav" class="subNav">
<div class="linkBar brandSecondaryBrd">
<div id="00B4E000000LQ2C_listButtons" class="listButtons">
<ul class="piped">
<li>
<input class="btn" type="button" title="New Account" onclick="navigateToUrl('/setup/ui/recordtypeselect.jsp?ent=Account&ekp=001&retURL=%2F001%3Ffcf%3D00B4E000000LQ2C%26isdtp%3Dnv%26nonce%3Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%26sfdcIFrameOrigin%3Dhttps%253A%252F%252Fcs83.salesforce.com&save_new_url=%2F001%2Fe%3FretURL%3D%252F001%253Ffcf%253D00B4E000000LQ2C%2526isdtp%253Dnv%2526nonce%253Df8007ad94993912b7ff4149193a6096ccfed4ebb1454e0b9b310ad14b61de71d%2526sfdcIFrameOrigin%253Dhttps%25253A%25252F%25252Fcs83.salesforce.com&isdtp=vw','LIST_VIEW','new');" name="new" value="New Account"/>
</li>
<li class="lastItem">
</ul>
I used:
driver.findElement(By.xpath(".//*[#id='00B4E000000LQ2C_listButtons']/ul/li[1]/input")).click();
(Xpath was given by the firebug) but it gives me an error stating
unable to locate elements
Please help me script / locate this button.
You don't have to use XPaths generated by the Firebug and check the element's parents along the way. We can do better, you can write a more reliable and a simpler way to locate the element:
driver.findElement(By.name("new"));
or:
driver.findElement(By.cssSelector("input[name=new]"));
or:
driver.findElement(By.cssSelector("input[value='New Account']"));
Note that the XPath expression you have looks valid. You may be experiencing a timing issue and would need to wait for the element presence, visibility or clickability, see: How to wait until an element is present in Selenium?.
And, if the button is inside the iframe, you need to switch to its context and only then search the button:
driver.switchTo().frame("ext-comp-1005");
Hi please try like below
// first way
driver.findElement(By.xpath("//*[#name='new']")).click();
// second way
driver.findElement(By.xpath("//*[#class='btn']")).click();
// basically you can use various attributes of input tag with button inside the xpath to click
Update working with i frame
// A short way to identify how many iframe's are present on a web page
List<WebElement> numberOfFrames= driver.findElements(By.tagName("iframe"));
System.out.println("Total Number of iframes present are : " +numberOfFrames.size());
for(int i=0;i<numberOfFrames.size();i++){
// here u can identify iframes with any of its attribute vale say name,title or which is most suitable.
System.out.println("Name of the i-frames : " + numberOfFrames.get(i).getAttribute("name"));
}
// Back to your question - button lies inside iframe hence
// key here is before clicking you have to switch to the frame first
driver.switchTo().frame(driver.findElement(By.name("frame name")));
hope this helps you

Asp.Net while using tabbing in bootstrap can not retain focus on selected tab on post back

I'm using a bootstrap template for my project while using tabbing when page postback from 2nd tab again first tab shows on. I tried different things but wont work please help.
<div id="validationWizard" class="basic-wizard">
<ul class="nav nav-pills nav-justified">
<li><span>1 :</span> Basic Details</li>
<li><span>2:</span> Family Details</li>
<li><span>3:</span> Previous School</li>
<li><span>4:</span> Document Details</li>
<li><span>5:</span> Registration Details</li>
<li><span>5:</span> Save Details</li>
</ul>
</div>
You will need to maintain the state of the tabs explicitly by saving the current tab index in hidden field and setting current tab after page renders using javascript/jquery. As you are applying tabs style on client-side, server doesn't know about the state of the current active tab. If you use asp.net ajax control toolkit - tab control then ASP.NET automatically maintain the state of the tab.

when i use link target _blank then onClick new tab open and suddenly tab again close

I search too much on Google but i couldn't find any result so i'm posting my question here
I'm using wordpress 3.6 and the wp e-commere plugin
i'm use this anchor tag
<a target="_blank" href="http://www.google.com">google</a>
i also use window.open(url,'_blank'); // function do same problem
when a user clicks on the link, a new tab opens and within 1 second it closes again.. its not working in mozilla and chrome, but it is working in IE
i checked and there is no theme problem.
if i add an anchor tag from e-commerce product then the tag target=_blank will not work, and if i add a anchor tag from wp product then the anchor tag will work...
How can i solve this problem?
and if i add href value with out http:// e.g
google
it opens in new tab successfully
but then its url is
localhost/wordpress/product/www.google.com
if i write a proper href with http://, so there is open and close issue.
Any one know it solution ?
i apply many type of jquery and javascript code, but actually when i write _blank, and then new tab opening then issue comes
Update:
i'm adding some javascript code,
i use this method to open new tab
function urltarget(url,target){
if (target == '') {
target = '_self';
}
window.open(url,target);
return false;
}
if i enter
<a href="" onclik="urltarget('http://www.example.com','_blank');" > Example </a>
//its work ok, but if i used .net url
<a href="" onclik="urltarget('http://www.example.net','_blank');" > Example </a>
//when .net comes in url then it create problem, new tab open and again close.
but it work in IE

Resources