ajaxリクエストでページをリロードせずにブラウザのURLを変更する

だから私はこのチュートリアルに従っています：

http://www.tinywall.info/2012/02/change-browser-url-without-page-reload-refresh-with-ajax-request-using-javascript-html5-history-api-php-jquery-like- facebook-github-navigation-menu.html

私の目標は、ビューの実際のコンテンツをロードし、ページをリロードせずにブラウザーのURLを変更することです。ただし、アプリケーションのフレームワークとしてCodeIgniterを使用しているため、正しく機能させることができません。ダッシュボードのすべてのビューをロードするコントローラーがあります。これは、content_containerという名前のdiv内に表示したいものです。

問題は、別のアンカータグをクリックして、ajaxリクエストを介してロードする別のビューを取得するたびに、別の「ダッシュボード」がURLに追加され、もちろんその後はビューが表示されないことです。したがって、数回クリックすると、URLは「ダッシュボード/ダッシュボード/ダッシュボード/プロファイル」のようになります。JavascriptでURLを分割しようとしましたが、役に立ちませんでした。

1つの解決策は、ビューごとに1つのコントローラーを作成することですが、これは悪い習慣だと思います。すべてのビューを処理するコントローラーが1つしかないため、コードははるかにクリーンになります。

コントローラは次のとおりです。

<?php

class Dashboard extends CI_Controller {

    public function __construct()
    {

        parent::__construct();
        $this->output->nocache();
        $this->load->model('subject_model');
        $this->load->model('user_model');
    }


    public function index()
    {

        $this->load->view('header');
        $this->load->view('dashboard');
        $this->load->view('footer');
    }

    public function users() 
    {

        $data['users'] = $this->user_model->getUsers();
        $this->load->view('staff_users', $data);
    }
    public function lomake()
    {

        $this->load->view('lomake');
    }

    public function profile()
    {

        $data['userinfo'] = $this->user_model->getUserInformationById($this->session->userdata('user_id'));
        $this->load->view('myprofile', $data);
    }

    public function subjects()
    {

        $this->load->view('subjects');
    }   
}
?>

そして、これが私のダッシュボードビュー（その一部）です：

<aside id="left_control_panel">

    <ul id="left_control_links">
        <li>
        <a href="home" id="ajax" class="active">Home</a>
        </li>
        <li>
        <a href="dashboard/subjects" rel="tab">Subjects</a>
        <span class="list_total_count"><?=$total_subjects?></span>
        </li>

        <li>
        <a href="dashboard/lomake" id="ajax">Query</a>
        </li>

    <?php if($this->session->userdata('user_type') == 'admin'):?>

        <span class="left_control_heading">User management</span>
        <li>
        <a href="dashboard/users" rel="tab">Users</a>
        <span class="list_total_count"><?=$total_users?></span>
        </li>

        <li>
        <a class="add_user" href="add_user">Add User</a>
        </li>
    <?php endif;?>

        <span class="left_control_heading">Account management</span>
        <li>
        <a href="dashboard/profile" rel="tab">My Profile</a>
        </li>

        <li>
        <a href="<?=base_url()?>users/logout">Sign Out</a>
        </li>
    </ul>
</aside> <!-- end of left_control_panel -->

<div id="wrapper_loggedin">
        <div class="content_container">
        <! -- I will display all the data from different views in here -->
        </div>
</div> <!-- end of wrapper_loggedin -->

そして最後に、チュートリアルにもあるJSの部分：

$(function(){
    $("a[rel='tab']").click(function(e){
        //e.preventDefault(); 
        pageurl = $(this).attr('href');

        $.ajax({url:pageurl+'?rel=tab',success: function(data){
            $('.content_container').html(data);
        }});

        //to change the browser URL to 'pageurl'
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);    
        }
        return false;  
    });
});

/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
    $.ajax({url:location.pathname+'?rel=tab',success: function(data){
        $('.content_container').html(data);
    }});
});

Application / config / routers.php

$route['dashboard'] = 'dashboard/index';

$route['dashboard/(:any)'] = 'dashboard/$1';