jquery tabs with form help

Posted by sico87 on Stack Overflow See other posts from Stack Overflow or by sico87
Published on 2010-03-17T09:36:30Z Indexed on 2010/03/17 9:41 UTC
Read the original article Hit count: 327

Filed under:
|
|
|
|

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');
        } 
}

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui