I've been attempting to use jquery and jqueryui to make tabs on my website. However, I can't seem to get them to work. The main page is in PHP, and I am using the Codeigniter framework. If the page fully renders, then the tabs won't work. If I change something that creates a fatal error in the php the tabs appear. While I was attempting to figure out what was going on I created a very basic page with only the jquery demo script, and it wouldn't work either. If it makes any difference, I am hosting on HostGator.
Please advise.
Header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sign Up!</title>
<link rel="stylesheet" href="<?php echo base_url();?>css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo base_url();?>css/jquery-ui-1.8.11.custom.css" type="text/css" media="screen" /> 开发者_如何学Python
<!-- Java includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<div class = "header">
<span class="nav_bar"><?php if($this->session->userdata('is_logged_in')){ echo 'Welcome, ' . ucfirst($this->session->userdata('first_name')). " " . ucfirst($this->session->userdata('last_name')) . ' | ' . anchor('site/logout' , 'Logout');} else { echo anchor('site/is_logged_in', 'Login');} ?></span>
</div>
<div class="content">
Body:
<!-- Tab Script -->
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<!-- end Tab Script -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">All Contacts</a></li>
<li><a href="#tabs-2">Place Holder Tab</a></li>
</ul>
<div id="tabs-1">
<?php $this->load->view('all_contacts_tab_view'); ?>
</div>
<div id="tabs-2">
Place Holder tab
</div>
</div>
Footer:
</div> <!-- end content div -->
<div class="footer">
<div class="footer_left">
<div id="copyright"> © 2011 NetworkIgniter. All rights reserved. NetworkIgniter, networkigniter.com and the all designs are trademarks of NetworkIgniter. Created with CodeIgniter and hosted on HostGator.</div>
<div id="legal">Terms and Conditions | Privacy Policy</div>
<div id="benchmarking">{elapsed_time} | {memory_usage}</div>
</div>
</div>
</body>
</html>
I did track down a java error after all, but I'm not sure how to fix it.
Error: $("#tabs").tabs is not a function
Line: 23
it looks like your calling tabs before it generated I would put that in doc ready
$(document).ready(function() {
$( "#tabs" ).tabs();
});
Figured it out.
It was the Google tracking script at the end. It was claiming the $. the reason why it was working when php crashed was because it wasn't getting down to the footer where the Google script was.
Errors on tabs are often due to a missing end of tag such as a </div>
or </li>
or whatever. Check the code generated by the PHP script to see if everything's fine. You might wanna use the Developper Tools Plugin on FireFox to detect any validation problems (including the missing tags).
精彩评论