CodeIgniter ajax call using jquery when call redirect it prints the whole page i div

Question

no title that fits this bug but this how it goes, i have form with a submit button when pressed jquery ajax calls the controller and the form validation is done if it fails the form is redrawn if it passes the page is redirected to the home page with flash message successes and thats where the bug happens it redraws the whole page in the content(header header footer footer). i hope it makes sense seeing is believing so here is the code

side notes: "autform" is a lib for creating forms "rest" is a lib for templates.

the jquery code:

$("form.user_form").live("submit",function() {
  $("#loader").removeClass('hidden');
  $.ajax({
      async :false,
      type: $(this).attr('method'),
      url: $(this).attr('action'),
      cache: false,
      data: $(this).serialize(),
      success: function(data) {
                $("#center").html(data);
                     $('div#notification').hide().slideDown('slow').delay(20000).slideUp('slow');
                }
  })

  return false;
 }); 

the controller

 function forgot_password()
{
        $this->form_validation->set_rules('login',lang('email_or_login'), 'trim|required|xss_clean');
        $this->autoform->add(array('name'=>'login', 'type'=>'text', 'label'=> lang('email_or_login')));
        $data['errors'] = array();
        if ($this->form_validation->run($this)) {                               // validation ok
            if (!is_null($data = $this->auth->forgot_password(
                    $this->form_validation->set_value('login')))) {
                    $this-> _show_message(lang('auth_message_new_password_sent'));
            } else {
                $data['message']=$this-> _message(lang('error_found'), false);  // fail
                $errors = $this->auth->get_error_message();
                foreach ($errors as $k => $v){
                     $this->autoform->set_error($k, lang($v));
                }
            }
        }
        $this->autoform->add(array('name'=>'forgot_button', 'type'=>'submit','value' =>lang('new_password')));
        $data['form']=  $this->autoform->generate('','class="user_form"');
        $this->set_page('forms/default', $data);
        if ( !$this->input->is_ajax_request()) { $this->rest->setPage(''); }
        else { echo  $this->rest->setPage_ajax('content');       }
    }
}

function _show_message($message, $state = true)
{
    if($state)
    {
        $data = '<div id="notification" class="success"><strong>'.$message.'</strong></div>';
    }else{
        $data = '<div id="notification" class="bug"><strong>'.$message.'</strong></div>';
    }
    $this->session->set_flashdata('note', $data);
    redirect(base_url(),'refresh');
}

i think it as if the redirect call is caught by ajax and instead of sending me the home page it loads the home page in the place of the form.

thanks for any help regards

Answer 1

OK found the problem and solution, it seemed you cant call a redirect in the middle of an Ajax call that is trying to return a chunk of HTML to a div, the result will be placing the redirected HTML in the div.

The solution as suggested by PhilTem at http://codeigniter.com/forums/viewthread/210403/ is when you want to redirect and the call is made by Ajax then return a value with the redirect URI back to Ajax and let it redirect instead.

For anyone interested in the code:

The Jquery Ajax code:

$("form.user_form").live("submit", function(event) {
  event.preventDefault();
  $("#loader").removeClass('hidden');
  $.ajax({
      type: $(this).attr('method'),
      url: $(this).attr('action'),
      cache: false,
      dataType:"html",
      data: $(this).serialize(),
      success: function(data) {
          var res = $(data).filter('span.redirect');
          if ($(res).html() != null) {
              [removed].href=$(res).html();
              return false;
          }
          $("#center").html(data);
      },
      error: function() {

      }
  })
  return false;
});  

The PHP Controller

function _show_message($message, $state = true, $redirect = '')
{
    if ($state)
    {
        $data = '<div id="notification" class="success"><strong>'.$message.'</strong></div>';
    } else {
        $data = '<div id="notification" class="bug"><strong>'.$message.'</strong></div>';
    }

    $this->session->set_flashdata('note', $data);

    if ( !$this->input->is_ajax_request())
    {
        redirect(base_url() . $redirect, 'location', 302);
    }
    else
    {
         echo '<span class="redirect">'.base_url().$redirect.'</span>';
    }

}

Answer 2

just use individual errors

json_encode(array(
   'fieldname'  =>  form_error('fieldname')
));

AJAX

success: function(cb)
{
    if(fieldname)
    {
       {fieldname}.after(cb.fieldname)
    }
}

see this