CodeIgniter中的AJAX加载页眉和页脚源代码

Question

first of all sorry if my english isn't perfect, but i think you will understand my point.

What i want to do:

Simple web with this template order:

• header.php
• nav.php
• {dynamic content by ajax}
• footer.php

The problem:

At first page load all the source code works perfect (the header, the nav, the content and the footer) but when i use the menu to load another content using ajax the header, nav and the footer dissapear only from the source code.

I know why this is happening but i don't know how to solve it, take a look at the code below

AJAX menu

$(function(){
    $("a[rel='tab']").click(function(e){
        e.preventDefault(); 

        $("#ajax-content").css("display", "none");
        $("#loading").css("display", "block");

        pageurl = $(this).attr('href');

        $("#ajax-content").load(pageurl, function(){
            $("#loading").css("display", "none");
            $("#ajax-content").css("display", "block");
        });

        $('a').removeClass('active');
        $(this).addClass('active');

        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);    
        }

        return false;  
    });
});

application/libraries/Showcontent.php

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Showcontent {

   function __construct() {
    $this->CI =& get_instance();
   }


   function load_content($current_page) {
        $parts = array('header', 'nav', $current_page, 'footer');
        foreach($parts as $part) {
            $this->CI->load->view($part);
        } 
   }    
}
?>

application/config/autoload.php

$autoload['libraries'] = array('showcontent');

controller example in application/controllers/info.php

<?php
class Info extends CI_Controller {

    public function __construct() {
        parent::__construct(); 
    } 

    function index() {
        if($this->input->is_ajax_request()) {
            $this->load->view('info');
        } else {
            $this->showcontent->load_content('info');
        } 
    }

}
?>

view example in application/views/info.php

<div class="w95 center">
    <h2 class="header">Info Title</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
    audantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
    beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
    odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat 
    Ut  enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
    laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 
    qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum 
    fugiat quo voluptas nulla pariatur?</p>
</div>

So when i go to http://localhost then i click the info link to http://localhost/info i can see the header, nav, info content and the footer, good. But when i try to see the source code of the web i only see the same as the above code, only the info.php view

Thanks for your time!

Answer 1

This is a very common problem that we come across with. Always load the view part only when using ajax in your controller function. Check your controller code you must be loading the header.php and footer.php along with the view that is loaded on AJAX request.

function load_content($current_page) {
        $parts = array($current_page);
        foreach($parts as $part) {
            $this->CI->load->view($part);
        } 
   }