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.
header.php
----------
Code:
<DOCTYPE html>
<html>
<head>
<title>Admin Panel</title>
</head>
<body>
<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>
</button>
<a class="navbar-brand" href="<?php echo base_url(); ?>dashboard"><?php echo GetSiteName(); ?></a>
</div>
<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>
</ul>
</div><!--/.nav-collapse -->
<div id="content">
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('ul#nav li a').click(function(){
//alert("you click a link");
var page = $(this).attr('href');
//alert(page);
$(this).load.page;
//return false;
});
});
</script>
</body>
one of my controller called category is like this:
--------------------------------------------------
Code:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Category extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('text');
$this->load->helper('url');
$this->load->model('category_model');
}
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) {
$this->category_model->delete_by_id($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.
