⚠ 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

Custom edit/add/read/etc form



genya
  • profile picture
  • Member

Posted 03 June 2019 - 14:44 PM

Hey everyone! Thank you Johnny for this amazing GroceryCrud!

 

I would like to share an extension to the library, I attached the file named Grocery_CRUD_mod.php. Please be aware I am still using library 1.6.1, and do not know how it would transfer to other versions or the latest version 1.6.3.

 

This extension allows for rendering a completely custom form when clicking on your add_action button. It works by adding a custom state and then you can route the add_action url to that state, and have a validation url function and a final database insert/update/etc url function to the state. You can also add a callback function to the add_state that will pass additional data to the form before rendering it.

 

my_controller:

	public function update_validate($pri_key=null)
	{
		$post_data = $this->input->post();
		
		$validation_result = (object)array('success'=>false);
		
		$validation_result->error_message = "yo yo error msg";
		$validation_result->success_message = "yo yo success msg <br /><br /><br />";
		$validation_result->error_fields = array('field1' => 'field1 error', 'field2' => 'field2 error');

		echo json_encode($validation_result);
		die();	
	}
	
	public function additional_data($primary_key)
	{
		$output = array();
		
		$output['query_results'] = $this->db->query('SOME QUERY')->result_array();
		
		$output['another_variable'] = "additional data here";
		
		return $output;
	}
	
	public function table()
	{
 		$crud = new grocery_CRUD_mod();
		
		$crud->set_crud_url_path(site_url(strtolower(__CLASS__."/".__FUNCTION__)),site_url(strtolower(__CLASS__."/table")));
		
		// make sure the state_name 'custom_edit' and the url for the add_action are the same 'my_controller/table/custom_edit'
		$crud->add_state('custom_edit', 'custom_edit_form.php', 'update_validate', NULL, array($this, 'additional_data'));
		
		$crud->add_action('My Custom Edit', '', 'my_controller/table/custom_edit', 'ui-icon-plus custom-action'); 
                // custom-action css class is for modal dialog box	
		
		$crud->set_table('table');
		$crud->columns('col1', 'col2', 'col3');
		
		$output = $crud->render();

		$this->load->view('my_view.php', $output);
	}

custom_edit_form.php:

(I am using flexigrid theme. This file does have to be in assets/grocery_crud/themes/'theme you are using'/views/)

<?php

    $this->set_css($this->default_theme_path.'/flexigrid/css/flexigrid.css');

    $this->set_js_lib($this->default_javascript_path.'/jquery_plugins/jquery.form.min.js');
    $this->set_js_config($this->default_theme_path.'/flexigrid/js/flexigrid-edit.js');

    $this->set_js_lib($this->default_javascript_path.'/jquery_plugins/jquery.noty.js');
    $this->set_js_lib($this->default_javascript_path.'/jquery_plugins/config/jquery.noty.config.js');
?>

<div class="flexigrid crud-form" style='width: 100%;' data-unique-hash="<?php echo $unique_hash; ?>">
    <div class="mDiv">
        <div class="ftitle">
            <div class='ftitle-left'>
                <?php echo $this->l('form_edit'); ?> <?php echo $subject?>
            </div>
            <div class='clear'></div>
        </div>
        <div title="<?php echo $this->l('minimize_maximize');?>" class="ptogtitle">
            <span></span>
        </div>
    </div>
<div id='main-table-box'>


    <div class='form-div'>
    <?php echo form_open( 'my_controller/update_validate/'.$primary_key, 'method="post" id="crudForm"  enctype="multipart/form-data"'); ?>
    
            my custom form!

            Some of my additional vars from additional_data function callback
            <?php

            echo $additional_data['another_variable'];

            ?>

        <?php if ($is_ajax) { ?><input type="hidden" name="is_ajax" value="true" /><?php }?>
        <div id='report-error' class='report-div error'></div>
        <div id='report-success' class='report-div success'></div>
    </div>
    <div class="pDiv">
        <div class='form-button-box'>
            <input  id="form-button-save" type='submit' value='<?php echo $this->l('form_update_changes'); ?>' class="btn btn-large"/>
        </div>
<?php     if(!$this->unset_back_to_list) { ?>
        <div class='form-button-box'>
            <input type='button' value='<?php echo $this->l('form_update_and_go_back'); ?>' id="save-and-go-back-button" class="btn btn-large"/>
        </div>
        <div class='form-button-box'>
            <input type='button' value='<?php echo $this->l('form_cancel'); ?>' class="btn btn-large" id="cancel-button" />
        </div>
<?php     } ?>
        <div class='form-button-box'>
            <div class='small-loading' id='FormLoading'><?php echo $this->l('form_update_loading'); ?></div>
        </div>
        <div class='clear'></div>
    </div>
    <?php echo form_close(); ?>
</div>
</div>
<script type="text/javascript">    
    var validation_url = '<?php
        $my_controller_pos = strpos($list_url, 'my_controller');
        $my_controller_len = strlen('my_controller');
        $base_path = substr($list_url, 0, ($my_controller_pos + $my_controller_len));
        
        echo $base_path . '/update_validate/' . $primary_key;
    ?>';
    var list_url = '<?php echo $list_url?>';

    var message_alert_edit_form = "<?php echo $this->l('alert_edit_form')?>";
    var message_update_error = "<?php echo $this->l('update_error')?>";
</script>

The js validation_url variable needs to be taken from the php variables and passed to the view, that is a future improvement.

 

 

Also the 'custom-action' css class is for rendering a modal dialog box. I am not sure how to properly 'extend' to not modify the javascript files, but if you need the modal dialog box to pop up for your custom actions

in assets/grocery_crud/js/common/list.js these changes have to be made:

 

From:

$('.edit_button,.add_button').unbind('click');
$('.edit_button,.add_button').click(function(){

To:

$('.edit_button,.add_button,.custom-action').unbind('click');
$('.edit_button,.add_button,.custom-action').click(function(){

I hope this helps, and please give me feedback if possible.