unsetAutoloadJavaScript

unsetAutoloadJavaScript(void)

Unset the initial load of the GroceryCRUD so we can load it dynamically. That simply means that the Grocery CRUD will NOT load if we will not call it manually from the JavaScript code.

Important note: To enable JavaScript events, please be aware that you need to set the configuration value "publish_events" to true. If this value is left as the default false, the events will not be triggered, so make sure to update it accordingly.

Example

For example the below code:

$crud->setTable('customers');
$crud->setSubject('Customer', 'Customers');
$crud->unsetAutoloadJavaScript();

$output = $crud->render();

// Add a custom JavaScript file to load Grocery CRUD
$output->js_files[] = '/assets/js/custom-gc-load.js';

will output everything that it is necessary for Grocery CRUD but without the initial load. The initial call will need to be manually triggered through the code:

(JavaScript)

groceryCrudLoader(document.querySelectorAll(".grocery-crud")[0]);

So if in our example we create a button like this:

(JavaScript)

// custom-gc-load.js
$(document).ready(function () {
    $('.load-grocery-crud-button').click(function () {
        groceryCrudLoader(document.querySelectorAll(".grocery-crud")[0]);
        $('.load-grocery-crud-button').fadeOut();
    });
});

(HTML)

<button class="load-grocery-crud-button">Press Button to load GroceryCRUD</button>

A full example will be:

$(document).ready(function () {

    groceryCrudLoader(document.querySelectorAll(".grocery-crud")[0], {
        callbackBeforeInsert: function (currentForm) {
            console.log('callback that is called right before the insert');
        },
        callbackBeforeUpdate: function (currentForm) {
            console.log('callback that is called right before the update');
        },
        callbackAfterInsert: function (currentForm) {
            console.log('callback that is called right after a successful insert');
        },
        callbackAfterUpdate: function (currentForm) {
            console.log('callback that is called right after a successful update');
        },
        callbackBeforeDelete: function(itemIds) {  // itemIds variable is always an array
            console.log('callback that is called right before the confirmation of the delete is pressed');
        },
        callbackAfterDelete: function(itemIds) { // itemIds variable is always an array
            console.log('callback that is called right after a successful delete operation');
        },
        onRowUpdate: function (primaryKeyField) { // When the row is getting updated (e.g. it is not re-rendered)
            console.log('row updated for:' + primaryKeyField);
        },
        onRowUnmount: function (primaryKeyField) { // When the row is getting removed (e.g. to destroy an instance)
            console.log('row was unmounted for:' + primaryKeyField);
        },      
        actionButtons: [{
         iconCssClass: 'fa fa-smile-o',
         label: 'Smiley',
         onClick: function (primaryKeyValue) {
             console.log('Smiley is clicked with primary key:' + primaryKeyValue);
         }
        }],
        actionButtonsMultiple: [{
          iconCssClass: 'fa fa-smile-o',
          label: 'Smiley',
          onClick: function ({selectedIds}) {
            console.log('Smiley selected ids: ' + selectedIds);
          }
        }],
        // addFields, editFields, cloneFields and readFields works only
        // with the combination of: 
        // callbackAddField for addFields
        // callbackEditField for editFields... e.t.c.
        addFields: [ // works with $crud->callbackAddField
            {
                fieldName: 'contact_last_name',
                onMount: function onMount() {
                    console.log('on mount!!');
                },
                onUnmount: function onUnmount() {
                    console.log('hmmm unmount');
                }
            }
        ],
        editFields: [ // works with $crud->callbackEditField
            {
                fieldName: 'contact_last_name',
                onMount: function onMount() {
                    console.log('on mount!!');
                },
                onUnmount: function onUnmount() {
                    console.log('hmmm unmount');
                }
            }
        ],
        cloneFields: [ // works with $crud->callbackCloneField
            {
                fieldName: 'contact_last_name',
                onMount: function onMount() {
                    console.log('clone on mount!!');
                },
                onUnmount: function onUnmount() {
                    console.log('clone on unmount');
                }
            }
        ],
        readFields: [ // works with $crud->callbackReadField
            {
                fieldName: 'contact_last_name',
                onMount: function onMount() {
                    console.log('read on mount!!');
                },
                onUnmount: function onUnmount() {
                    console.log('read on unmount');
                }
            }
        ]
    });
});