So I am trying to figure out why my page loads me back to the default tab after being refreshed.
I want to stay in the current tab even after the page is refreshed/reloaded
It will most likely be due to your tabs being loaded on the client side.
This means each time you switch to a different tab, your not actually making a new request, only showing and hiding different tabs. If you reload tabs, it will default back to first tab.
Easiest and most common way around this would be to use a URL hash to track the user's active tab. Then when you're loading your tabs after each request, can check the URL for a hash and if one exists, show the corresponding tab.
More info here: http://www.w3schools.com/jsref/prop_loc_hash.asp
Hope this helps :)
It was the easiest way to stay the tab. Look at the code like below.
Copy this code and paste in your js file.
Don't forget to understand how does this code running. Good luck!
$(document).ready(function() {
if (location.hash) {
$("a[href='" + location.hash + "']").tab("show");
}
$(document.body).on("click", "a[data-toggle='tab']", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on("popstate", function() {
var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
$("a[href='" + anchor + "']").tab("show");
});
Related
This is a single page website with navigation consisting of anchor links to different sections of the page. When the navigation is clicked URL updates to ex.(.com/#photos) and makes the browser add as a new page for each anchor link clicked. This makes the user have to click back multiple times if they wanted to get back to a previous website. I would like to have at max 2 back button presses, 1 to go to top of the page, 2 to go to previous website. I am really at a loss on where to implement this code, or if it is even ideal to mess with how the browser acts to the user. My google-fu turned up very little information on this issue.
You can attach a function to window.onpopstate event and then check if window.history.length has changed. If it has not changed, probably it is the back button press.
Like this..
var prevHistoryLength = -1;
window.onpopstate = function(e){
if (prevHistoryLength == window.history.length)
document.location = document.referrer;
prevHistoryLength = window.history.length;
}
I am new to protractor and would like to test if a link is working.
I understand trying to get the element id but what should i expect that the link equals?
Also has anyone got any good documentation on example protractor tests?
I have been through this http://angular.github.io/protractor/#/tutorial which was helpful but i need more example of possible tests I could do.
i have this so far:
it('should redirect to the correct page', function(){
element(by.id('signmein').click();
expect(browser.driver.getCurrentUrl()).toEqual("http://localhost:8080/web/tfgm_customer/my-account");
});
would like to test if a link is working
This is a bit broad - it could mean the link to have an appropriate hrefattribute, or that after clicking a link there should be a new page opened.
To check the href attribute, use getAttribute():
expect(element(by.id('myLink')).getAttribute('href')).toEqual('http://myUrl.com');
To click the link use click(), to check the current URL, use getCurrentUrl():
element(by.id('myLink').click();
expect(browser.getCurrentUrl()).toEqual("http://myUrl.com");
Note that if there is a non-angular page opened after the click, you need to play around with ignoreSynchronization flag, see:
Non-angular page opened after a click
If the link is opened in a new tab, you need to switch to that window, check the URL and then switch back to the main window:
element(by.id('myLink')).click().then(function () {
browser.getAllWindowHandles().then(function (handles) {
browser.switchTo().window(handles[handles.length - 1]).then(function () {
expect(browser.getCurrentUrl()).toEqual("http://myUrl.com");
});
// switch back to the main window
browser.switchTo().window(handles[0]);
});
});
I need to delay a little bit redirection to a new page after clicking on certain links.
Right now I'm using following jQuery:
$('.menu-element a').click(function(){
var src = $(this).attr('href');
$(this).removeAttr('href');
anim(src);
})
And it works fine. It runs really short animation and after that redirects to clicked page.
But I would like to keep the href attribute of link (i.e. in case when someone clicks twice very fast).
when I add $(this).attr('href', src); at the end of code listed above, it doesn't wait for animation to finish only redirects to new page right after clicking on the link.
How can I preserve the href property and avoid the page being redirected to new address by it?
add return false into your function. This prevents the browser following the link's href, and is then up to you to make that redirect in your javascript. e.g. by adding something to the end of your anim() function that updates the location.
It also means you don't need to remove the href from the link.
$('.menu-element a').click(function(){
var src = $(this).attr('href');
anim(src);
return false;
})
You can use event.preventDefault(). return false will also work, but it will also stop event bubbling (not a problem most of the time, you just should be aware of it).
$('.menu-element a').click(function(event){
anim($(this).attr('href'));
event.preventDefault();
})
I have a group of links on a page. when the user clicks a link it triggers an asynchronous request and a content area on the page is updated with the response html.
This works fine, except for if the user clicks the link with the 'middle-button' (or mouse wheel, whatever it's called!). Then a new tab opens and the response gets returned and rendered to that tab.
Is there any way for me to prevent this from happening?
catch the link with javascript and override the default link behaviour.
like this:
$('a.ajax').click(function(e){
e.preventDefault();
// do ajax stuff, and add an onfinish function that does
// something like document.location.href = this.attr('href');
});
You don't have to do the document.location.href, as I just noticed that a content area is updated. Just catch the default behaviour with the e.preventDefault();
// edit
The preventDefault won't stop the middle mouse button... Have you considered not using tags? I know it should be accessible so maybe a span containing the link, so you can add the onclick event on the span and hide the link with css?
Unfortunately no, Javascript wont have access to that sort of control for security reasons as it would be wide open for abuse.
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.