Login

11-09-2007, 04:36 AM

[eluser]worchyld[/eluser]
Hi there, I've got a list of customers that page very well. I want to add JQuery to make it do the hardwork of paging (but it must still page with JavaScript switched off!) Also, how do you make it have that fancy ajax loading gif too? Once finished I'd like to release it, so that people can see JQuery/CI working hand-in-hand is easy.

Remove + in scripts

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

&lt;title&gt;List of customers&lt;/title&gt;

<scr+ipt type="text/javascript" src="&lt;?=base_url()?&gt;assets/javascript/jquery.js">

<scr+ipt type="text/javascript">    

/* &lt;![CDATA[ */

    $(document).ready(function() {    

        $("p.paging a").click(function() {

// this is where I'm stuck, I don't know what I'm meant to do

// I want to feed my URL with the offset generated by CI

// I want it to get the paging result and return the results AJAX-like.

// How do I get that Fancy AJAX loading gif on here too?

            $.ajax({

                type: "GET",

                url: "/index.php/index/",

                data: "id="+$(this).prev().text(),

                success: function(html){

                    alert("Something happened");

                }

            });

            return false;

        });

    });

/* ]]> */

</scr+ipt>

&lt;style type="text/css"&gt;

    p.paging {

    padding:5px;

    border:1px solid #acd373;

    background:#fafff3;

    margin-bottom: 10px;

    }

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;?=$this->table->generate($data['results']); ?&gt;

<p class="paging">&lt;?=$this->pagination->create_links(); ?&gt;</p>

&lt;/body&gt;

&lt;/html&gt;

The controller is like this;

Code:
// CONTROLLER

class List_customers extends Controller {

    // controller

    function List_customers() {        

        parent::Controller();

        // $this->output->enable_profiler(TRUE);    

    } // end function

    function index() {

        // Load libraries

        $this->load->library('pagination');

        $this->load->library('table');

        $this->load->library('validation');

        // Get the page offset

        $offset = $this->get_page_offset();

        // List all customers with paginated effect

        $this->list_all($offset);

    } // end function

    function list_all($offset=0) {

        // Load customer model

        $this->load->model('Customer_list_model');

        // =======================================================

        // Initialize Pagination

        $config['base_url']     = site_url('list_customers/index/');

        $config['total_rows']   = $this->db->count_all('ci_customers');

        $config['per_page']     = 10;

        $num                    = $config['per_page'];

        $config['cur_page']        = $offset;

        $data['offset']            = $offset;        

        $this->pagination->initialize($config);        // Run paging

        $data['results'] = ( $this->Customer_list_model->get_customers('ci_customers', $num,    $data['offset']) );

        // =======================================================

        // Set page variables

        $this->view->set("data", $data);

        $this->table->set_heading('ID', 'Name');

        // =======================================================

        // Load the actual page

        $this->view->load('list_customers');

    } // end function

    // ==========================================

    // Get the paging offset

    function get_page_offset() {

        $offset=0;

        if (is_numeric($this->uri->segment(3))) {

            // Handle GET variable

            $offset    = $this->uri->segment(3);

        } else {

            // Handle POST variable

            if (is_numeric($this->input->post("offset"))) {

                $offset = $this->input->post("offset");

            } else {

                $offset = 0;

            } // end if

        } // end if

        return ($offset);

    } // end function

} // end class

?&gt;

Thanks.

11-09-2007, 05:14 AM

[eluser]xwero[/eluser]
If you want a javascript paging on top of your php ono the fastest way to develop it is separately.
The easiest way to do it is if javascript is enabled you remove/don't create the php table and paging and use a plugin like ingrid

11-09-2007, 05:16 AM

[eluser]xwero[/eluser]
tablesorter is another one but this allows to add data using ajax

11-09-2007, 05:44 AM

[eluser]worchyld[/eluser]
Using that plug-in is great, but it doesn't teach you how to combine JQuery and CI, which is what I'm after.

To clarify. In order to make Jquery and CI work, you have to separate them?

11-09-2007, 06:09 AM

[eluser]xwero[/eluser]
No to make the paging work you need to separate javavascript functionality from the php-only version because the php-only version uses an url to browse through the records and with ajax you have a static url

11-09-2007, 06:13 AM

[eluser]xwero[/eluser]
Flexible Paging Plugin is easier if you want to make a javascript paging solution

11-09-2007, 06:38 AM

[eluser]worchyld[/eluser]
Getting the paging to work is fine. Its getting JQuery to do it that's the problem. I don't quite see why I'd want to seperate JQuery and CI in the way you describe. Isn't the reason why I'm putting JQ in there is because is has to deal with dynamic URLs?

Could you post examples? Just small ones will be fine. I'm finding little information on Google on what I'm meant to be doing with the data and would appreciate any help via examples.

I got the following to work, but its not the right way to do it, as it doesn't do JSON, XML or anything like that -- but it seems to work. There is no "Loading" message as yet.

Code:
// Put in head

<scri+pt type="text/javascript">

/* &lt;![CDATA[ */

    $(document).ready(function() {

        $("p.paging a").click(function() {

            $.ajax({

                type: "GET",

                url: $(this).get(),  // this gets the actual URL

                success: function(html){

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

                }

            });

            return false;

        });

    });

/* ]]> */

</scr+ipt>

Code:
// Put in body

<div id="show">

    &lt;?=$this->table->generate($data['results']); ?&gt;

    <p class="paging">&lt;?=$this->pagination->create_links(); ?&gt;</p>

</div>

I know that the above is wrong, but would welcome any examples on how to do it, as I'm really stumped on this.

11-09-2007, 08:11 AM

[eluser]xwero[/eluser]
You are sending the paging url to get new content??? don't you get a full html document instead of a pagepart?
You should check your html after the ajax call with firebug.
It will work but you end up having messed up html code and it will only work if you can see all the link numbers.

There is no easy solution i can think of than to have separate functions for paging or you are going to work out some tricks (cookies seems a choice) which complicate things because the php-only version and the javascript one get tangled together.

11-09-2007, 08:45 AM

[eluser]worchyld[/eluser]
I can seperate the functions, etc, that's no problem - I'll probably do that and go from there.

But what'd really help me is if someone could post a paging list of customers that integrates with JQuery. Something simple will do so I can learn from it?

That'd be fantastic!

11-10-2007, 12:16 AM

[eluser]worchyld[/eluser]
Sepertion of CI and JQ

I've tried to seperate my CI and JQ as much as possible, and reworked my ajax call, but its still not working. It outputs the same page and I also get;

Quote:Fatal error: ob_start() [<a href='ref.outcontrol'>ref.outcontrol</a>]: Cannot use output buffering in output buffering display handlers in C:\Program Files\xampp\htdocs\codeignitor\system\libraries\Exceptions.php on line 160

Here's what I've done;

Code:
class List_customers extends Controller {

    // controller

    function List_customers() {

        parent::Controller();

        $this->load->model('Customer_list_model');

        $this->load->library('pagination');

        $this->load->library('table');

        $this->output->enable_profiler(TRUE);

    } // end function

    function index() {

        // Load libraries

        $this->list_all();

    } // end function

    function list_all() {

        $data['results'] = $this->handle_pagination();

        // Set page variables

        $this->view->set("data", $data);

        $this->table->set_heading('ID', 'Name');

        // Load the actual page

        $this->view->load('list_customers');

    } // end function

    // ==========================================

    function handle_pagination() {

        // Get the page offset

        $offset = $this->get_page_offset();

        // Initialize Pagination

        $config['base_url']     = site_url('/list_customers/');

        $config['total_rows']   = $this->db->count_all('ci_customers');

        $config['per_page']     = 10;

        $num                    = $config['per_page'];

        $config['cur_page']        = $offset;

        $data['offset']            = $offset;

        $this->pagination->initialize($config);        // Run paging

        // Get data

        return ( $this->Customer_list_model->get_customers('ci_customers', $num,    $data['offset']) );

    } // end function

    // Get the paging offset

    function get_page_offset() {

        $offset=0;

        if (is_numeric($this->uri->segment(3))) {

            // Handle GET variable

            $offset    = $this->uri->segment(3);

        } else {

            // Handle POST variable

            if (is_numeric($this->input->post("offset"))) {

                $offset = $this->input->post("offset");

            } else {

                $offset = 0;

            } // end if

        } // end if

        return ($offset);

    } // end function

        // output the HTML chunk and spit it back? is the right way to do this? what about JSON?

    function ajax_generator() {

        $data['results'] = $this->handle_pagination();

        $string = ( $this->table->generate($data['results']) );

        $string .= ( '<p class="paging">'.$this->pagination->create_links().'</p>' );

        echo $string;

    } // end function

} // end class

Code:
// Stick this in your HTML head

&lt;base href="&lt;?=base_url()?&gt;" /&gt;

<scr+pt type="text/javascript">

/* &lt;![CDATA[ */

    $(document).ready(function() {

        $("p.paging a").click(function() {

            $.ajax({

                url: 'index.php/list_customers/ajax_generator/',

                type: 'GET',

                dataType: 'html',

                timeout: 1000,

                error: function(){

                    alert('Error loading document');

                },

                success: function(html){

                    // do something with html

                    alert(html);

                }

            });

            return false;

        });

    });

/* ]]> */

</scr+ipt>

Code:
// Stick this in your body

<div id="show">

    &lt;?=$this->table->generate($data['results']); ?&gt;

    <p class="paging">&lt;?=$this->pagination->create_links(); ?&gt;</p>

</div>

I've split the AJAX call from the rest of the CI code, plus seperated the pagination too, but its still not working.

Can anyone help on this? Small code examples would be cool.