CodeIgniter Forums
Converting to AJAX - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: Converting to AJAX (/thread-20947.html)



Converting to AJAX - El Forum - 07-26-2009

[eluser]HooJee[/eluser]
Hi Guys

I have a form I want to use Ajax to manage my error handling. I am really lost on how to do this as there is little documentation on AJAX/CI. Anyway, below is what I have:

Code:
$this->load->helper(array('form', 'url'));
    
$this->load->library('form_validation', 'ajax');
        
$this->form_validation->set_rules('name', 'Name', 'required|min_length[1]');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
$this->form_validation->set_rules('comments', 'Comments', 'required|min_length[5]');
    
if ($this->form_validation->run() == FALSE) {    
    $this->load->view('ajax/contact');
} else {
    $this->load->view('formsuccess');
}

If the user hasn't filled out the form properly then I want to update only the error div tags. What changes do I need to make ?


Converting to AJAX - El Forum - 07-26-2009

[eluser]Erik Larsson[/eluser]
Check out jQuery and jQuery UI, good documentation and easy to learn.


Converting to AJAX - El Forum - 07-26-2009

[eluser]HooJee[/eluser]
Ok - For jQuery I will need to use XML if I want to achieve the same result yes ?


Converting to AJAX - El Forum - 07-26-2009

[eluser]Erik Larsson[/eluser]
No its not needed Smile


Converting to AJAX - El Forum - 07-26-2009

[eluser]HooJee[/eluser]
Ok, I've setup jQuery and am sending a request to the controller. If a user hasn't filled out the form properly, how will I notify him about it ?


Converting to AJAX - El Forum - 07-26-2009

[eluser]Colin Williams[/eluser]
HooJee, which part of the request/response cycle is alluding you? How about in your response, you return something that ends up looking like:

Code:
<div class="errors">This is the error</div>

Then, with that response, you append the returned code somewhere in the DOM.


Converting to AJAX - El Forum - 07-26-2009

[eluser]evilgeoff[/eluser]
I suggest you do a bunch of reading on debugging ajax requests as it is something that is hard to wrap your head around at first. Get firebug and watch the requests/response to see what's happening. Also console.log will be your friend. Learn those two concepts you'll be doing fine. JQuery is a great way of doing this read their stuff on doing ajax requests. You can get the response back in whatever format you choose as your just echoing back from from server side code. Do it in xml, JSON, plain text, whatever you want. Look into $.ajax in JQuery as it has a function you can use for generating error code. Also there is some real easy form validation stuff in jQuery you should check out to help as I *THINK* that's what you're asking about although I'm not sure.


Converting to AJAX - El Forum - 07-26-2009

[eluser]Colin Williams[/eluser]
Maybe this will help. These are snippets of code from a recent signup form I did that validated things as the user moved through the form.

First, here's the javascript. Basically it is performing an Ajax request to see if the email provided is not yet in use.
Code:
// Special checks on email field
var El = $('#join-form #edit-email');
if (El.length > 0) {
    El.blur(
        function() {
            // Is the email address already being used?
            $.post('/people/check_email',
                {email : El.val()},
                function (data) {
                    if (data.is_user) {
                        El.next('.control-message').remove();
                        El.after('<span class="control-message control-error">'+ data.message +'</span>');
                        validEmail = false;
                    }
                    else if ( ! data.is_valid) {
                        El.next('.control-message').remove();
                        El.after('<span class="control-message control-error">'+ data.message +'</span>');
                        validEmail = false;
                    }
                    else {
                        El.parent().find('.control-error').remove();
                        validEmail = true;
                    }
                },
                'json'
            );
        }
    );
}

The POST is hitting the 'people' controller and the 'check_email' function, which looks like this:
Code:
function check_email()
{
    $this->load->library('validation');
    $result = array(
        'is_user' => FALSE,
        'is_valid' => TRUE,
        'message' => ''
    );
    if ($this->users->user_exists(array('email' => $this->input->post('email'))))
    {
        $result['is_user'] = TRUE;
        $result['message'] = 'This email is already in use. Use another.';
    }
    if ( ! $this->validation->valid_email($this->input->post('email')))
    {
        $result['is_valid'] = FALSE;
        $result['message'] = 'This email is not a valid address.';
    }
    print json_encode($result);
}

Maybe you can follow that and glean some ideas from it