my problem is that i am using jquery UI tabs in my website. the content in the tabs is loaded dynamically or you ca say whenever i click the tabs another html page is displayed in the tabs display panel.
but the real problem arises whenever i wants to load a html page containing java code in the tags i am using syntax highlighter to style syntax.
while debugging in browser i usually gets error as
can't load XregExp twice in the same frame
thanks in advance.
Html Page where i'm using jquery tabs to load pages dynamically
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="indexLayout.css" />
<link rel="stylesheet" href="navMenu.css" />
<link rel="stylesheet" href="css/jquery-ui-1.10.3.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="highlighter/shCore.js"></script>
<script src="highlighter/shBrushJava.js"></script>
<link href="highlighter/shCore.css" rel="stylesheet" type="text/css" />
<link href="highlighter/shThemeDefault.css" rel="stylesheet"
type="text/css" />
<script>
$(function() {
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
$("#tabs").tabs({
load : function(event, ui) {
$("#tabs").find("a").live('click', function() {
$(ui.panel).load(this.href);
return false;
console.log(this.href);
});
},
select : function(event, ui) {
$("#tabs").find("a").die('click');
$("#tabs").find("a").live('click', function() {
$(ui.panel).load(this.href);
return false;
});
}
});
</script>
<style>
#tabs {
width: 100%;
font: 14px/1.5 Trebuchet MS, sans-serif;
}
.ui-tabs-vertical {
width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left;
width: 12em;
margin-top: 20px;
background: white;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px .2em 0;
border-radius: 0px;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-right: .1em;
border-right-width: 1px;
text-decoration: underline;
text-shadow: aqua;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: left;
width: 74%;
text-align: justify;
}
.ui-widget-content {
border: 0px;
}
.ui-helper-reset {
line-height: 1;
}
ul.tabs li.ui-state-active,ul.tabs li.ui-tabs-selected {
color: red;
}
ul.tabs li.ui-tabs-active a,ul.tabs li.ui-tabs-selected a {
color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="upper-menu"></div>
<header id="header-wrap">
<header> </header>
</header>
<nav>
<ul>
<li><a href="index.jsp"><span>home</span></a></li>
<li><a href="tutsPage.html"><span>about</span></a></li>
<li><a href="tutsPage.html"><span>contact</span></a></li>
<li><a href="tutsPage.html"><span>java</span></a></li>
<li><a href="tutsPage.html"><span>Database</span></a></li>
<li><a href="tutsPage.html"><span>C/C++</span></a></li>
<li><a href="tutsPage.html"><span>Blender</span></a></li>
</ul>
</nav>
<div id="content-container">
<section>
<div id="tabs">
<ul>
<li><h2 style="color: blue; text-align: center;">Topics
</h2></li>
<li><a href="#tabs-1">Introduction</a></li>
<li><a href="webpages/java/testPage1.html">Page 1</a></li>
<li><a href="webpages/java/testPage2.html">Page 2</a></li>
<li><a href="webpages/java/testPage3.html">multithreading</a></li>
<li><a href="webpages/java/testPage4.html">test for code</a></li>
</ul>
<div id="tabs-1">
<h2></h2>
<p></p>
</div>
</div>
</section>
<aside>
<div id="inside-aside-content-area">
<h1></h1>
<p></p>
</div>
<div id="inside-aside-content-area">
<h1></h1>
<p></p>
</div>
</aside>
</div>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
<footer id="footer-wrap">
<center>
© <i>copyright reserved</i> @<b> kailash adhikari</b>
</center>
<hr>
<footer> </footer>
</footer>
</div>
</body>
</html>
page i am using syntaxhighlighter having some Java code:
<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="highlighter/shCore.js"></script>
<script type="text/javascript" src="highlighter/shBrushJava.js"></script>
<link href="highlighter/shCore.css" rel="stylesheet" type="text/css" />
<link href="highlighter/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>
<body>
<pre class="brush: java">
function foo(){
}
</pre>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>
I can see you're using
.live()in the code, andsince version 1.7, it has been replaced with.On, and you are using 1.9.1...