Browser back button not working - javascript

I have this menubar-
When i load this page, by default page is redirect to dashboard, Dashboard has no content now.
Everything goes fine, until i click on back button of browser, This page is redirected to login page.
How can i keep history so everytime when i click back button of browser it should redirect to Dashboard Page? and then stop propagating for more clicks.
Take a look at HTML-
<li class="active"><a href="/Home/Dashboard" rel="tooltip" data-original-title="What is new?"
data-placement="bottom"><i class="icon-home icon-white"></i> Dashboard</a></li>
<li><a href="#" id="_Layout_Contact" rel="tooltip" data-original-title="Manage Contacts"
data-placement="bottom"><i class="icon-white icon-user"></i> Contact</a></li>
<li><a href="#" id="_Layout_Task" rel="tooltip" data-original-title="Task House"
data-placement="bottom"><i class="icon-white icon-tasks"></i> Task</i></a></li>
<li><a href="#" id="_Layout_Appointment" rel="tooltip" data-original-title="Handle Appointments"
data-placement="bottom"><i class="icon-white icon-calendar"></i> Appointment</a></li>
<li><a href="#" id="_Layout_Project" rel="tooltip" data-original-title="Explore Projects"
data-placement="bottom"><i class="icon-white icon-briefcase"></i> Project</a></li>
<li><a href="#" id="_Layout_Sales" rel="tooltip" data-original-title="Check Sales"
data-placement="bottom"><i class="icon-white icon-barcode"></i> Sales</a></li>
<li><a href="#" title="" onclick="showDialog('/Opportunity/_Create' , 'Add Opportunity')"
id="_Layout_AddOpportunityLink">Add Opportunity</a> </li>
I tried-
I read javascript helps us keeping history, so i tried it with hyper-reference as-
Ex. with contact page-
<li><a href="javascript:history.go(-1)" id="_Layout_Contact" rel="tooltip" data-original-title="Manage Contacts"
data-placement="bottom"><i class="icon-white icon-user"></i> Contact</a></li>
But it kept loading the page, nothing happened. Help?
I am using MVC4 razor view engine.

For newer browsers, you can use the HTML5 History API.
history.pushState(null, null, $(window).attr("href"));
$(window).on("popstate", function (e) {
e.preventDefault();
alert("dashboard");
//load dashboard
});
If you need to support older browsers, you can use history.js.

Related

Why doesn't my bootswatch dropdown show when I click it?

I'm using Bootswatch to make a navbar for my React project. I'm attempting to add a dropdown menu, but I can't get it to work when I click it. Here's the code I'm using:
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div className="dropdown-menu">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#">Separated link</a>
</div>
</li>
This code is taken directly from the Bootswatch website. However, I've also tried changing the <a> tags to <Link> tags (and thus changing the href property to to). It shows the dropdown in the navbar, but clicking on it does nothing.

I want to change href of anhor tag on all subpages except homepage or main page of website using Javascript or any other method

Hello guys this must be very simple but I am not able to figure it out.
I want href in some nav links that are in dropdown to change when the user navigates to any subpages of website and remain same when the user is on the homepage for example
when a user is on homepage (www.example.com) href should be
href="#div_id1"
and when the user goes to subpage e.g.=www.example.com/contactpage then
href="www.example.com#div_id1"
I am using dynamic header so can't use different navbar code on other page
below is my code
<li id="dropdownheading" class="nav-item my-auto dropdown">
<a class="nav-link dropdown-toggle " href="#" id="navbarDropdown"
role="button" ata-bs-toggle="dropdown" aria-expanded="false">
Dropdown heading
</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#div-id1">div 1</a></li>
<li><a class="dropdown-item" href="#div-id2">div 2</a></li>
<li><a class="dropdown-item" href="#div-id2">div 3</a></li>
</ul>
</li>

Is there anyway to inject variable elements via chrome?

Im building a chrome extension which injects CSS and JS to a particular website. I just wanted to know if there is any way to manipulate a variable element. As an example if I wanted to duplicate the user's username and place it somewhere else on the site. This is an example of such to the current DOM I have access to:
<span class="nav-user">
<li class="dropdown nav-item">
<img alt="Avatar" class="nav-user-avatar" src="usersimage.png">
<a aria-haspopup="true" href="#" class="dropdown-toggle nav-link" aria-expanded="false"> <span class="nav-username">Rbxntl</span>
</a>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<span>Logout</span>
</a>
</div>
</li>
</span>
To reiterate basically just to move this element somewhere else on the page that will allow it to work on all users when they have the extension installed, or possibly to duplicate and place the duplicate somewhere else. I have tried researching the problem but I cant seem to find the solution.

jQuery Pop- out browser is not calling on href link

functionality:
User clicks on the link in page A, it will prompt a pop-up. The pop-up is displaying separate web-browser thread which is an overlay over the page A which will turn opaque.
What has been done:
This is the code that has been done to enable to pop-up web browser:
$('link1').click(function() {
$('#subscribe-pop1’).toggle();
});
<div id="footleft">
<ul>
<li><a href="#" id='link1'>India, Mumbai</a>
</li>
<li><a href="#" id='link2'>India, New Delhi</a>
</li>
<li><a href="#" id='link3'>India, Chennai and Banglalore</a>
</li>
<li><a href="#" id='link4'>United Arab Emirates, Dubai</a>
</li>
</ul>
</div>
<div id="subscribe-pop1" style="display:none">
<iframe src="http://www.w3schools.com/js/">
</iframe>
</div>
Issue:
When I try to click on the link, it will only work for some of the url links. It will work if the url link is "http://www.w3schools.com/js/" but it may not work for "http://www.youtube.com".
It will only display a white screen for url that is not called.
I would like to know why is that so that the following href is only able to call on some url but not the rest and how am I able to rectify this issue?? thanks

IOS 9 is blocking modal mobile links

My website uses modal to display information that requires buttons to be clicked e.g. back and submit. Now the link appears to be broken even though it's target is another page. The page reloads on any button click.
This has been working thus far but some users have been having issues with submitting the information. When myself and my colleagues then tested what was causing the issue we found out that the problem was only affecting devices running iOS9.
We looked up some information and found it might be something to do with having an empty href.
<ul>
<li><a class="pop" href="#" target="#modal" data-id="deposit-funds.aspx">Deposit Funds</a> <span class="moreinfo" title="How to deposit funds into your investor account"></span></li>
<!--<li><a class="pop" href="#" target="#modal" data-id="dynamic-invest.aspx">Dynamic Invest</a> <span class="moreinfo" title="Dynamic investing explained"></span></li>-->
<!--<li><a class="pop" href="#" target="#modal" data-id="auto-invest.aspx">Auto Invest</a> <span class="moreinfo" title="Autoinvest guidelines, setting criteria and turning on and off"></span></li>-->
<li><a class="pop" href="#" target="#modal" data-id="current-investments.aspx">Current Loans</a></li>
<li><a class="pop" href="#" target="#modal" data-id="my-resale.aspx">My Resale Offerings</a></li>
<li><a class="pop" href="#" target="#modal" data-id="completed-investments.aspx">Completed Loans</a></li>
<li><a class="pop" href="#" target="#modal" data-id="bids-outstanding.aspx">Bids Outstanding</a></li>
<li><a class="pop" href="#" target="#modal" data-id="my-transactions.aspx">Transaction History</a></li>
</ul>
</div>
If anybody has had the same problem or has any ideas on a potential fix a point in the right direction would be most appreciated.
I had this problem a while back and if I remember correctly I update the href to href="javascript:;". This tricks the browser in to running some empty javascript instead of doing nothing at all (which is why iOS blocks it, I believe). Your other javascript will also run on click as well.
I also believe I ventured down the path of changing the <a> tags to <span> tags; as far as I remember, this also worked, but wasn't a great fix for my problem.

Categories

Resources