How do I load content into a tab only on click? The code that follows loads content into all tabs after page is loaded
- <?php if (!defined('BASEPATH')) exit('No direct script access allowed');
// get selected language
$_lang = $this->config->item('lang_selected');
if (empty($_lang))
{
$_lang = "en";
}
// send headers for expiration and last modification
$_gmdat = gmdate("D, d M Y H:i:s", time());
$this->output->set_header("Expires: $_gmdat GMT");
$this->output->set_header("Last-Modified: $_gmdat GMT");
// send raw HTTP headers to suppress caching
// HTTP/1.1
$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate, Post-Check=0, Pre-Check=0");
// HTTP/1.0
$this->output->set_header("Pragma: no-cache");
// send raw HTTP headers to set the content type for MS IE
$this->output->set_header("Content-Type: text/html; charset=UTF-8");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="<?=$_lang;?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv='content-language' content="<?=$_lang;?>" />
<base href="<?=base_url('', false);?>" />
<head>
<link type="text/css" href="<?=base_url()?>assets/css/jquery/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="<?=base_url()?>assets/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>assets/js/jquery/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="<?=base_url()?>assets/js/gui_functions.js"></script>
</head>
<title><?=$this->lang->line('login_title');?></title>
<style type="text/css">
img {
margin: 0;
border: 0;
padding: 0;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<body>
<div align="right">
<?=$this->load->view('elements/language');?>
</div>
<li><a href="#fragment-1"><span id = "tab1"><?=$this->lang->line('label_tab1');?></span></a></li>
<li><a href="#fragment-2"><span id = "tab2"><?=$this->lang->line('label_tab2');?></span></a></li>
<li><a href="#fragment-3"><span id="tab3"><?=$this->lang->line('label_tab3');?></span></a></li>
</ul>
<div id="fragment-1">
<?=$this->lang->line('label_tab1');?>
</div>
<div id="fragment-2">
<?=$this->lang->line('label_tab2');?>
</div>
<div id="fragment-3">
<?=$this->lang->line('label_tab3');?>
</div>
</div>
</body>
</html>
gui_functions.js look like
- $(document).ready(function(){
$("#tabs").tabs();
});
how do I load content only for the selected tab and only after I click it?
the stuff that looks weird it codeigniter related pay no attention all i need is jquery ui tabs that load their content only when selected
Thanx in advance