We Keep Coding

Force check dirtyforms.js

I'm trying to check for dirty form when swithing between tabs - and if the form is dirty, show the alert.
I'm using this plugin: https://github.com/snikch/jquery.dirtyforms
Ii works fine when trying to go to an external page (here i will get the warning), but when i switch between tabs(bootstrap), nothing happens. I have made a speciale class(".chkChange") to listen to if the form is dirty, but nothing happens when I click on a tab. The tabs looks like this:
<li class="setup-conditions"><a data-toggle="tab" class="chkChange" href="#setup-conditions">Procedure</a></li>
And i'm able to check if the form is dirt or not with this snippet, but i need help to trigger the alert build in dirtyforms:
$('#myTab li a').click(function () {
if ($('form').dirtyForms('isDirty')) {
//alert("Form is dirty");
}
});
And like i said, if I put the same class on another (external) link, it will prompt if anything has been changed - bot not on the tabs.

In this case, you can customize the event binding to attach the click handler to your link.
$(document).bind('bind.dirtyforms', function (ev, events) {
var originalBind = events.bind;
events.bind = function (e) {
$('#myTab li a').on('click', events.onAnchorClick);
originalBind(e);
};
});
Dirty Forms will then correctly
Check whether the form is dirty
If dirty, prevent the click event
Show the dialog
If the user decides to proceed, will refire the click event
Dirty Forms ignores your anchor tag by automatically because it has no HREF tag. This was a feature that was contributed by the community, that I am now reconsidering because apparently there is an argument to monitor anchor tags that don't have HREF sometimes.
Update
The default behavior has changed in 2.0.0-beta00005 to include links with no HREF tag by default. That should fix this so you don't need to attach the event. However, depending on what libraries you are using, you may need to add an ignoreSelector to Dirty Forms to stop watching them.
$('form').dirtyForms({ ignoreSelector: 'a.some-class:not([href])' });

Why does jQuery make my page jump back to the top after click?

I have a general question about jQuery.
I have created few jQuery buttons but the problem that I have is when you scroll half way down the page and you press the button, the page jumps back to top, instead of staying in the middle where the button is??
How can you stop this from happening, as it's frustrating for the user??
Is there any particular reason why it's happening?
jsFiddle Example:
$(".comment-here").click(function() {
$(".comment-form").slideToggle('slow');
});
$(".main-btn.orange").click(function(){
$(".comment-form").slideUp('slow');
});

You're not preventing the default event. Since you're clicking on an anchor tag, the default event for # is just to jump up to the top of the document.
To prevent this from occurring:
Pass the event into the function, and use preventDefault();
$(".comment-here").click(function(e){
e.preventDefault();
$(".comment-form").slideToggle('slow');
})
$(".main-btn.orange").click(function(e){
e.preventDefault();
$(".comment-form").slideUp('slow');
})
You could also use return false; instead, which goes a bit further than just preventing the default event, it will stop events bubbling up to parent elements.

Add return false; to the click handler of the <a class="comment-here">.
Essentially it is not jQuery, but the default browser behaviour that causes this: you clicked a link, it has to navigate to its href, which is... "#", i.e. this page. So there we go back to this page (the top).

Prevent default behaviour of anchor tags:
$(".comment-here").click(function(e){
e.preventDefault();
//....
});

The problem is with your <a> tag using href="#" which references the current page and pulls you to the top.
I'd recommend the following approaches, instead of the default event prevention mentioned in other answers. Of course those work, but why use an element only to remove it's default functions?
Ergo, use something that is intended for your purpose:
1.) Use a <button> instead of <a>:
http://jsfiddle.net/RvHjx/7/
2.) If you're dead set on using <a>, remove the href attribute in your <a> tag. This will remove the blue-underlined link styling (the link still functions correctly though), but it's easy to fix with some CSS:
http://jsfiddle.net/RvHjx/11/

Adding javascript:; to your a tags href is the simplest way.
my link

Remove onclick effect after clicking on another img/button

I am making a small image area in my clients site, WHere I have some buttons under a big image. The big image changes onclick of bottom buttons. Now what I need is to make an effect of the selected button. It means Active effect. I can do this with a onclick function but it stays intact even if I click on other buttons.
So, Basically What I need is if you can tell me a way so that I can remove the onclick effect from image/button 1 when another image/button is clicked.
You can see the page here :
http://goo.gl/S1oVS

Use $('.class-selector').off('click'); to unbind click event on all elements with class 'class-selector' (or whatever selector you might have).
You can also do it in implementation of your click event as following:
$('.button').on('click', function() {
// Do something here...
// Disable on click for this particular button, instead of all buttons.
$(this).off('click');
});

How to call a href by onclick event of a button?

I have the following a href I use to open jquery dialogs, which works fine. Basically, the openDialog class has attached the jquery dialog code:
<a class='openDialog' data-dialog-id='myEditDlg' data-dialog-autosize='false' data-dialog-alt='580' data-dialog-larg='740' data-dialog-title='test dialog' href='/mycontroller/EditDlg/myid'></a>
Now, I'd like to call it by the onclick event of a button.
Basically, I'd like to have the same behaviour of the clicked <a class='openDialog' href when I click a button. How can I do it?**

If I get you question right then may be jQuery trigger()(?) is what you are looking for.
Example:
<button id="bt">Click</button>
Triggerable link
<script type="text/javascript">
$('#bt').click(function() {
$('#ex').click();
});
</script>

You can emulate the click by
$('#link').click();//No arguments inside the call.
This will emulate the click event on the link. It is the same as clicking on the link. This ofcourse won't change the location if you have an event handler that stops the default behavior of the link
If you want to redirect to the href attribute you can use:
location.href=$('#link').attr('href');
So if you want to call this on click of a button.
$('#button').click(function(){$('#link').click();
location.href=$('#link').attr('href');//In case the page doesn't change although you want it to
}

jQuery HTML Anchor Tag Progressive Enhancement

I have jQuery that I have written that is supposed to find a particular <a> tag and change its behavior. Before jQuery loads, the <a> tag has an href attribute that points to another page. I am using jQuery to change the behavior of the <a> tag so that rather than directing the browser to load that other page, it instead runs javascript when clicked that loads content dynamically in a <div> that is positioned at the location of the mouse pointer.
So, for example, I have the following:
<a class="funk" href="http://example.com/page2.html">Link</a>
<div class="hidden bubble">Load this instead.</div>
The jQuery I have running does the following:
$(document).ready(function(){
$('.bubble').hide()
$('.bubble').removeClass('hidden');
$('.funk').attr('href', '#');
$('.funk').click(function(e){
$('.bubble').show();
})
})
The problem I have is: Whenever the user clicks the link, the browser acts on the href="#" attribute and brings scrolls the browser to the top of the page. What is the most "correct" way to make my site so that the browser does not scroll at all, but instead merely executes the jQuery code that I have written for the click event?

Let the 'click' function return false. That cancels the event, and the browser doesn't follow the link. In this case, you can even let the href attribute at its original value.
$('.funk').click(function(e){
$('.bubble').show();
return false;
//--^
})
To be on the save side, you can explicitly cancel the event:
e.preventDefault(); // no default action
e.stopPropagation(); // event doesn't bubble up or down in the DOM

Add this to your click function:
$('.funk').click(function(e){
e.preventDefault();
e.stopPropagation();
$('.bubble').show();
});
This will do what is implied by the method names.

Call e.preventDefault() in the click handler.
http://api.jquery.com/event.preventDefault/