Welcome Guest, Not a member yet? Register   Sign In
AJAX Load Content No Page Refresh

(This post was last modified: 02-18-2017, 09:12 AM by ciadmin. Edit Reason: Added bbcode for readability )

Hi Friends this is my Simple Header Page with few link to call different pages.

Whenever i click on any link it refresh whole page then display the page content.

I want to do it in ajax way i.e, without page refresh.

I am new in ajax use.

Here are my code please help me to acheive it.


<DOCTYPE html>
    <title>Admin Panel</title>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <a class="navbar-brand" href="<?php echo base_url(); ?>dashboard"><?php echo GetSiteName(); ?></a>
        <div id="navbar" class="navbar-collapse collapse">
          <ul id="nav" class="nav navbar-nav navbar-right">
          <li id="1"><a href="<?php echo base_url();?>dashboard">Dashboard</a></li>
<li id="2"><a href="<?php echo base_url();?>category">Category</a></li>
            <li id="3"><a href="<?php echo base_url();?>product">Product</a></li>
<li id="4"><a href="<?php echo base_url();?>package">Package</a></li>
<li id="5"><a href="<?php echo base_url();?>customer">Customer</a></li>
<li id="6"><a href="<?php echo base_url();?>unit">Unit</a></li>
<li id="7"><a href="<?php echo base_url();?>order">Orders</a></li>
            <li><a href="<?php echo base_url(); ?>dashboard/logout">Logout</a></li>
        </div><!--/.nav-collapse -->
   <div id="content">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 $('ul#nav li a').click(function(){
 //alert("you click a link");
 var page = $(this).attr('href');
 //return false;


one of my controller called category is like this:
defined('BASEPATH') OR exit('No direct script access allowed');

class Category extends CI_Controller {

    public function __construct() {

    public function index() {
        $data['all_category'] = $this->category_model->get_all_categories();
$data['all_parent_category'] = $this->category_model->get_all_parent_categories();
        $this->load->view('category_view', $data);

    public function category_add() {
        $data = array(
            'category' => $this->input->post('category'),
            'parent_category' => $this->input->post('parent_category'),
            'status' => $this->input->post('status'),
        $insert = $this->category_model->category_add($data);
        echo json_encode(array("status" => TRUE));

    public function ajax_edit($id) {
        $data = $this->category_model->get_by_id($id);
        echo json_encode($data);

    public function category_update() {
        $data = array(
            'category' => $this->input->post('category'),
            'parent_category' => $this->input->post('parent_category'),
            'status' => $this->input->post('status'),
        $this->category_model->category_update(array('id' => $this->input->post('id')), $data);
        echo json_encode(array("status" => TRUE));

    public function category_delete($id) {
        echo json_encode(array("status" => TRUE));


My view_file is category_view.

Please note that the code works but i want to avoid page refresh.

Thanks in Advance for any help in this regard.

Messages In This Thread
AJAX Load Content No Page Refresh - by apysan - 02-18-2017, 06:23 AM
RE: AJAX Load Content No Page Refresh - by apysan - 02-22-2017, 02:00 AM
RE: AJAX Load Content No Page Refresh - by apysan - 02-22-2017, 10:11 PM

Theme © iAndrew 2016 - Forum software by © MyBB