It should be loading the index.html page with the uname param but for some reason it just keeps reloading this page over and over
I have tried every variation I can think of, to include looking at other working examples of my own and of other people. This is not working because it hates me.
function loginLink() {
var linkname = getURLParameter("uname");
window.location.replace("http://www.walkwithpals.com/index.html?uname=" + linkname);
}
This is the html
<button onclick="loginLink()">Already have an account and want to link to a friend?</button>
Here is the live site and the page in question WalkWithPals
You can prevent the page from refreshing by making your form return false in order to not reload the page.
<form onSubmit="foo();false;"></form> if the function foo() doesn't alreay return false.
EDIT: Alternatively this looks to be the answer.
By adding the attribute type="button" to your button element, this overrides the default submit behaviour.
The problem is that while you are returning false from your function, you aren't returning false within the event handler. You need to pass on the return value:
<button onclick="return loginLink()">...</button>
However, as Stephen notes in the comments, you really should move away from using inline event handlers. Since I see you've got jQuery included, if you make it easy to identify your button:
<button id="loginButton">...</button>
You can use jQuery to attach to it:
$('#loginButton').click(loginLink);
(such a script should go at the end of the body such that loginButton will exist at that point)
Related
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 web site I have to add "Back" button or Link URL which will redirects to me previously visited page.
Currently I have added below code, but it doesn't always work.
<i>Back</i>
I observed that it is not working in Google chrome.
<script>
function sample(){
window.location.href = window.history.back(1);
}
</script>
<input type="button" value="trying" onclick="sample()"/>
I have tested here it is working test ... :)
Event this work as same
<i>Back</i>
Try this :
<input action="action" type="button" value="Back" onclick="history.go(-1);" />
The following was an incorrect assumption by me
The value passed to onclick should be a function to call when the link is clicked. You are passing window.history.back() which is the value returned by the back function.
Try the following.
<i>Back</i>
Turns out I assumed, incorrectly, that the value of onClick should be a function to call on click. As Brian North and putvande pointed out in the comments it should be the javascript code to run when the event is triggered.
Suggestion
However one should generally avoid binding events in the way you are doing as it couples presentation, HTML, too tightly with the javascript. Instead one should bind the click listener from an external javascript file using for example addEventListener or jQuery.on.
jQuery example
HTML
Back
Javascript
$(function() {
$("#history-back").on("click", window.history.back);
});
Problem
I have a form with different stages. Image below in which I have multiple buttons(prev, next) and a submit button(to submit the form). I want to take the person directly to 5th stage (summary) with pre-populated data when they comes to this page.
I am using below mentioned javascript code but no success. I know the reason why no success and that is because in javascript I'm doing action on submit button whereas I want to do it on a normal button, which looks like this.
Can anybody guide my through the syntax of JavaScript in terms of how should I make an action only on the below mentioned button.
Button
<button type="button" class="next" onclick="loadnext(4,5);"><img src="images/next.jpg" alt="" /> </button>
JavaScript
<script type="text/javascript">
document.forms.login_form.submit();
</script>
Loadnext function
function loadnext(divout,divin){
console.log(divout + " -- " + divin);
ch=validateme_form(divout,divin);
if(!ch){return false}
//alert(ch);
jQuery("." + divout).hide();
jQuery("." + divin).fadeIn("fast");
}
document.forms.login_form.submit(); does not trigger the click event of your button, trigger it directly (sth. like jQuery("button.next").click()), but be sure to wait, that the dom is ready. (jQuery(function() { ... })
OK, you have a form and you collect values from showing and hiding some divs and you want to post the form at the end as I can see.
Place the loadnext function inside a in section.
Since the button is not submit leave it as it is, or if you like it to serve as submit also change the onclick to onclick="loadnext(4,5); return false;"
I do't know what validateme_form does, but I think it will work.
make sure all elements have the correct ids as needed.
Hope this helps.
This code works fine in FF, it takes the user back to the previous page, but not in Chrome:
Link
What's the fix?
You should use window.history and return a false so that the href is not navigated by the browser ( the default behavior ).
Link
Use the below one, it's way better than the history.go(-1).
Go TO Previous Page
Why not get rid of the inline javascript and do something like this instead?
Inline javascript is considered bad practice as it is outdated.
Notes
Why use addEventListener?
addEventListener is the way to register an event listener as specified
in W3C DOM. Its benefits are as follows:
It allows adding more than a single handler for an event. This is
particularly useful for DHTML libraries or Mozilla extensions that
need to work well even if other libraries/extensions are used. It
gives you finer-grained control of the phase when the listener gets
activated (capturing vs. bubbling) It works on any DOM element, not
just HTML elements.
<a id="back" href="www.mypage.com"> Link </a>
document.getElementById("back").addEventListener("click", window.history.back, false);
On jsfiddle
Try this:
Link
Try this dude,
<button onclick="goBack()">Go Back 2 Pages</button>
<script>
function goBack() {
window.history.go(-2);
}
</script>
It worked for me. No problems on using javascript:history.go(-1) on Google Chrome.
To use it, ensure that you should have history on that tab.
Add javascript:history.go(-1) on the enter URL space.
It shall work for a few seconds.
javascript:history.go(-1);
was used in the older browser.IE6. For other browser compatibility try
window.history.go(-1);
where -1 represent the number of pages you want to go back (-1,-2...etc) and
return false is required to prevent default event.
For example :
Link
Use Simply this line code, there is no need to put anything in href attribute:
Go TO Previous Page
Using a link with a URL to one page and having an on-click event that overrides it is not a good idea. What if the user opens the link in a new tab?
Consider:
<button id="back">Go back</button>
<script>
document.querySelector("#back").addEvenetListener("click", e => {
history.go(-1);
});
</script>
Or if you must use a link, at least:
Go back
Hey there is a link in my program as shown and onclick it calls the function clearform as shown:
Html Code:
<a class="button" href="Cancel" style="left: 55%;" onclick="clearForm()">Cancel</a>
JavaScript Code:
function clearForm(){
document.getElementById("subjectName").value = "";
return false;
}
return false is not working in this code. actually the first line of the function executed successfully but the return false was failed. I mean page is redirected to url "Cancel".
Change your code as
<a class="button" href="Cancel" onclick="return clearForm()">Cancel</a>
Your problem is you need to return the Boolean.
But, drop all that...
Attach your event unobtrusively...
element.onclick = clearForm;
Use preventDefault(). It is the modern way of acheiving that.
function clearForm(event) {
event.preventDefault();
}
<a class="button" href="Cancel" style="left: 55%;" onclick="clearForm();return false;">Cancel</a>
should work
Please note that if there is a bug or error in clearForm() then "return false" will NOT stop the anchor action and your browser will try to link to the href "Cancel". Here is the logic:
User clicks on anchor
onClick fires clearForm()
There is an error in clearForm() so Javascript crashes and stops all code execution.
return false is never fired because Javascript has already stopped.
If you are relying on a third party JavaScript API (I was using code supplied by Recyclebank to spawn a popup), and the third party API makes an update that breaks the JavaScript, then you'll have problems.
The following will stop the link under normal conditions and error conditions.
<a class="button" href="javascript:;" style="left: 55%;" onclick="clearForm();return false;">Cancel</a>
The return false; somehow needs to be right at the front.
(In ALL situations I've dealt with over the past months - may or may not be a bug).
Like this: onclick="return false; clearForm();"
Besides that, as mentioned by others as well, you need to return it from the onclick, not just from the function.
In your case: onclick="return clearForm()".
Keep in mind that some browser extensions may interfere with proper operation of links. For example, I ran into a situation where someone had both AdBlock Plus and Ghostery enabled. Clicking a simple 'a' tag with an 'onclick="return SomeFunction();"' attribute (the function returned false) caused the browser to treat the click as a page transition and went to a blank page and the loading indicator just kept spinning. Disabling those browser extensions cleared up the problem.
Including this as an answer because this was the first page I landed on from Google.