• Documentation
• unsetAutoloadJavaScript

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.

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)

$('.gc-container').groceryCrud();

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 () {
         $('.gc-container').groceryCrud({
            openInModal: false,
            hashEvents: false,
         });
     $('.load-grocery-crud-button').fadeOut();
    });
});

(HTML)

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

It will output the below result:

So far we have two options that you can add at the groceryCRUD JavaScript function:

1. The option: openInModal that will enable or disable (default is enabled) the form to open in modal. Instead it will run at it's own page.
2. The option: hashEvents that will enable or disable the hashtag from the URLs (really useful if other applications are also using the hashtag at the URL and you have conflicts
3. The option: actionButtons that it is an array with three options:
   • iconCssClass
   • label
   • actionCallback

An example will be:

$(document).ready(function () {

    $('.gc-container').groceryCrud({
        openInModal: false, // Prevent forms to open in modal. (Default = true)
        hashEvents: false, // Remove the hash events from the URL (Default = true)
        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');
        },
        onRowMount: function (primaryKeyField) { // When the row loads for the very first time
            console.log('row mounted for:' + primaryKeyField);
        },
        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);
         }
        }],
        // 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');
                }
            }
        ]
    });
});