[SOLVED!!] Grey out background while processing forms? (jQuery + blockUI)

[eluser]fancms[/eluser]
I found this really neat little jQuery script that will basically block out an element or a whole page. http://malsup.com/jquery/block/

I'm interested in being able to implement this into my project, so when a user clicks submit the background is greyed out and they are presented with a "Message...please wait", while the form is processed.

However, I'm having a lot of trouble figuring out how to do this with CI. Most of my forms are set up with

Code:

if($this->validation->run() == FALSE) {
//Form/error stuff
} else {
//Process data
}

I can get the background to grey out but the page just comes back with no validation/processing being done. The link I posted shows a page that lets you do ajax calls to process stuff; however I'm completely lost when it comes to using AJAX with CI.

If anyone could give me a few pointers I'd be really grateful. Thanks

[eluser]thinkigniter[/eluser]
Hi Fancms,
Are you getting confused between CI Validation class and an AJAX validation object? There not the same.
Have a look at malsup jquery form plugin malsup.com/jquery/form/ for a good ajax form processsor
But give up trying to use the JQ/Forms validation option and the CI validation class.

As a basic rule
AJAX is client/(after page has loaded) side and CI is server (while page is loading) side.

If you already got all of this and it seems as I'm treating you like a child, Sorry, it wasn't meant that way.

[eluser]fancms[/eluser]
I do understand the difference between the CI and Ajax validation objects. My question lies more with being able to "grey out" the page while the form is processing.

Most of my forms are set up like this:

Code:

function formpage()
{
  //load form helper, validation class
  //add rules and field names here
  //set fields, rules

  if($this->validation->run() == FALSE) {
    $data['errors'] = $this->validation->error_string;
    $data['form_open'] = form_open('controller/formpage');
    //other fields
    //load views
  } else {
    //Process data
  }
}

So simply entering 'controller/formpage' for the ajax url doesn't do anything.

And I actually have successfully used jQuery's and CI form validation side by side, although that isn't what I'm having issues with here.

I will check out the form plugin, though; thanks for the tip!

[eluser]xwero[/eluser]
Greying out a form can be done like this

Code:

$('#form').submit(function(){

   $(this).block();

   $.ajax({
          // ...
          success: function(msg){
                      $(this).unblock();
                   }
          });
});

[eluser]fancms[/eluser]
Wow, sometimes the answer is so simple you can't figure it out until it smacks you upside the head (or maybe that's just me...*ahem*)

Here's how I got jQuery + blockUI to grey out the page while the form processed:

Code:

$(document).ready(function() {

     $('#form').submit(function() {
            $.blockUI();
        });
});

Thanks for helping push me in the right direction, cjunky and xwero