jQuery and syntax highlighter not working on dynamically loaded tabs

StackOverflow https://stackoverflow.com/questions/20700278

Question

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>
                &copy <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>
Was it helpful?

Solution

I can see you're using .live() in the code, and since version 1.7, it has been replaced with .On, and you are using 1.9.1...

<script src="js/jquery-1.9.1.js"></script>

OTHER TIPS

Although I don't have any experience with SyntaxHighter, it seems this SO post may help you: SyntaxHighlighter - Call SyntaxHighlighter.all() to highlight dynamically generated XML

The solution is to use highlight() instead of all()

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top