jquery tabs with form help

Question

Hello, I am implementing jQuery tabs on mysite, one of the tabs holds a form and this is my problem, the form is loaded in via ajax as it is used multiple time throughout the site. My issue is that when the form is submitted the page leaves the tabbed area, whereas I need to stay within the tabbed system.

Below is the code I am using

TABS HTML

<div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Active Categories</a></li>
                    <li><a href="#tabs-2">De-activated Categories</a></li>
                    <li><a href="<?=base_url();?>admin/addCategory">Add A New Category</a></li>
                </ul>

FORM MARKUP

 <div id="contact_form">
<?php
    // open the form
    echo form_open(base_url().'admin/addCategory');
        // categoryTitle
        echo form_label('Category Name', 'categoryTitle');
        echo form_error('categoryTitle');
        $data = array(
            'name' => 'categoryTitle',
            'id' => 'categoryTitle',
            'value' => $categoryTitle,
        );
        echo form_input($data);


        // categoryAbstract
        $data = array(
            'name' => 'categoryAbstract',
            'id' => 'categoryAbstract wysiwyg',
            'value' => $categoryAbstract,
        );
        echo form_label('Category Abstract', 'categoryAbstract');
        echo form_error('categoryAbstract');
        echo form_textarea($data);
        // categorySlug
        $data = array(
            'name' => 'categorySlug',
            'id' => 'categorySlug',
            'value' => $categorySlug,
        );
        echo form_label('Category Slug', 'categorySlug');
        echo form_error('categorySlug');
        echo form_input($data);
        // categoryIsSpecial
        /*$data = array(
            'name' => 'categoryIsSpecial',
            'id' => 'categoryIsSpecial',
            'value' => '1',
            'checked' => $checkedSpecial,
        );
        echo form_label('Is Category Special?', 'categoryIsSpecial');
        echo form_error('categoryIsSpecial');
        echo form_checkbox($data);*/
        // categoryOnline
        $data = array(
            'name' => 'categoryOnline',
            'id' => 'categoryOnline',
            'value' => '1',
            'checked' => $checkedOnline,
        );
        echo form_label('Online?', 'categoryOnline');
        echo form_checkbox($data);
        echo form_error('categoryOnline');
        //hidden field check if we are adding or editing
        echo form_hidden('edit', $edit);
        echo form_hidden('categoryId', $categoryId);
        // categorySubmit
        $data = array('class' => 'submit', 'id' => 'submit', 'value'=>'Submit', 'name' => 'categorySubmit');
        echo form_submit($data);
        echo form_close();
    ?>
</div>

FORM PROCESS

function saveCategory() {
    $data = array();
        // we need to set the what element the form errors get displayed in
        $this->form_validation->set_error_delimiters('<div class="formError">', '</div>');
        // we need to estabilsh some rules so the form can be submitted without error,
        // or if there is error then the form needs show errors.
        $config = array(
                    array(
                        'field' => 'categoryTitle',
                        'label' => 'Category title',
                        'rules' => 'required|trim|max_length[25]|xss_clean'
                        ),
                    array(
                        'field' => 'categoryAbstract',
                        'label' => 'Category abstract',
                        'rules' => 'required|trim|max_length[150]|xss_clean'
                        ),
                    array(
                        'field' => 'categorySlug',
                        'label' => 'Category slug',
                        'rules' => 'required|trim|alpha|max_length[25]|xss_clean'
                        ),
                    /*array(
                        'field' => 'categoryIsSpecial',
                        'label' => 'Special category',
                        'rules' => 'trim|xss_clean'
                        ),*/
                    array(
                        'field' => 'categoryOnline',
                        'label' => 'Category online',
                        'rules' => 'trim|xss_clean'
                        )
                );
        $this->form_validation->set_rules($config);
        // with the validation rules set we can no run the validation rules over the form
        // if any the validation returns false then the error messages will be returned to the view
        // in the delimiters that we set further up the page.
        if($this->form_validation->run() == FALSE) {
            // we should reload the form
            $this->load->view('admin/add_category');
        } 
}

Answer 1

You should submit the form using ajax and then render the response in place of the form.

Or you could place an iframe so that the form is loaded inside an iframe.

Answer 2

you can use something like this... if you are using jquery ui tabs...

$('.selector').tabs({ selected: <?=$_POST[selected]?$_POST[selected]:0?> });

then your form, you must have something like,

<input type="hidden" name="selected" value="2" /> // value=2 if you want third tab selected... 0 if first....