CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
Kevin
Kevin

Reputation: 2688

CodeIgniter Ajax Form Post

I am using CodeIgniter, and the jQuery Forrm plugin: http://malsup.com/jquery/form/

I am having an issue getting a form to work properly.

View

<div class="row">
    <div class="well col-sm-5 col-sm-offset-3">
        <h2><span class="fa fa-key"></span>&nbsp;&nbsp;Please login below</h2>
        <form class="form-horizontal" id="LoginForm" role="form" method="post" action="/login_controller/process" onsubmit="PostFormRedirect('#LoginForm', '#RetMsg', '/');return false;">
            <div class="row small-pad">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-inbox" style="max-width:20px;min-width:20px;"></i></span>
                    <input type="email" class="form-control" id="UserName" name="UserName" placeholder="Email" />
                </div>
            </div>
            <div class="row small-pad">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-key" style="max-width:20px;min-width:20px;"></i></span>
                    <input type="password" class="form-control" id="UserPass" name="UserPass" placeholder="Password" />
                </div>
            </div>
            <div class="row small-pad">
                <button type="submit" class="btn btn-primary pull-right"><span class="fa fa-sign-in"></span>&nbsp;&nbsp;Sign in</button>
            </div>
            <div class="row small-pad center-text">
                <a href="/forgot" class="is-ajax-inner" data-where="#RetMsg">Forgot My Password</a>
            </div>
        </form>
        <div id="RetMsg"></div>
    </div>
</div>

Controller

class Login_controller extends CI_Controller {
    
    public function __construct(){
        $this->load->database();
        var_dump('loaded');
        exit;
    }
    
    public function process(){
        $this->load->model('login_model');
        $this->login_model->process();
    }
    
}

Model

class Login_model extends CI_Model {
    
    function process(){
        var_dump('YEP');
        exit;
    }
    
}

PostFormRedirect Function

function PostFormRedirect(FormID, Target, Location){
    try{
        $subButton = jQuery('[type="submit"]');
        var options = {
            target: Target,
            beforeSubmit: function () {
                $subButton.attr('disabled', 'disabled');
                jQuery(Target).html('<div class="pageLoader">Loading...<br /><img src="/assets/images/ajax-loader.gif" alt="loading..." height="11" width="16" /></div>');
                jQuery(Target).slideDown('fast');
            },
            success: function (html) {
                setTimeout(function () {
                                        var $t = Math.round(new Date().getTime() / 1000);
                                        jQuery(Target).html(html);
                                        jQuery(Target).slideUp('fast'); 
                                        if(typeof(Location) !== 'undefined'){
                                            window.location.href = Location + '?_=' + $t;
                                        }
                                     }, 3000);
            },
            error: function(e){
                var $html = e.responseText;
                jQuery(Target).html($html);
                jQuery(Target).slideDown('fast');
                if(jQuery('#captcha-gen').length){
                    var $t = Math.round(new Date().getTime() / 1000);
                    jQuery.get('/inc/captcha.php?_=' + $t, function(data){
                        jQuery('#captcha-gen').html(data);
                    });
                }
                $subButton.removeAttr('disabled');
            }
        };
        jQuery(FormID).ajaxSubmit(options);
    }catch(err){
        alert(err.message);
    }
}

.htaccess

# The Friendly URLs part - for normal pages
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA,NC]

config/routes.php

$route['default_controller'] = 'pages/view';
$route['(:any)'] = 'pages/view/$1';
$route['404_override'] = '';

What is happenning is, right now, RetMsg is showing me a 404 error... when I can get rid of the 404 error, RetMsg is showing me the login form again.

What am I doing wrong? I expect it to show me var_dump('YEP');

Upvotes: 0

Views: 430

Answers (1)

Kyslik
Kyslik

Reputation: 8385

Try calling your controller via URL (by hand) if it works no issiue with routes.php.

Please watch and take a closer look at this part of code ...action="/login_controller/process" onsubmit="PostFormRedirect('#LoginForm', '#RetMsg', '/');...

Try editing action to action="<?= base_url('login_controller/process')?> and base_url() is in url helper (autoload it).

few debugging tricks:

enable in controller profiler $this->output->enable_profiler(TRUE); unfortunately your contoller must load properly (no 404 error) but this might help you in future even in AJAX calls (you can see what POST data were sent). In real application disable this because JSON data are going to be "corrupted".

for AJAX testing use Google Chrome (or FF), right click and inspect element take a look at network tab (you knew this already) but now, whenever you make an AJAX call there is going to be row with headers/body etc in header you can see what URL was called and therefore "why" there is 404 error.

In constructor use this if/else statement to ignore non AJAX calls

    public function __construct() {
        parent::__construct();
        if (!$this->input->is_ajax_request()) {

            redirect(); //no ajax redirect to home

        }

        $this->output->enable_profiler(FALSE); //force to disable profiler

    }

Upvotes: 1

Related Questions