CodeIgniter Forums

Full Version: AJAX Load Content No Page Refresh
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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.
Very simple in this link.

http://api.jquery.com/jquery.ajax/

Replace url with codeigniter url and define post vars.
(02-19-2017, 08:33 AM)ignitedcms Wrote: [ -> ]Very simple in this link.

http://api.jquery.com/jquery.ajax/

Replace url with codeigniter url and define post vars.

what do you mean by "and define post vars. "

I understand that in place of url it will be my base_url()

Please give me a code as i am not using ajax must.
Shall be greatful . Really Urgent

Thanks
If we give every thing to you, you will never learn.
The basic idea is to make take your anchor link and send the URL through $.ajax, return the response (view) as a key in a JSON blob, then replace the HTML in a container with your new fragment. This assumes your initial page load has all the required assets (CSS, JS) and you'll have to bind any plugins you use manually after you've replaced the content.

One of these days I'll update my Cinder repo which does all of this for you. Our internal build is stable but I haven't had a chance to back port the changes to the generic version.
Sounds pretty complex, but it isn't.
The whole idea is that you have an html element on your page, let's say a <div>, that must be populated with a different content, triggered by some user action. For a start, you'll have to give this html element a unique id, in order to change it's content with jQuery.
Code:
<div id="mycontent"><p>Old piece of content blablabla<p/></div>
<button type="button" id="button1">Click me to change the content!</button>

Next, you write a method (= function) inside a controller that must return the new content.  Make sure it ends with an echo statement:
PHP Code:
echo '<p>New piece of content tadaaa!</p>'

If this method must accept one or more parameters, the safest way is passing 'POST' variables to it in the AJAX request.
Handle them with the standard CI way for $_POST variables, e.g.:
PHP Code:
$category $this->input->post('category'); 

The last step is the jQuery part in your view. Make sure your view has a link to the jQuery library in the <head> section.
PHP Code:
<script>
$(
document).ready(function(){
 
   $('#button1').click(function(){
    var 
url "<?= base_url();?>controller/method";
 
       var cat 'A';
    $.
posturl, { category cat })
    .
done(function(data) {
        $(
'#mycontent').html(data);
    });    
 
   });
});
</
script

After the user has clicked the button, the div will have the new content without a page refresh.
(02-22-2017, 02:43 PM)Thanks a lot for your guide Wouter60 Wrote: [ -> ]Sounds pretty complex, but it isn't.
The whole idea is that you have an html element on your page, let's say a <div>, that must be populated with a different content, triggered by some user action. For a start, you'll have to give this html element a unique id, in order to change it's content with jQuery.
Code:
<div id="mycontent"><p>Old piece of content blablabla<p/></div>
<button type="button" id="button1">Click me to change the content!</button>

Next, you write a method (= function) inside a controller that must return the new content.  Make sure it ends with an echo statement:
PHP Code:
echo '<p>New piece of content tadaaa!</p>'

If this method must accept one or more parameters, the safest way is passing 'POST' variables to it in the AJAX request.
Handle them with the standard CI way for $_POST variables, e.g.:
PHP Code:
$category $this->input->post('category'); 

The last step is the jQuery part in your view. Make sure your view has a link to the jQuery library in the <head> section.
PHP Code:
<script>
$(
document).ready(function(){
 
   $('#button1').click(function(){
    var 
url "<?= base_url();?>controller/method";
 
       var cat 'A';
    $.
posturl, { category cat })
    .
done(function(data) {
        $(
'#mycontent').html(data);
    });    
 
   });
});
</
script

After the user has clicked the button, the div will have the new content without a page refresh.