Question

I have an issue regarding my tabs. Before I included <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>, the tabs are showing, but now the 3 tables are appearing w/o their corresponding tabs.

Please do check my code below

Inside my head tag:

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/userpage.css">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" media="all" /> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>  
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>  


<script>
$(function() {
    $( "#tabs" ).tabs();
});
</script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>

<script type="text/javascript">
        function codeBinsAddEvent(obj,type,fn){
            if(obj.attachEvent){
                    if(type == "load"){
                        obj.attachEvent('on'+type, fn);
                    }
                    else{
                        obj.attachEvent('onreadystatechange', fn);
                    }
                    /*
                obj['e'+type+fn]=fn;
                obj[type+fn]=function(){
                    obj['e'+type+fn](window.event)}
                ;obj.attachEvent('on'+type,obj[type+fn])*/
             }
            else obj.addEventListener(type,fn,false)
        };
        function codeBinsAddLoadEvent(fn){
            codeBinsAddEvent(document.addEventListener&&!window.addEventListener?document:window,'load',fn)
        };
        function codeBinsAddReadyEvent(fn){
            codeBinsAddEvent(document,'DOMContentLoaded',fn)
        };   

     </script>   

And in my body tag:

<div id="tabs">
    <ul>
    <li><a href="#tabs-1">Students</a></li>
    <li><a href="#tabs-2">Subjects/a></li>
</ul>
<div id="tabs-1">   
<table id="mytable" cellspacing="0" summary="Students">
<tr>
<th scope="col" class="nobg"></th>
<th scope="col" abbr="Name">Name</th>
<th scope="col" abbr="Address">Address</th>
<th scope="col" abbr="Level">Level</th>
<th scope="col" abbr="School">School</th>
</tr>
<?php
// Start looping table row
while ($row = mysql_fetch_array($result)) {

        $firstname = $row["Firstname"];
            $middlename = $row["Middlename"];
            $lastname = $row["Lastname"];
            $address = $row["Address"];
    $level = $row["LevelName"];
    $school = $row["SchoolName"];

?>
<tr>
<td><input name="checkbox" type="checkbox" /></td>
<td class="spec"><?php echo $lastname.", ".$firstname. " " .substr($middlename, 0,1) . "." ; ?>   </td>
<td><?php echo $address; ?></td>
<td><?php echo $level; ?></td>
<td><?php echo $school; ?></td>
</tr>
<?php
// Exit looping 
}
?>
</table>

</div> <!-- end of tabs1 -->

<div id="tabs-2">

<table id="mytable" cellspacing="0" summary="Subjects">
<tr>
<th scope="col" class="nobg"></th>
<th scope="col" abbr="Code">Subject Code</th>
<th scope="col" abbr="Name">Subject Name</th>
<th scope="col" abbr="Description">Description</th>
<th scope="col" abbr="Unit">Unit</th>
</tr>

<?php

$result2 = mysql_query($sql);  

if($result2 === FALSE) {
die(mysql_error()); // TODO: better error handling
} 

// Start looping table row
while ($row2 = mysql_fetch_array($result2)) {

        $code = $row2["Code"];
    $Name = $row2["Name"];
    $description = $row2["Description"];
            $unit = $row2["Unit"];

?>

<tr>
<td><input name="checkbox" type="checkbox"/></td>
<td class="spec"><?php echo $code; ?>    </td>
<td><?php echo $name; ?></td>
<td><?php echo $description; ?></td>
<td><?php echo $unit; ?></td>
</tr>

<?php
// Exit looping
}

?>

</table>

</div> <!-- end of tabs2  -->

When I added this:

<script type="text/javascript">
        function codeBinsAddEvent(obj,type,fn){
            if(obj.attachEvent){
                    if(type == "load"){
                        obj.attachEvent('on'+type, fn);
                    }
                    else{
                        obj.attachEvent('onreadystatechange', fn);
                    }
                    /*
                obj['e'+type+fn]=fn;
                obj[type+fn]=function(){
                    obj['e'+type+fn](window.event)}
                ;obj.attachEvent('on'+type,obj[type+fn])*/
             }
            else obj.addEventListener(type,fn,false)
        };
        function codeBinsAddLoadEvent(fn){
            codeBinsAddEvent(document.addEventListener&&!window.addEventListener?document:window,'load',fn)
        };
        function codeBinsAddReadyEvent(fn){
            codeBinsAddEvent(document,'DOMContentLoaded',fn)
        };   

     </script> 

It doesn’t allow the tabs to show. What’s wrong? Please help thanks.

Answer 1

You are including jQuery twice, hence on the second include, jQuery UI tabs are being removed.

Remove this line:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>

And if you want to include a minified version change the first URL to this:

http://code.jquery.com/jquery-1.8.3.min.js