Change browser url without page reloading with ajax request (routes?)

[B_CooperA]

My goal is to load the actual content of my views and change the browsers URL without reloading the page. However, because I'm using CodeIgniter as a framework of my application, I can't get it to work properly. I have a controller where I'm loading all of my Dashboard's views, ones I want display inside my div called content_container.

 

Right now, I can get the content of each view with ajax request, but it doesn't change the actual URL (of course it doesn't) How should I implement this to get this to work properly with URL:s?

 

Here's the controller:

 

<?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');

    }   

}

?>

 

And here's my dashboard view (part of it):

 

<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 -->

 

 And the JS to load the content from different views into div called "center_container"

$("a#ajax").bind("click", function(e) {

     e.preventDefault();

 

     $("#loading_spinner").show();

     var url = $(this).attr("href");

 

$.ajax({

 

        url: url,

        type: "GET",

        async: false,

         data: url,

      success: function(data) {

 

      $("#loading_spinner").hide();

 

      $('.content_container').hide();

      $('p.where_am_i').html(url);

      $('.content_container').html(data).fadeIn(300);

      

 

      }

      });

      

     return false;

 

    });

 

application/config/routes.php (although I think it isn't set up properly)

 

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

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

 

[Jacques1]

Manipulating the browser history

 

Of course your site will be unusable for many people. But I guess you know that already.

[B_CooperA]

Yeah, already know that, but that's the point. I'm creating a JS-based application, which is quite common nowadays.