Ajax with a custom template - Printable Version

Ajax with a custom template - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forumdisplay.php?fid=22)
+--- Thread: Ajax with a custom template (/showthread.php?tid=44095)

Ajax with a custom template - El Forum - 08-03-2011

[eluser]waynhall[/eluser]
I just wanted to say how much I appreciate the is_ajax_request() method. It makes progressive enhancement a cakewalk with ajax calls:

Code:
if($this->input->is_ajax_request()) {

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

            } else {

                $data = array(

                    'title'     =>  'Sign up for News and Info',

                    'main_content'   =>  'signup_success'

                );

                $this->load->view('template', $data);

            }

I have a template that loads header, sidebar, and footer dynamically:

Code:
<div id="container">

        &lt;?php $this->load->view('layout/header'); ?&gt;

        <div id="main-and-sidebar" class="clearfix">    

            <div id="main" role="main" class="left two-thirds clearfix">

                <section id="content">

                    &lt;?php $this->load->view($main_content); ?&gt;

                </section>

            </div>

            &lt;?php $this->load->view('layout/sidebar'); ?&gt;

        </div>

        &lt;?php $this->load->view('layout/footer'); ?&gt;

    </div>

With jquery I can clear the content and replace with the response from the server:

Code:
/*      Signup form         */

    $('#signup-form').submit(function(e) {

        var email = $('#email').val()

        $('article#signup').slideUp();

        var loading = $('<img class="noshadow" src="/img/loading.gif">');

        $('#content').append(loading);

        $.post('signup', {

            'email' : email

        }, function(response){

            loading.remove();

            $('#content').append(response);

        });

        e.stopPropagation();

        e.preventDefault();

        return false;

    });