Skip to content

Instantly share code, notes, and snippets.

@danielmt

danielmt/index.html

Created August 30, 2012 23:21
Show Gist options
  • Save danielmt/3544723 to your computer and use it in GitHub Desktop.
Save danielmt/3544723 to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap overrides pjax on navbar dropdown links
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bootstrap+pjax dropdown bug</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="link1.html" class="js-pjax">link1</a></li>
<li><a href="link2.html" class="js-pjax">link2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Bug
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="link1.html" class="js-pjax">link1</a></li>
<li><a href="link2.html" class="js-pjax">link2</a></li>
</ul>
</li>
</ul>
</div>
</div>
<ul>
<li><a href="link1.html" class="js-pjax">link1</a></li>
<li><a href="link2.html" class="js-pjax">link2</a></li>
<li>
<ul>
<li><a href="link1.html" class="js-pjax">link1</a></li>
<li><a href="link2.html" class="js-pjax">link2</a></li>
</ul>
</li>
</ul>
<div id="texto"></div>
<div id="main">
dropdown links on "Bug" wont work.
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
console.log('domready.');
$('#texto').val(Math.random());
console.log($('.js-pjax'));
$('a').pjax('#main').on('click', function(){
console.log('click.');
})
$('#site-main').on('pjax:error', function(e, xhr, err) {
console.log('Something went wrong: ' + err + xhr);
});
console.log('dom done.');
});
</script>
</body>
</html>
Raw
link1.html
<title>link1</title>
<div>link1</div>
<img src="http://placehold.it/50x50"/>
Raw
link2.html
<title>link2</title>
<div>link2</div>
<img src="http://placehold.it/100x100"/>
@indapublic
Copy link

Hello. I have same problem. You can fix it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment