I just get {"error": "Please use POST request"} when I run this
$("#ricomporreclick").click(function () {
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
});
What's wrong with the code? I'm tring to change the selector without page being reloaded.. when the click is triggered #film should be display:none and #ricomporre should be visible.
http://jsfiddle.net/8Ndba/
just put return false at end of the code block.
Updated Your Fiddle
Try to use event.preventDefault() to prevent the default functionality of the anchor tag,
$("#ricomporreclick").click(function (e) {
e.preventDefault()
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
});
DEMO
Change your anchor so the URL doesn't do anything:
HERE
DEMO
You need to stop the link from redirecting by using the preventDefault method. I've edited the fiddle to show this
$("#ricomporreclick").click(function (e) {
$("#film").css('visibility', 'hidden');
$("#ricomporre").css('visibility', 'visible');
e.preventDefault();
});
What was happening previously was that it was correctly changing the visibility, but then the link was reloading the page causing the css to be reset to the stylesheet.
Related
I have a css image that has a close button attached to it. I'd like to click the close button, and have the entire span fade out with jquery. This is basically my html:
<span class="topic_new_button">
</span>
And I tried:
$(".closebutton").on("click", function(event) {
var $row = $(this);
$row.animate({ opacity: 0.05}, function() {
$row.find(".imglink").fadeIn();
});
});
But that doesn't work, can someone point out the error of my ways?
To fadeout the entire span, call fadeOut() on the clicked element's parent
$(".closebutton").on("click", function (event) {
$(this).parent().fadeOut();
event.preventDefault();
});
first thing you used fadeIn which used for showing instead use fadeOut or hide
if you are not using anymore <span class="topic_new_button"> then below will workout
$(".closebutton").on("click", function (event) {
$("#topic_new_button").fadeOut();
});
OR
$(".closebutton").on("click", function (event) {
$("#topic_new_button").hide();
});
If this and the above example do not work, your jQuery may be out of date.
$(document).ready(function() {
$('.closebutton').click(function() {
$('span').fadeOut();
});
});
Also, there is a mistake in your HTML code (extra quote mark), and when you have link with no reference, it returns an error, use something else as a button.
Here is a JSFiddle example using a <button> tag instead.
Am trying to disable a hyperlink present inside a div tag using Jquery, i used the below codes, which are not helpful.
JQuery - 1.7v
html Code -
<div id="content">TESTING PURPOSE <(a)> href="/test/">Click Here <(a)> End </div>
jQuery - JS
$('#content').find("*").prop("disabled", true);
$('#content').prop("disabled", true);
You can do this :
$('#content a').click(function(){ return false });
Returning false from the click event handler prevents the default behavior (following the link).
If you may have more than one link but you want to disable only this one, you may be more specific in your selector :
$('#content a[href="/test/"]').click(function(){ return false });
Use preventDefault to disable the default behavior of a link.
Here is a little Code snippet:
$('#content a').click(function(e) {
// stop/prevent default behavior
e.preventDefault();
// do other stuff...
// e.g. alert('Link is deactivated');
});
Here is a little jsFiddle example
Difference between e.preventDefault and return false
Source: Stackoverflow - jquery link tag enable disable
$('#content a').click(function(e) {
e.preventDefault();
});
$('.modal-body a').css({"pointer-events":"none"});
You can also do this, just give div name of that anchor tag with remove function.
$('.div_name a').remove();
I am trying to stop an anchor tag from scrolling after it is clicked, it is not posting back but scrolling to the location:
$('.moo').click(function (evt) {
// stops from submitting the form
return false;
});
<a href="#tabs-1" class="moo" >Nunc tincidunt</a>
Does anyone have any ideas?
Try using javascript:void(0) as the href:
<a href="javascript:void(0)" class="moo" >Nunc tincidunt</a>
JsFiddle
You can try to use the function e.preventDefault():
$('.moo').click(function (e) {
e.preventDefault();
});
But as far as I can see there is nothing wrong, I created a JsFiddle for it:
http://jsfiddle.net/egQms/
Try calling evt.preventDefault(). This will stop the browser from performing the default action for the event.
I would like a function to run when a specific anchor with the `value="frb" is clicked.
This is the anchor
Accept
this is what i tried:
$('body').on('click', value[frb], function(e) {
e.preventDefault();
});
this doesnt work, i cant find any examples that use this, is it possible?
value is not valid attribute to anchor tag. Instead of that you can use data-value like following:
HTML
Accept
jQuery
$('body').on('click', 'a[data-value=frb]', function(e) {
e.preventDefault(); // prevent page reload
alert( this.href );
});
Working sample
Note:
Already #Musa mentioned about data attribute, but in his jQuery snippet used a[value=frb] which will not work.
The second parameter of .on() should be a selector string
$('body').on('click', 'a[value=frb]', function(e) {
e.preventDefault();
});
also a tag doesn't have a value attribute, you should use a data attribute instead
Accept
try this:
$(function(){
$('a[value=frb]').click(function(e) {
e.preventDefault();
});
});
It assigns the function to all anchors with the specified 'value' attribute.
working demo http://jsfiddle.net/KQy36/
OR http://jsfiddle.net/WP7JS/
API: http://api.jquery.com/on/
Oh by the way: http://www.w3schools.com/tags/tag_a.asp (To see valid a tag attribute)
Anyhoo, Hope this helps,
code
$('a[value="frb"]').on('click', function(e) {
alert('yeah wha?');
e.preventDefault();
});
OR apart of another post below mine. :)
$('a').on('click', function(e) {
if ($(this).attr("value") === "frb") {
alert('yeah wha? I am frb');
e.preventDefault();
} else {
alert('not frb');
e.preventDefault();
}
});
Since there is no value attribute for the link tag we need to make a change to the html:
<span class="frb">Accept</span>
Then add this to register the click event.
$(document).ready(function(){
$('span.frb').click(function(e) {
e.preventDefault();
});
});
Im trying to build a tabbed content box, and im wondering if its possible that i can disable 1 link with a specific class, such as 'disabled'
I read somewhere about a function called preventDefault, would this work?
http://jsfiddle.net/Ssr5W/
You can disable click event by returning false. like,
$('#tabmenu a').click(function() {
return !$(this).hasClass('disabled');
});
Also, I've updated your fiddle: http://jsfiddle.net/Ssr5W/1/
EDITED
and of course, preventDefault would work :)
$('#tabmenu a').click(function(e) {
if($(this).hasClass('disabled'))
e.preventDefault();
});
fiddle: http://jsfiddle.net/Ssr5W/2/
$('.disabled').click(function(e) {
e.preventDefault() ;
}) ;
You can just check for the class on the element that was clicked on:
$('tabElement').click(function(){
if(this.hasClass('disabled'))
return;
//Your code here..
);
This won't interfere with other clikc-handlers you may have on your tab element