⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

modal issue - select 1 record only in edit and update button

Started by , 15 September 2015 - 14:45 PM


Noel Calonia
  • profile picture
  • Member

Posted 15 September 2015 - 14:45 PM

hi guys, i apply the grocery crud operation in a modal view, the problem is when i click the edit and view button, only one data record is display at the view and edit modal view. when i click view and edit at the different data record, it always the same. i cant post picture sample so i can specifically state my problem :(

 

controller/InfoTable.php -> where i put the grocery crud operation to access inside this controller

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Infotable extends CI_Controller {

    function __construct() {
        parent::__construct();
        $this->load->database();
        $this->load->helper('url');
        $this->load->library('grocery_CRUD');
        $this->load->model('grocery_crud_model');
    }

    public function index() {
        $crud = new grocery_CRUD();

        $crud->set_subject('Resident');
        $crud->set_table('resident');
        $crud->set_theme('datatables');
        $crud->columns('name', 'mname', 'lname', 'gender', 'bday', 'age', 'citizenship', 'occupation', 'status', 'purok', 'resAddress', 'perAddress', 'email', 'telNum', 'cpNum');

        $crud->set_primary_key('resident_id', 'resident');
        $crud->unset_export();
        $crud->unset_print();

        $crud->set_crud_url_path('/InfoTable', '/InfoTable');

        $crud->display_as('name', 'First Name')
                ->display_as('mname', 'Middle Name')
                ->display_as('lname', 'Last Name')
                ->display_as('gender', 'Gender')
                ->display_as('bday', 'Birthdate')
                ->display_as('age', 'Age')
                ->display_as('citizenship', 'Citizenship')
                ->display_as('occupation', 'Occupation')
                ->display_as('status', 'Status')
                ->display_as('purok', 'Purok')
                ->display_as('resAddress', 'Residential Address')
                ->display_as('perAddress', 'Permanent Address')
                ->display_as('email', 'Email Address')
                ->display_as('telNum', 'Tel. #')
                ->display_as('cpNum', 'Cellphone #');

        $output = $crud->render();

        $this->_example_output($output);
    }

    public function add() {
        $crud = new grocery_CRUD();

        $crud->set_js('assets/Backend/js/vendor/bootstrap.min.js');
        $crud->set_js('assets/Backend/js/plugins.js');
        $crud->set_js('assets/Backend/js/app.js');
        $crud->set_js('assets/Backend/js/vendor/jquery-2.1.1.min.js');
        $crud->set_css('assets/Backend/css/animate.min.css');
        $crud->set_css('assets/Backend/css/bootstrap.min.css');
        $crud->set_css('assets/Backend/css/main.css');
        $crud->set_css('assets/Backend/css/plugins.css');
        $crud->set_css('assets/Backend/css/themes.css');

        $crud->set_subject('Resident');
        $crud->set_table('resident');
        $crud->set_theme('datatables');
        $crud->set_primary_key('resident_id');

        $crud->set_crud_url_path('/InfoTable/index', '/InfoTable');

        $crud->required_fields('First Name', 'Middle Name', 'Last Name', 'Gender', 'Birthdate', 'Age', 'Citizenship', 'Occupation', 'Status', 'Purok', 'Residential Address', 'Permanent Address', 'Email Address', 'Telephone #', 'Cellphone #');
//        $crud->fields('First Name', 'Middle Name', 'Last Name', 'Gender', 'Birthdate', 'Age', 'Citizenship', 'Occupation', 'Status', 'Purok', 'Residential Address', 'Permanent Address', 'Email Address', 'Telephone #', 'Cellphone #');
        $crud->callback_add_field('Residential Address', function () {
            return '<textarea name="Residential Address" rows="7" cols="50" class="form-control" placeholder="in Full Address Format..."></textarea>';
        });
        $crud->callback_add_field('Permanent Address', function () {
            return '<textarea name="Permanent Address" rows="7" cols="50" class="form-control" placeholder="in Full Address Format..."></textarea>';
        });
        $crud->callback_add_field('Email Address', function () {
            return '<input type="email" name="Email Address" class="form-control" style="width: 300%;"></input>';
        });
        $crud->callback_add_field('Telephone #', function () {
            return '<input type="tel" name="Telephone #" class="form-control" style="width: 300%;"></input>';
        });
        $crud->callback_add_field('Cellphone #', function () {
            return '<input type="tel" name="Cellphone #" class="form-control" style="width: 300%;"></input>';
        });
        $crud->callback_add_field('Gender', function() {
            return '<input type="radio" name="Gender" value="male" /> Male <input type="radio" name="Gender" value="female" /> Female';
        });
        $crud->callback_add_field('Birthdate', function () {
            return '<input type="text" id="example-datepicker4" name="Birthdate" class="form-control input-datepicker" data-date-format="mm-dd-yyyy">';
        });
        $crud->callback_add_field('Status', function () {
            return '<select name="Status" class="form-control select-select2">
                        <option></option>
                        <option value="Single">Single</option>
                        <option value="Married">Married</option>
                        <option value="Separated">Separated</option>
                        <option value="Divorced">Divorced</option>
                        <option value="Widowed">Widowed</option>
                    </select>';
        });

//        $crud->change_field_type('Status', 'dropdown', array('1' => 'Single', '2' => 'Married', '3' => 'Separated', '4' => 'Widowed', '5' => 'Divorced'));
//        $crud->field_type('Status','dropdown',array('1' => 'Single', '2' => 'Married', '3' => 'Separated', '4' => 'Widowed', '5' => 'Divorced'));

        $crud->display_as('name', 'First Name')
                ->display_as('mname', 'Middle Name')
                ->display_as('lname', 'Last Name')
                ->display_as('gender', 'Gender')
                ->display_as('bday', 'Birthdate')
                ->display_as('age', 'Age')
                ->display_as('citizenship', 'Citizenship')
                ->display_as('occupation', 'Occupation')
                ->display_as('status', 'Status')
                ->display_as('purok', 'Purok')
                ->display_as('resAddress', 'Residential Address')
                ->display_as('perAddress', 'Permanent Address')
                ->display_as('email', 'Email Address')
                ->display_as('telNum', 'Telephone #')
                ->display_as('cpNum', 'Cellphone #');

        $output = $crud->render();

        $this->_example_output_crud($output);
    }

    public function insert() {
        $crud = new grocery_CRUD();

        $crud->set_js('assets/Backend/js/vendor/bootstrap.min.js');
        $crud->set_js('assets/Backend/js/plugins.js');
        $crud->set_js('assets/Backend/js/app.js');
        $crud->set_js('assets/Backend/js/vendor/jquery-2.1.1.min.js');
        $crud->set_css('assets/Backend/css/animate.min.css');
        $crud->set_css('assets/Backend/css/bootstrap.min.css');
        $crud->set_css('assets/Backend/css/main.css');
        $crud->set_css('assets/Backend/css/plugins.css');
        $crud->set_css('assets/Backend/css/themes.css');

        $crud->set_subject('Resident');
        $crud->set_table('resident');
        $crud->set_theme('datatables');

        $crud->set_crud_url_path('/InfoTable', '/InfoTable');

//        $crud->required_fields('First Name', 'Middle Name', 'Last Name', 'Gender', 'Birthdate', 'Age', 'Citizenship', 'Occupation', 'Status', 'Purok', 'Residential Address', 'Permanent Address', 'Email Address', 'Telephone #', 'Cellphone #');
//        $crud->add_fields('First Name', 'Middle Name', 'Last Name', 'Gender', 'Birthdate', 'Age', 'Citizenship', 'Occupation', 'Status', 'Purok', 'Residential Address', 'Permanent Address', 'Email Address', 'Telephone #', 'Cellphone #');
//        $crud->set_rules('First Name');
//        $crud->callback_add_field('Residential Address', function () {
//            return '<textarea name="Residential Address" rows="7" cols="50" class="form-control" placeholder="in Full Address Format..."></textarea>';
//        });
//        $crud->callback_add_field('Permanent Address', function () {
//            return '<textarea name="Permanent Address" rows="7" cols="50" class="form-control" placeholder="in Full Address Format..."></textarea>';
//        });
//        $crud->callback_add_field('Email Address', function () {
//            return '<input type="email" name="Email Address" class="form-control" style="width: 300%;"></input>';
//        });
//        $crud->callback_add_field('Telephone #', function () {
//            return '<input type="tel" name="Telephone #" class="form-control" style="width: 300%;"></input>';
//        });
//        $crud->callback_add_field('Cellphone #', function () {
//            return '<input type="tel" name="Cellphone #" class="form-control" style="width: 300%;"></input>';
//        });
//        $crud->callback_add_field('Gender', function() {
//            return '<input type="radio" name="Gender" value="male" /> Male <input type="radio" name="Gender" value="female" /> Female';
//        });
//        $crud->callback_add_field('Birthdate', function () {
//            return '<input type="text" name="Birthdate" class="form-control input-datepicker" data-date-format="mm-dd-yyyy">';
//        });
//        $crud->change_field_type('Status', 'dropdown', array('1' => 'Single', '2' => 'Married', '3' => 'Separated', '4' => 'Widowed', '5' => 'Divorced'));
//
//        $crud->display_as('name', 'First Name')
//                ->display_as('mname', 'Middle Name')
//                ->display_as('lname', 'Last Name')
//                ->display_as('gender', 'Gender')
//                ->display_as('bday', 'Birthdate')
//                ->display_as('age', 'Age')
//                ->display_as('citizenship', 'Citizenship')
//                ->display_as('occupation', 'Occupation')
//                ->display_as('status', 'Status')
//                ->display_as('purok', 'Purok')
//                ->display_as('resAddress', 'Residential Address')
//                ->display_as('perAddress', 'Permanent Address')
//                ->display_as('email', 'Email Address')
//                ->display_as('telNum', 'Telephone #')
//                ->display_as('cpNum', 'Cellphone #');
//
        $output = $crud->render();

        $this->_example_output_crud($output);
    }

    public function edit() {
        $crud = new grocery_CRUD();

        $crud->set_js('assets/Backend/js/vendor/bootstrap.min.js');
        $crud->set_js('assets/Backend/js/plugins.js');
        $crud->set_js('assets/Backend/js/app.js');
        $crud->set_js('assets/Backend/js/vendor/jquery-2.1.1.min.js');
        $crud->set_css('assets/Backend/css/animate.min.css');
        $crud->set_css('assets/Backend/css/bootstrap.min.css');
        $crud->set_css('assets/Backend/css/main.css');
        $crud->set_css('assets/Backend/css/plugins.css');
        $crud->set_css('assets/Backend/css/themes.css');

        $crud->set_subject('Resident');
        $crud->set_table('resident');
        $crud->set_theme('datatables');
//        $crud->set_primary_key('resident_id');

        $crud->set_crud_url_path('/InfoTable/index', '/InfoTable');

        $crud->required_fields('First Name', 'Middle Name', 'Last Name', 'Gender', 'Birthdate', 'Age', 'Citizenship', 'Occupation', 'Status', 'Purok', 'Residential Address', 'Permanent Address', 'Email Address', 'Telephone #', 'Cellphone #');
//        $crud->edit_fields('First Name', 'Middle Name', 'Last Name', 'Gender', 'Birthdate', 'Age', 'Citizenship', 'Occupation', 'Status', 'Purok', 'Residential Address', 'Permanent Address', 'Email Address', 'Telephone #', 'Cellphone #');
//        $crud->callback_edit_field('Residential Address', function () {
//            return '<textarea name="Residential Address" rows="7" cols="50" class="form-control" placeholder="in Full Address Format..."></textarea>';
//        });
//        $crud->callback_edit_field('Permanent Address', function () {
//            return '<textarea name="Permanent Address" rows="7" cols="50" class="form-control" placeholder="in Full Address Format..."></textarea>';
//        });
//        $crud->callback_edit_field('Email Address', function () {
//            return '<input type="email" name="Email Address" class="form-control"></input>';
//        });
//        $crud->callback_edit_field('Telephone #', function () {
//            return '<input type="tel" name="Telephone #" class="form-control"></input>';
//        });
//        $crud->callback_edit_field('Cellphone #', function () {
//            return '<input type="tel" name="Cellphone #" class="form-control"></input>';
//        });
//        $crud->callback_edit_field('Gender', function() {
//            return '<input type="radio" name="Gender" value="male" /> Male <input type="radio" name="Gender" value="female" /> Female';
//        });
//        $crud->callback_edit_field('Birthdate', function () {
//            return '<input type="text" name="Birthdate" class="form-control input-datepicker" data-date-format="yyyy-mm-dd">';
//        });
//        $crud->change_field_type('Status', 'dropdown', array('1' => 'Single', '2' => 'Married', '3' => 'Separated', '4' => 'Widowed', '5' => 'Divorced'));
//         

        $crud->display_as('name', 'First Name')
                ->display_as('mname', 'Middle Name')
                ->display_as('lname', 'Last Name')
                ->display_as('gender', 'Gender')
                ->display_as('bday', 'Birthdate')
                ->display_as('age', 'Age')
                ->display_as('citizenship', 'Citizenship')
                ->display_as('occupation', 'Occupation')
                ->display_as('status', 'Status')
                ->display_as('purok', 'Purok')
                ->display_as('resAddress', 'Residential Address')
                ->display_as('perAddress', 'Permanent Address')
                ->display_as('email', 'Email Address')
                ->display_as('telNum', 'Telephone #')
                ->display_as('cpNum', 'Cellphone #');

        $output = $crud->render();

        $this->_example_output_crud($output);
    }

    public function read() {
        $crud = new grocery_CRUD();

        $crud->set_js('assets/Backend/js/vendor/bootstrap.min.js');
        $crud->set_js('assets/Backend/js/plugins.js');
        $crud->set_js('assets/Backend/js/app.js');
        $crud->set_js('assets/Backend/js/vendor/jquery-2.1.1.min.js');
        $crud->set_css('assets/Backend/css/animate.min.css');
        $crud->set_css('assets/Backend/css/bootstrap.min.css');
        $crud->set_css('assets/Backend/css/main.css');
        $crud->set_css('assets/Backend/css/plugins.css');
        $crud->set_css('assets/Backend/css/themes.css');

        $crud->set_subject('Resident');
        $crud->set_table('resident');
        $crud->set_theme('datatables');

        $crud->set_crud_url_path('/InfoTable', '/InfoTable');

        $crud->display_as('name', 'First Name')
                ->display_as('mname', 'Middle Name')
                ->display_as('lname', 'Last Name')
                ->display_as('gender', 'Gender')
                ->display_as('bday', 'Birthdate')
                ->display_as('age', 'Age')
                ->display_as('citizenship', 'Citizenship')
                ->display_as('occupation', 'Occupation')
                ->display_as('status', 'Status')
                ->display_as('purok', 'Purok')
                ->display_as('resAddress', 'Residential Address')
                ->display_as('perAddress', 'Permanent Address')
                ->display_as('email', 'Email Address')
                ->display_as('telNum', 'Telephone #')
                ->display_as('cpNum', 'Cellphone #');

        $output = $crud->render();

        $this->_example_output_crud($output);
    }

    public function delete() {
        $crud = new grocery_CRUD();

        $crud->set_js('assets/Backend/js/vendor/bootstrap.min.js');
        $crud->set_js('assets/Backend/js/plugins.js');
        $crud->set_js('assets/Backend/js/app.js');
        $crud->set_js('assets/Backend/js/vendor/jquery-2.1.1.min.js');
        $crud->set_css('assets/Backend/css/animate.min.css');
        $crud->set_css('assets/Backend/css/bootstrap.min.css');
        $crud->set_css('assets/Backend/css/main.css');
        $crud->set_css('assets/Backend/css/plugins.css');
        $crud->set_css('assets/Backend/css/themes.css');

        $crud->set_subject('Resident');
        $crud->set_table('resident');
        $crud->set_theme('datatables');

        $output = $crud->render();

        $this->_example_output($output);
    }

    function _example_output($output = null) {
        $this->load->view('Backend/page_ui_tables', $output);
    }

    function _example_output_crud($output = null) {
        $this->load->view('Backend/page_ui_crudOp', $output);
    }

}

grocery_crud/themes/datatables/view/list.php -> where i modify crud buttons to display crud ops inside the modal

<table class="display groceryCrudTable table table-striped table-bordered table-vcenter table-condensed table-responsive table-hover table-featured" id="<?php echo uniqid(); ?>" style="height: 50px">
    <thead>
        <tr>
    <center>
        <?php foreach ($columns as $column) { ?>
            <th><?php echo $column->display_as; ?></th>
        <?php } ?>
        <?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) { ?>
            <th class="text-center actions" title="Actions" data-sortable="false"><i class="fa fa-flash"></i></th>
        <?php } ?>
    </center>
</tr>
</thead>
<tbody>
    <?php foreach ($list as $num_row => $row) { ?>
        <tr id='row-<?php echo $num_row ?>'>
            <?php foreach ($columns as $column) { ?>
                <td><?php echo $row->{$column->field_name} ?></td>
            <?php } ?>
            <?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) { ?>
                <td class="text-center">
                    <?php
                    if (!empty($row->action_urls)) {
                        foreach ($row->action_urls as $action_unique_id => $action_url) {
                            $action = $actions[$action_unique_id];
                            ?>
                            <a href="<?php echo $action_url; ?>" class="edit_button btn btn-small btn-effect-ripple btn-ripple btn-default row col-sm-4 col-xs-4" role="button">
                                <span class="ui-button-icon-primary ui-icon <?php echo $action->css_class; ?> <?php echo $action_unique_id; ?>"></span><span class="ui-button-text">&nbsp;<?php echo $action->label ?></span>
                            </a>
                            <?php
                        }
                    }
                    ?>
                    <?php if (!$unset_read) { ?>
            <!--					<a href="<?php // echo $row->read_url             ?>" class="edit_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
            <span class="ui-button-icon-primary ui-icon ui-icon-document"></span>
            <span class="ui-button-text">&nbsp;<?php // echo $this->l('list_view');               ?></span>
            </a>-->
                        <a href="#modal-fadeView" class="edit_button btn btn-effect-ripple btn-xs btn-primary viewBtn" data-toggle="modal" title="<?php echo $this->l('list_view'); ?>" role="button" style="overflow: hidden; position: relative;">
                            <i class="fa fa-info-circle"></i>
                        </a>
                    <?php } ?>

                    <?php if (!$unset_edit) { ?>
                                                                                                                                                                        <!--					<a href="<?php // echo $row->edit_url             ?>" class="edit_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
                                                                                                                                                                                                                        <span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
                                                                                                                                                                                                                        <span class="ui-button-text">&nbsp;<?php // echo $this->l('list_edit');               ?></span>
                                                                                                                                                                                                                </a>-->
                        <a href="#modal-fadeEdit" class="edit_button btn btn-effect-ripple btn-xs btn-success editBtn" data-toggle="modal" title="<?php echo $this->l('list_edit'); ?>" role="button" style="overflow: hidden; position: relative;">
                            <i class="fa fa-pencil"></i>
                        </a>
                    <?php } ?>
                    <?php if (!$unset_delete) { ?>
            <!--					<a onclick = "javascript: return delete_row('<?php // echo $row->delete_url              ?>', '<?php // echo $num_row             ?>')"
                                href="javascript:void(0)" class="delete_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
                                <span class="ui-button-icon-primary ui-icon ui-icon-circle-minus"></span>
                                <span class="ui-button-text">&nbsp;<?php // echo $this->l('list_delete');               ?></span>
                        </a>-->
                        <a onclick = "javascript: return delete_row('<?php echo $row->delete_url ?>', '<?php echo $num_row ?>')"
                           href="javascript:void(0)" class="delete_button btn btn-effect-ripple btn-xs btn-danger" title="<?php echo $this->l('list_delete'); ?>" role="button">
                            <i class="fa fa-times"></i>
                        </a>
                    <?php } ?>
                </td>
            <?php } ?>
        </tr>
    <?php } ?>
</tbody>
<!--    <tfoot>
    <tr>
<?php foreach ($columns as $column) { ?>
                                    <th><input type="text" name="<?php echo $column->field_name; ?>" placeholder="<?php echo $this->l('list_search') . ' ' . $column->display_as; ?>" class="search_<?php echo $column->field_name; ?>" /></th>
<?php } ?>
<?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) { ?>
                                    <th>
                                        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only floatR refresh-data" role="button" data-url="<?php echo $ajax_list_url; ?>">
                                            <span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span><span class="ui-button-text">&nbsp;</span>
                                        </button>
                                        <a href="javascript:void(0)" role="button" class="clear-filtering ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary floatR">
                                            <span class="ui-button-icon-primary ui-icon ui-icon-arrowrefresh-1-e"></span>
                                            <span class="ui-button-text"><?php echo $this->l('list_clear_filtering'); ?></span>
                                        </a>
                                    </th>
<?php } ?>
    </tr>
</tfoot>-->
</table>

<!--<script type="text/javascript" src="<?php // echo base_url()  ?>assets/Backend/grocery_crud/js/jquery_plugins/jquery.fancybox.pack-2.1.5.js"></script>-->
<script type="text/javascript">
   +++ var editUrl = <?php echo json_encode($row->edit_url); ?>,
            readUrl = <?php echo json_encode($row->read_url); ?>;

    var $ = jQuery.noConflict();

    $(document).ready(function () {
        $(".fancybox").fancybox();
    });
</script>
+++ - the script up there in the first line used to import url of edit and view records in the javascript for button actions by using json_encode();

view/page_ui_crudOp.php -> where the crud operation are display via modal inside <iframe>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <?php foreach ($css_files as $file): ?>
            <link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />

        <?php endforeach; ?>
        <?php foreach ($js_files as $file): ?>

            <script src="<?php echo $file; ?>"></script>
        <?php endforeach; ?>
    </head>
    <body>
        <div class="block full" style="margin:0 0 0px;">
            <div class="block-content-full">
                <?php echo $output; ?>
            </div>
        </div>
    </body>
</html>

assets/Backend/js/pages/uiTables.js -> a AppUI 2.1 js file, where i put the crud button actions when clicked and access through the modal view

/*
 *  Document   : uiTables.js
 *  Author     : pixelcave
 *  Description: Custom javascript code used in Tables page
 */

var UiTables = function () {

    return {
        init: function () {
            /* Initialize Bootstrap Datatables Integration */
            App.datatables();

            /* Initialize Datatables */
            $('#example-datatable').dataTable({
                columnDefs: [{orderable: false, targets: [4]}],
                pageLength: 10,
                lengthMenu: [[5, 10, 20], [5, 10, 20]]
            });

            /* Add placeholder attribute to the search input */
            $('.dataTables_filter input').attr('placeholder', 'Search');

            /* Select/Deselect all checkboxes in tables */
            $('thead input:checkbox').click(function () {
                var checkedStatus = $(this).prop('checked');
                var table = $(this).closest('table');

                $('tbody input:checkbox', table).each(function () {
                    $(this).prop('checked', checkedStatus);
                });
            });

            /* Table Styles Switcher */
            var genTable = $('#general-table');
            var styleBorders = $('#style-borders');

            $('#style-default').on('click', function () {
                styleBorders.find('.btn').removeClass('active');
                $(this).addClass('active');

                genTable.removeClass('table-bordered').removeClass('table-borderless');
            });

            $('#style-bordered').on('click', function () {
                styleBorders.find('.btn').removeClass('active');
                $(this).addClass('active');

                genTable.removeClass('table-borderless').addClass('table-bordered');
            });

            $('#style-borderless').on('click', function () {
                styleBorders.find('.btn').removeClass('active');
                $(this).addClass('active');

                genTable.removeClass('table-bordered').addClass('table-borderless');
            });

            $('#style-striped').on('click', function () {
                $(this).toggleClass('active');

                if ($(this).hasClass('active')) {
                    genTable.addClass('table-striped');
                } else {
                    genTable.removeClass('table-striped');
                }
            });

            $('#style-condensed').on('click', function () {
                $(this).toggleClass('active');

                if ($(this).hasClass('active')) {
                    genTable.addClass('table-condensed');
                } else {
                    genTable.removeClass('table-condensed');
                }
            });

            $('#style-hover').on('click', function () {
                $(this).toggleClass('active');

                if ($(this).hasClass('active')) {
                    genTable.addClass('table-hover');
                } else {
                    genTable.removeClass('table-hover');
                }
            });
            // add button button action
            $(".addBtn").click(function () {
                $('#addFrame').attr('src', "/InfoTable/add");
            });
            // edit button button action
            $(".editBtn").click(function (e) {
                $('#editFrame').attr('src', editUrl);
                e.preventDefault();
            });
            // view button button action
            $(".viewBtn").click(function (e) {
                $('#viewFrame').attr('src', readUrl);
                e.preventDefault();
            });

            $('#viewFrame').load(function () {
                $('#viewFrame').height($('#viewFrame').contents().height());
            });

            $('#editFrame').load(function () {
                $('#editFrame').height($('#editFrame').contents().height());
            });

            $('#addFrame').load(function () {
                $('#addFrame').height($('#addFrame').contents().height());
            });
        }
    };
}();

sorry for the long post, hope this sources is enough to get my point and any idea with this is heavenly appreciated. thanks in advance :)