jQuery tabs multiple refresh with # url

Question

I'm learning how to use jquery and had a noob question. From jquery-ui(http://jqueryui.com/tabs/#ajax):

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
  $( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
      ui.jqXHR.error(function() {
        ui.panel.html(
          "Couldn't load this tab. We'll try to fix this as soon as possible. " +
          "If this wouldn't be a demo." );
      });
    }
  });
});
</script>
</head>
<body>

<div id="tabs">
<ul>
  <li><a href="#tabs-1">Preloaded1</a></li>
  <li><a href="#tabs-2">Preloaded2</a></li>
</ul>
<div id="tabs-1">
  <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id='tabs-2'>
Look, it's working!
</div>
</div>
</body>
</html>

When I try to use this html file with #tabs-1 appended to the URL, it works fine. However, after changing the URL to #tabs-2, nothing happens. I have to refresh it again to make the second tab appear. Is there a way to make this happen by refreshing only once ?

Possible duplicate of stackoverflow.com/questions/680785/… — MaveRick
– MaveRick, Commented Aug 27, 2013 at 1:56
Nope, no console errors, doesn't work at all on Firefox,IE8 and need multiple refresh for Safari and chrome. — user2103008
– user2103008, Commented Aug 27, 2013 at 2:37

MaveRick · Accepted Answer · 2013-08-27 02:08:33Z

1

$(function() {
  $( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
      ui.jqXHR.error(function() {
        ui.panel.html(
          "Couldn't load this tab. We'll try to fix this as soon as possible. " +
          "If this wouldn't be a demo." );
      });
    }
  });
    $(window).on('hashchange', function() {
      $("div#tabs a[href="+window.location.hash+"]").click();  
    });
});

answered Aug 27, 2013 at 2:08

MaveRick

1,1896 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery tabs multiple refresh with # url

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related