Login

apysan · 02-18-2017, 06:23 AM

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.

ignitedcms · 02-19-2017, 08:33 AM

Very simple in this link.

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

Replace url with codeigniter url and define post vars.

Practical guide to IgnitedCMS - Book coming soon, www.ignitedcms.com

apysan · 02-22-2017, 02:00 AM

(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

**InsiteFX** · 02-22-2017, 11:12 AM

If we give every thing to you, you will never learn.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009. ( Skype: insitfx )

spjonez · 02-22-2017, 12:14 PM

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.

Wouter60 · 02-22-2017, 02:43 PM

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';
    $.post( url, { 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.

apysan · 02-22-2017, 10:11 PM

(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'; $.post( url, { 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.

larryhems · 09-06-2020, 11:53 PM

jQuery.load() is probably the easiest way to load data asynchronously using a selector, but you can also use any of the jquery ajax methods (get, post, getJSON, ajax, etc.)

Note that load allows you to use a selector to specify what piece of the loaded script you want to load, as in

Code:
$("#mydiv").load(location.href + " #mydiv");

Note that this technically does load the whole page and jquery removes everything but what you have selected, but that's all done internally.

**InsiteFX** · 09-07-2020, 03:06 AM

You do know that this post is 3 years old.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009. ( Skype: insitfx )