CODEWITHSUNDEEP
phpjquerycodeigniter
Blaze Tama
Blaze Tama

Reputation: 10948

simple codeigniter's view loaded 2 times with jquery 's tabs

I have a header(view) with jquery tabs that will be the "template" for my project. However, my header and the content always shown twice. This is the screenshoot (taken from the controller you see below) :

enter image description here

This is my header's view :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Johanes Indra</title>
<link rel="stylesheet" href="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo base_url(); ?>jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>

<script type="text/javascript" language="javascript">
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

<div id="header"><h1>HEADER</h1></div>
    <div id="tabs">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">All About Love</a></li>
        </ul>
    </div>
</head>

This is the view for the content (below the header) :

<body>
<div id="content">
    <?php echo $content; ?>
</div>

And this is the controller that load the header and the content :

class Home extends CI_Controller {
public function __construct() {
    parent::__construct();  
    $this->load->model('content_m');
}

public function index() {
    $get_content = $this->content_m->get_content('mscontent');

    foreach($get_content as $temp)
        $data['content'] = $temp->content;

    $this->load->view('header_v');
    $this->load->view('home_v', $data);
}

Where is my mistake? Thanks :D

Edit :

This is the generated code when i view the page source :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Johanes Indra</title>
<link rel="stylesheet" href="http://localhost/ci_buku_indra/jquery/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" />
<script language="javascript" type="text/javascript" src="http://localhost/ci_buku_indra/jquery/jquery-ui-1.10.2.custom/js/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="http://localhost/ci_buku_indra/jquery/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>

<script type="text/javascript" language="javascript">
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

<div id="header"><h1>HEADER</h1></div>
    <div id="tabs">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">All About Love</a></li>
        </ul>
    </div>
</head>
<body>
    <div id="content">
        content dari DB </div>
</body>
</html>

Upvotes: 0

Views: 718

Answers (3)

RiderHood
RiderHood

Reputation: 79

Place your divs(header,tabs) in body tag and close all the divs. I think it will work.

Upvotes: 1

M Khalid Junaid
M Khalid Junaid

Reputation: 64496

As referring to jquery ui

Also in your code you have placed the div with id="header" inside the head tag which bad practice Your view header_v.php should contain

<!doctype html> 
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
 <ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
 </ul>

Your home_v.php or your $content should have this html with relevant div ids which you have entered in the href of your anchors

 <div id="tabs-1">
 <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
  <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
  <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>

<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.     </p>
</div>
</div>

Upvotes: 1

Fairoz
Fairoz

Reputation: 106

your using tabs in your javascript code, it'll return A single content area with multiple panels, each associated with a header in a list.

Upvotes: 0

Related Questions