Tutorial : How to Add javascript control in the modal form

Hello all,

First exscuse me for my bad english I'm french.

So, often we must add some javascript in the modal form, to add some calculation, control on the field, etc...

It's possible with GC entreprise, it's easy, but even all is in the documentation, it's not so clear.

For my sample, I will add a little counter to count the number of letter in a field. It's convenient to avoid the possibility to destroy the design. But if it's necessary the user can type more charactere.

In my case the field name in my database is alarm. it's just a field text in the table alarms.

We need to add a div with the id counter in the form before the field, and add a little javascript program to count.

The difficulty is that the form is not in the DOM before the modal is displayed.

So how we can achieve this. In fact it's easy.

The exemple is write with CodeIgniter because it's my framework.

First I write my public Function alarms

public function alarms()
        {

        $crud = $this->_getGroceryCrudEnterprise();
        $crud->setTable('alarms');
        $crud->setSubject('Alarms, 'Alarms');
        $crud->columns(['alam']);
        $crud->setLanguage('French');
        $crud->unsetPrint();
        $crud->unsetExport();

       /* here I add my div counter in the add form, it's necessary even you not need any modification in the form, the standard class is "form-control" the field name is the name of your field */
$crud->callbackAddField('alarm', function () {
            return '<div class="counter" id="counter">200</div><textarea class="form-control" name="alarm" id="alarm"></textarea>';
        });

/* here I add my div counter in the edit form, it's necessary even you not need any modification in the form, don't forget to get the $fieldvalue variable to edit the field*/
$crud->callbackEditField('alarm', function ($fieldValue) {
            return '<div class="counter" id="counter">200</div><textarea class="form-control" name="alarm" id="alarm">'.$fieldValue.'</textarea>';
        });

// here we diable the automatic load of grocerycrud
$crud->unsetAutoloadJavaScript();
        $output = $crud->render();

//here we add the custom javascript file counter.js
        $output->js_files[] = base_url() . "assets/js/counter.js"; // javascript file stored in /assets/js/counter.js
        //var_dump($output);

//and we display normaly, as you see I insert a custom menu in my admin,

        $this->_header_admin_output($output);
        $this->load->view('admin_menu_v');
        $this->_admin_output($output);
        $this->_footer_admin_output($output);
        }

Now, as grocery-crud is not launched because $crud->unsetAutoloadJavaScript();

our javascript must launch grocery-crud after load.

So our javascript file counter.js here :

We launch groceryCrud when the document is ready

$(document).ready(function () {
    $('.gc-container').groceryCrud({
         // addFields, editFields, cloneFields and readFields works only
       // with the combination of:
       // callbackAddField for addFields
       // callbackEditField for editFields... e.t.c.

//add your custom function on mount for addfield and edit field

// in my test all the form is loaded in the dom so you can use your function to deal with all the field modified by callbackEditField

respectively callbackAddField.

       addFields: [ // works with $crud->callbackAddField
            {
                fieldName: 'alarm',
                onMount: function onMount() {
                countered();
                },
                onUnmount: function onUnmount() {
                  }
            }
       ],
                editFields: [ // works with $crud->callbackAddField
            {
                fieldName: 'alarm',
                onMount: function onMount() {
                       countered();
                },
                onUnmount: function onUnmount() {
                       }
            }
       ]
   });


});

countered(); // update counter at first launch
$('#counter').keyup(function(){ countered()}); // event to count the field alarm at each Keyup

It's all, that work like a charm. It's not very complicated, but the logic is not easy to understand the first time.

There is more explanation, in the documentation.

I hope this help .

Tutorial : How to Add javascript control in the modal form

nunenthal