I am having difficulties in disabling href links through jquery. I am using this method I modified. Can some please advise or help me in figuring this out?
Thank you.
jquery/js
<script>
$('.next-tab').click(function() {
$('.st_tab_active').attr('disabled','disabled');
var tab= $('.st_tab_active').parent().next().children('a');
tab.removeAttr('disabled');
tab.trigger('click');
return false;
});
</script>
html
<ul class="st_tabs">
<li>Horizontal Tab #1</li>
<li>Horizontal Tab #2</li>
<li>Horizontal Tab #3</li>
<li>Horizontal Tab #4</li>
<li>Horizontal Tab #5</li>
</ul>
You can use preventDefault(); to disable the default behaviour of links (which is, to navigate to the given href).
$("a").click(function(e){
e.preventDefault();
});
All the answers looks like probable solutions
Here is a discusiion on use of disabled property on anchor tags
Should the HTML Anchor Tag Honor the Disabled Attribute?
Better, dont use disabled attribute, its kind of illegal ;)
Now you have
event.preventDefault();
or
return false;
Here is a discussion on the use of both,
event.preventDefault() vs. return false
for your case it looks like return false is good as you dont want bubbling as well.
A solution to your exact problem cannot be said as you havent explained the sitation well,
Looks like you are trying to switch tabs with certain enable/disable tabs when some "next tab" is clicked.
If you can explain that also, we will be happy to help
There are two methods you could use, either prevent the default action or a simple return false.
$('a').click(function(event)
{
event.preventDefault();
// Rest of the code
return false;
});
as ahren previously stated that is the way to go, however in order to not disable every href on your site use:
$('a.st_tab').click(function(e){
e.preventDefault();
});
Using the 'a' tag, the simplest way I found using JavaScript was to:
Add a condition to href (to actually inactivate the link) using an arrow function returning 'false'; and
Add the same condition to 'style' (to remove the 'a' tag standard formatting);
Full code below:
<a href={(my_condition)? "my_url_here" : () => {return false}}
style={(my_condition)? {cursor: "pointer"} : {cursor: "auto", color: "#000"}}
>
Related
I searched the forum for this and I cannot find a solution to my problem. If I missed something please point me to the right thread.
I have three divs that replace each other onclick.
Here's my HTML:
<div id="a">AAAA <a id="showa" href="javascript:void(0)">Show A</a></div>
<div id="b">BBBB <a id="showb" href="javascript:void(0)">Show B</a></div>
<div id="c">CCC <a id="showc" href="javascript:void(0)">Show C</a></div>
And I am using this javascript to achieve this:
function ReplaceDivs(a,b,c){
$("#showa").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#b").show();
$("#a").hide();
$("#c").hide();
});
$("#showb").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#c").show();
$("#b").hide();
$("#a").hide();
});
$("#showc").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$("#a").show();
$("#b").hide();
$("#c").hide();
});
I am using preventDefault and I also tried entering by entering javascript:void(0) but my code is still not working.
It's working without a problem when I am testing it on fiddle.
You can see my example here
You can see the actual page here
What I am missing?
Also, I was wondering if there's a way to add animation so the divs show/hide nicer. This is the first time I am working on javascript so I don't really know where to start on this.
The code on your actual page is <a id="showa" href="">Show A</a>. A blank href equals a link to self. You need this:
This is the preferred way for links without an action.
I had the exact same problem. The solution in my case was fixing the path to jquery source.
Before
<script src="scripts/vendors.js"></script>
After
<script src="/scripts/vendors.js"></script>
Added a slash in the path before scripts/...
I got this problem when I created a new page-> typed in the source path-> picking up the source path.
But it worked fine without the front slash in other sample prebuild pages that i got as template. Yet to figure out the resaon for that.
Try using # for the value of your href.
I am trying to append data into a div tag using jquery when there is a click event on a html tag,html and javascript code is below and live example for same is at JSFiddle
HTML
<a class="datafile" href="#">abc</a>
<div id="result2">
</div>
Javascript
$(".datafile").click(function() {
$('#result2').append('Clicked!');
}
When a user clicks on abc I dont want the browser to go to link in href rather it should insert Clicked! in div tag.
What I am doing wrong ? Please help.
Something like this:
$(".datafile").click(function(e) {
$('#result2').append('Loading Log File ...');
// For all modern browsers, prevent default behavior of the click
e.preventDefault();
// Just to be sure, older IE's needs this
return false;
});
You have to prevent the default action of the hyperlink.
$('.datafile').click(function(e) {
e.preventDefault();
//Your code
});
Change the href value from '#' to 'javascript:void(0);'?
What's a better or correct way to write the following:
click here
If you're using jQuery, the proper way would be:
html
Link
jQ
$('a').click(function(e){ e.preventDefault(); $('p').show(); });
Just omit the href entirely:
<a onclick ="$('p').show()>click here</a>
Since you're using jQuery, use it at its full potential:
<a id="your-id">click here</a>
<script>
$('#your-id').click(function() {
$('p').show();
});
</script>
Use # and return false in the onclick handler.
return false prevents the URL from being followed. An anchor to # points to the current page, so that it makes sense to open/bookmark the link.
click here
The semantically correct thing to do here is to use a button tag instead of an a tag. It is bad practice to use javascript:void(0) in a link. Shoot, it's bad practice to include any inline JavaScript.
Let it point to an URL which will make the desired element to show up by a server side view technology such as PHP/JSP/ASP so that the link still works for clients who have JS disabled.
E.g. in JSP:
link
<p class="bar ${param.foo != 1 ? 'hide' : ''}">paragraph</p>
with
$(".foo").click(function() {
$(this).next(".bar").show();
return false;
});
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);
}
How do you I stop my links like this:
<a href="#" onClick="submitComment()">
From jumping to the top of the page after the click?
Many times you'll see people use the onclick attribute, and simply return false at the end of it. While this does work reliably, it's a bit ugly and may make your code-base difficult to manage.
<a href="#" onClick="submitComment(); return false;">
Seperate your HTML from your JavaScript
It's far better for you, and your project if you separate your markup from your scripting.
<a id="submit" href="enableScripts.html">Post Comment</a>
With the above HTML, we can find this element and wire up a handler for when the user clicks on the element. We can do all of this from an external .js file so that our HTML remains nice and clean, free from any scripting:
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", setup, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", setup);
} else {
document.onload = setup;
}
function setup () {
var submit, submitComment;
submit = document.getElementById("submit");
submitComment = function (e) {
e = e || window.event;
e.preventDefault();
alert("You clicked the link!");
};
if (submit.addEventListener) {
submit.addEventListener("click", submitComment, false);
} else if (submit.attachEvent) {
submit.attachEvent("onclick", submitComment);
} else {
submit["onclick"] = submitComment;
}
}
There's a lot going on in the above code, but let's run over it from 30,000 feet. We start by figuring out how to best setup our code when the browser loads the page up. Ideally we'd like to do this when the DOM is ready.
After a few conditional checks we manage to instruct the browser to run our function after the DOM is prepared (this way our anchor element exists for us to interact with its behavior).
Our setup function gets a reference to this anchor, creates a function that we'll run when the anchor is clicked, and then finds a way to attach that function call to the click event of the anchor - losing your mind yet? This is the madness JavaScript developers have had to deal with for some time now.
With jQuery, this is much easier
Perhaps you've heard of jQuery, and wondered why it is so popular. Let's solve the same problem, but this time with jQuery rather than raw vanilla JavaScript. Assuming the following markup:
<a id="submit" href="enableScripts.html">Post Comment</a>
The only JavaScript we need (thanks to jQuery) is this:
$(function(){
$("#submit").on("click", function(event){
event.preventDefault();
submitComment();
});
});
That's it - that is all it takes. jQuery handles all of the tests to determine, given your browser, what the best way is to do this or that. It takes all of the complicated stuff and moves it out of the way so that you are free to be creative.
Add a return false. I believe that without that the page will reload.
<a href="#" onClick="submitComment(); return false;">
Just return false onClick of Hyperlink
Its will not scroll page up ie it will be still where it is
Unless you need the anchor to actual go somewhere, you don't need to use an "href=" reference at all.
Try just using <a id="stay-put">Submit Comment</a>
Then your javascript would look like this:
$("#stay-put").click(function(){
submitComment();
});
Try using:
Javascript is sweet!
This will anchor the page in the place it is at. I had this same issue and this was a simple and good fix for me.
An other simple way is
Link
Then you could have a separate code with onClick event to the class "action-class" with whatever framework you like or plain JavaScript.
You could use this alternative syntax instead:
<a href="javascript:submitComment()">