I have an div and inside that div I have a link as
<a href="#" onclick="Edit_popup();" >edit</a>
When I click on this link the whole page is getting refreshed. But I need only this div to be refreshed not whole page. I am calling this as :
function Edit_popup(){
var criteria=prompt("Please enter id");
if (id=="Login" || id=="login")
{
$("#criteria").load("page2.html");
}
Try with
<a href="#" onclick="Edit_popup(); return false;" >edit</a>
The reason the whole page is getting refreshed is because you have clicked on a link and the link's default behavior is to send you to it's href. (If you look at your browser's address line, you'll notice the URL ends in /#.)
The correct way to prevent this is to pass the event to the function
onclick="Edit_popup(e);"
and then stop the event's (in this case, the click's) default behavior:
function Edit_popup (e) {
var criteria=prompt("Please enter id");
e.preventDefault(); // this line cancels the link
if (id=="Login" || id=="login") {
$("#criteria").load("page2.html");
}
}
You can try using e.preventDefault(); inside your function so that you can do whatever you want then use e.preventDefault(); that 'll prevent the browser from performing the default action for that link.
kindly check this link to understand the difference between return false; and e.preventDefault(); return-false-and-prevent-default
Related
On using Google I found that they are using onclick events in anchor tags.
In more option in google header part, it looks like normal a tag, but onclicking it doesn't get redirected but opened a menu. Normally when using
<a href='more.php' onclick='show_more_menu()'>More >>></a>
It usually goes to 'more.php' without firing show_more_menu(), but I have show a menu in that page itself. How to do like google?
If your onclick function returns false the default browser behaviour is cancelled. As such:
<a href='http://www.google.com' onclick='return check()'>check</a>
<script type='text/javascript'>
function check()
{
return false;
}
</script>
Either way, whether google does it or not isn't of much importance. It's cleaner to bind your onclick functions within javascript - this way you separate your HTML from other code.
You can even try below option:
More >>>
From what I understand you do not want to redirect when the link is clicked.
You can do:
<a href='javascript:;' onclick='show_more_menu();'>More ></a>
Use following code to show menu instead go to href addres
function show_more_menu(e) {
if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}
More >>>
One more solution that prevents default action even if the javascript function returns any value.
<a href="www.any-website.com" onclick='functionToRun();return false;'>
1) Link to work
<a href="#" onClick={this.setActiveTab}>
...View Full List
</a>
setActiveTab = (e) => {
e.preventDefault();
console.log(e.target);
}
I have an alert where if the answer is OK then it should redirect the user to a different page and if they click cancel they should stay on the page. But no matter what button they press it will redirect them to the new page. What is going on?
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
window.location.replace = "send_PhysiologicalMeasures.html";
}
}
</script>
Your HTML button is wrapped in an a tag, which is effectively a link. a elements will always take you to their link specified in href, so just remove that a element: change your HTML to:
<button class="button PhysiologicalMeasures" onclick ="validation()">Record Physiological Measures</button>
Another method would be to change the link's onclick to return the status:
Link
and the JS:
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
return true;
}
return false;
}
</script>
By returning false, you will prevent the execution of the link, and returning true will allow the link to work.
You can see it here: https://jsfiddle.net/am0adszu/
I am having a problem. Below is my code:
$(function() {
$('#find').on("click",function(){
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});
});
When this anchor tag whose id is find is clicked the alert "Clicked" appears then the whole page is reloaded. I am getting name, location and city values from p tags separately.
Also when I keep only one assignment and discard other two then page reloading stops and only alert occurs. This is the beginning as I have to send this collected data to via AJAX to controller function but first I want to stop reloading the page. What am I doing wrong?
P.S: I'm very new to jQuery and only know few of its basics. Please help.
You need to stop the default behaviour of the link (ie. changing the URL) by using event.preventDefault, try this:
$('#find').on("click", function(e){
e.preventDefault();
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});
Rename your location variable to location1.
i think it refer to browser location.
To stop the page reload and navigation behavior of anchor tag, you can use javascript:void(0) or event.preventDefault()
Click
Or
$(function() {
$('#find').on("click",function(e){
e.preventDefault()
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});
});
Now your page will not reload on click on this anchor tag.
try this. simple and easy
Modify the href attribute as given below
<a href="javascript:void(0)" onclick="whateverFunction()" >
I have the following code block and javascript that work as intended.
<li>
<a id="menuPrev">
<div class="sprite-blank"></div>
</a>
</li>
$('#menuPrev')
.click(function () {
...
return false;
})
.doubleClick(function() {
return false;
});
When a user double clicks on the address link a blue line appears below the <a> element a the bottom of the <li> element. This only happens with the Chrome browser and on a double click. From what I can see it's the default color behaviour in Chrome when I double click on something. It looks confusing and if possible I would like to stop this happening.
So far I have found that if I change the code and add href="#" to the link then this
does not happen. However when I do this the link address appears at the bottom of
the page and I don't want this.
Does anyone have any idea how I can solve this and make the browser ignore my
double clicking?
Try href="javascript:void(0);" to prevent browser from displaying the link in the status bar.
Also try event.preventDefault(); to "as the name suggests"
It sounds like you've already solved it, you just need to prevent the browser from displaying the link in the status bar. The first thing you have is a link with no href. Chrome flat out just doesn't like this because it considers the link to be malformed. So you should place your href="#" back in place and add this to your jQuery:
$('#menuPrev')
.click(function () {
...
return false;
})
.doubleClick(function() {
return false;
})
.mouseover(function() {
window.status = '';
});
How can I hide URL from displaying when mouse hovers on a hyperlink?
Hyperlink
How can I hide URL from displaying in browser's bottom status bar when mouse hovers?
Don't put the URL in the href (or keep it href="#") and attach a JavaScript function to the onclick event which puts the actual link in the a element. This way you won't see the actual URL when hovering over the link but the link will be inserted when the user actually clicks.
This way you can easily hide url when mouse hover on hyperlink.
Simply add one id on anchor link.
HTML
<a href="url" id='no-link'>Hyperlink</a>
Jquery code
$(document).ready(function () {
setTimeout(function () {
$('a[href]#no-link').each(function () {
var href = this.href;
$(this).removeAttr('href').css('cursor', 'pointer').click(function () {
if (href.toLowerCase().indexOf("#") >= 0) {
} else {
window.open(href, '_blank');
}
});
});
}, 500);
});
Here is demo link https://jsfiddle.net/vipul09so/Lcryjga5/
you technically have window.status to make custom status bar messages. you can set it during an "onmouseover" event for that element and set the window.status to a blank string.. thats how we did it a long time ago however..
browsers these days prevent the modification of the status bar by default (as far as i know, firefox prevents it). so there is no guarantees as to this approach will do anything at all.
<button class="class" onclick="window.location.href='https://stackoverflow.com'">Visit StackOverflow</button>
OR
<button class="class" onclick="window.location.replace('https://stackoverflow.com')">Visit StackOverflow</button>
Just use onclick="location.href='#'"
just remove href attribute from a element. :)