I'm working on a web application which is a traditional aspx (asp.net) web forms app but has had some angular 6 apps incorporated into it.
I've been tasked with fixing a bug that causes the browser to refresh when clicking on an anchor element with a href="#".
I'm not sure what's causing the whole page to reload.
Strangely when I open dev tools in Chrome, choose the network tab and select disable cache the page only refreshes the first time I click a link and any other subsequent clicks work fine. This might be to do with the fact that after the first time I click it the browser url now contains the # at the end of it.
I know this seems a bit random but I wondered whether anyone had any theories on what may cause the reload in the first place.
It's hard to tell what could be causing this without seeing any code. The most common solution I've used when I get this behavior is a prevent default. You can do something like
<a href="#" (click)="$event.preventDefault()">
Or if you already have a click event then pass in $event as a parameter to your function then preventDefault in the function you are calling. This would look like:
Html
<a href="#" (click)="someFunc($event)">
and in your ts:
someFunc(event) {
event.preventDefault();
// rest of your code here
}
This answer is related to the question and it's the first one that comes up in Google so I hope this is useful.
I have some external web components that use regular anchor tags with hrefs that point to routes in my angular app. Clicking the href causes a full page reload. This is because I'm not using routerLink - but, in my case, I can't.
So, my work around is:
#HostListener('window:click', ['$event'])
onClick(e: any) {
const path = e.composedPath() as Array<any>;
const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a');
if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
const href = firstAnchor.getAttribute('href');
this.router.navigateByUrl(href);
e.preventDefault();
}
}
Depending on your application, you might need to make some other checks e.g. is the target _blank, is it an external url etc.
change your a tag code as below
A Tag
this will invoke yourClickEvent(); without page reload
check the stackblitz here stackblitz
If you don't want to reload the page use $event.preventDefault()
<a href="#" (click)="$event.preventDefault()">
Try using debug tools to select the element, then click Event Listeners and then the Click event to see what is listening. Perhaps you can track it down that way.
You could also simply paste this into the console to trigger a break, and then click any of the offending elements:
['unload', 'beforeunload'].forEach(function (evName) {
window.addEventListener(evName, function () {
debugger; // Chance to check everything right before the redirect occurs
});
});
source: Break when window.location changes?
As you are using angular routes, try to use this notation:
<a [routerLink]="['./']" fragment="Test">
As explain by this comment: https://stackoverflow.com/a/38159597/4916355
use href="javascript:void(0);"
The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just a short and simple script that evaluates to undefined.
Use [routerLink] instead of using href = "", and use click event to call your calling method in the typescript file.
ex:
// downloading the file based on file name
<a [routerLink]="'file://' + 'path'" (click)="downloadFile(templateDocument.fileName)">{{downloadDocuments.fileName}}</a>
Since you have mentioned the web app is asp.net webforms, can you please let us know
Whether the link is asp.net hyperlink control. If so,
AutoEventWireUp could cause the link to be automatically submitted:
Please have a look at this link
If you do have asp.net server controls on the page, then you could disable by setting
#Page AutoEventWireup="false"
For the entire project, this can be disabled by setting in web.config:
In a mean-stack web application with html5mode, I have defined the following angular-ui-router
.state('addinHome', {
url: '/addin/home',
template: "home page"
})
Then, I have another page https://localhost:3000/test/ with a button button. Also in its controller, I have
... ...
$location.path("/addin/home")
... ...
Normally, both $location.path and the button lead to https://localhost:3000/addin/home.
Now, I add the following references in index.html:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
It disturbs the ui-router. As a consequence, both $location.path and the button lead to https://localhost:3000/test/#%2Faddin#%2Fhome, which is NOT what I want.
I have found the solution to fix the button: it is using button (opens the linked document in the same frame as it was clicked; see here).
However, I have not found the solution to fix $location.path("/addin/home"). Could anyone help?
Inject $window as dependency.
Try using $window.open(URL,"_self")
I google this case for many solutions but no one can solve my problem.
Here is my problem:
I need to go to a detail page from some views,so I create a new router.
.state('detail',{
url:"/detail/:msgId",
templateUrl:"templates/detail.html",
controller:"detailCtrl"
});
When I navigate to my detail page from home page, ionic don't display the back button on detail page and there is no animation,so I found this solution from How to force Ionic display back button on certain page?,and add nav-direction in home page :
home page:
<a ng-bind-html="item.text | linkformat" ui-sref="detail({msgId:'{{item.id}}'})" class="text" nav-transition="ios" nav-direction="forward"></a>
detai page controller:
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
so the back button display again,but when I click it and back to home page, the animation disappear again.I change the ion-nav-view like this,but it does not help.
<ion-nav-view animation="slide-left-right">
Currently I have setup a small test application and ran into some trouble lately. After some tries I still don't know where my mistake is.
Here is my pen: http://codepen.io/ins0/pen/wtELa
The problem is that after clicking the side navigation the content normally shows up, navigation updates. When I click on a link inside the content - the url state changes (eg. from #/settings to #/settings/about, xhr gets fired and received but the content doesn't get replaced.
I tried listening to all state events but no error is thrown.
I found the mistake by myself. In order to get the navigation correct you need to set a a viewtarget in your router configuration for childen pages that point to your parent view. Like this:
state('app.settings.about', {
url: "/about",
views: {
'content#app' :{
templateUrl: "about.html"
}
}
});
see'content#app'. this tells the framework to render the about view in the content field defined in route app. I updated the codepen to a working example.
I'm trying to create a navigation step by step from bootstrap nav. I would like that the user could only access the next tab by clicking the button at the bottom of each tab.
I've tried adding the class disabled and some JS but despite the change of style your content remains accessible. If any of you have done something similar or know another easier method (plug-in or other), please do not hesitate to respond.
My code example
Thanks in advance.
You can try one of the "wizard" plugins for this functionallity. I've tried the https://github.com/VinceG/twitter-bootstrap-wizard
You can set it up, in a way, that clicking on tabs will have no effect:
onTabClick: function (tab, navigation, index) {
return false;
}