Reputation: 13608
I have added some JQuery tabs, every time I click on one of them the ID of the link is appended to the url and it jumps to the url, which is really annoying. I have looked for a few fixes like set time out and stopping the postback but nothing seems to work, does anyone have any ideas?
<script type="text/javascript">
$(document).ready(function () {
$('.moo').click(function (evt) {
// stops from submitting the form
evt.preventDefault();
return false;
});
$("#tabs").tabs();
setTimeout(function () {
if (location.hash) {
window.scrollTo(0, 0);
}
}, 1);
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1" class="moo" onclick="return false;" >Nunc tincidunt</a></li>
<li><a href="#tabs-2" class="moo" onclick="return false;" >Proin dolor</a></li>
</ul>
<div id="tabs-1">
<uc1:PrizeDrawMiniListControl ID="PrizeDrawMiniListControl1" runat="server" />
</div>
<div id="tabs-2">
<uc2:MostViewedControl ID="MostViewedControl1" runat="server" />
</div>
</div>
EDIT:
The link is not posting back, it's just scrolling
Upvotes: 2
Views: 10886
Reputation: 31
This will prevent any anchor jumping from jquery tabs :) (moves scroll position back to original click).
$('div.ui-tabs ul li a').click(function(e) {
e.preventDefault();
scroll_position = $(window).scrollTop();
$('html, body').animate({
scrollTop: scroll_position
}, 0);
});
Upvotes: 0
Reputation: 2889
http://jsfiddle.net/3au7K/ its working fine now.
Change your javascript function to this
$(document).ready(function () {
$('.moo').click(function (evt) {
// stops from submitting the form
evt.preventDefault();
return false;
});
$("#tabs").tabs();
// This will work for dynamically added tabs as well
$("#tabs ul li").delegate('a', 'click', function(e){
e.preventDefault();
return false;
});
});
This little hack will do the trick. There is no harm in it because JQuery tabs don't need href attribute after getting initialized.
Upvotes: 6
Reputation: 87083
Remove onclick=return false;
from anchor tag and try like this:
$('a[href^="tabs-"]').on('click', function(e) {
e.preventDefault();
});
Upvotes: 1