Target a Block in vtiger to insert a new block using jQuery

Question

I have written a Jquery code to target a module and insert a new block with certain parameters. But unfortunately, i noticed that the block doesn't appear but when i use the developer tools in browser and goto the network area, i can see the data that i wish to display but doesn't appear in the UI.

I don't know what else to do.

Here is the code;

jQuery(document).ready(function () {
    var sPageURL = window.location.search.substring(1);
    var targetModule = '';
    var targetView = '';
    var sourceModule = '';
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == 'module') {
            targetModule = sParameterName[1];
        }
        else if (sParameterName[0] == 'view') {
            targetView = sParameterName[1];
        }
        else if (sParameterName[0] == 'sourceModule') {
            sourceModule = sParameterName[1];
        }
    }

    if (targetModule == 'LayoutEditor') {
        // Check enable
        var params = {};
        params.action = 'ActionAjax';
        params.module = 'RelatedBlocksLists';
        params.mode = 'checkEnable';
        app.request.post({data:params}).then(
            function (err,data) {
                if (err == null && data.enable == '1') {
                    if(sourceModule == '') {
                        sourceModule = jQuery('[name="layoutEditorModules"]').val();
                    }
                    var addCustomBlockButton = jQuery('.addCustomBlock');
                    var relatedBlocksListsButtons=jQuery('<button style="margin-left:5px" data-url="index.php?module=RelatedBlocksLists&view=MassSettingsAjax&mode=showSettingsForm&type=block&sourceModule=' + sourceModule + '" type="button" class="btn addButton btnRelatedBlocksLists"><i class="fa fa-plus"></i>&nbsp; Add Related Block</button><button style="margin-left:5px" data-url="index.php?module=RelatedBlocksLists&view=MassSettingsAjax&mode=showSettingsForm&type=list&sourceModule=' + sourceModule + '" type="button" class="btn addButton btnRelatedBlocksLists"><i class="fa fa-plus"></i>&nbsp; Add Related List</button>');
                    addCustomBlockButton.after(relatedBlocksListsButtons);

                    // Add related block settings
                    /*var moduleBlocks = jQuery('#moduleBlocks');
                    moduleBlocks.append('<div id="RelatedBlocksLists_Blocks"></div>');*/
                    var instance = new RelatedBlocksLists_Manager_Js();
                    instance.registerEvents();
                }
            }
        );
    }
/**************************customized***********************/
    var module = jQuery(document).find('input[name="module"]').val();

    var container = jQuery(document).find('form');

    if (module == 'Jobs' && container.attr('id') == 'EditView') {
    var after_block_label = 'Jobs Information'
    var preBlock = jQuery(".fieldBlockContainer .fieldBlockHeader:contains('" + after_block_label + "')").first().closest(".fieldBlockContainer");  
    var containerEditView = jQuery('#EditView');
    containerEditView.on(Vtiger_Edit_Js.referenceSelectionEvent, 'input[name="cf_accounts_id"]', function(e, data) {
            var accountsRecordID = $('[name^="cf_accounts_id"]').val();

            var progressIndicatorElement = jQuery.progressIndicator();
            var editParams = {};

        /***--------------------------------------***/

            editParams['module'] = 'RelatedBlocksLists';
            editParams['record'] = accountsRecordID;
            editParams['view'] = 'PassActionAjax';
            editParams['mode'] = 'generateRelatedDetailView';
            editParams['blockid'] = 5;
            editParams['source_module'] = 'Accounts';
            editParams['view_mode'] = 'edit';

            AppConnector.request(editParams).then(
                function(data) {
                    if (data) {
                        progressIndicatorElement.progressIndicator({'mode' : 'hide'});
                        $(".AccountRelatedRecord").remove();
                        preBlock.after(data);
                        
                    }
                }
            );

        });

//on edit load automaticaly
        jQuery(document).ready(function () {
            var accountsRecordID = $('[name^="cf_accounts_id"]').val();

        if(accountsRecordID !=""){
        var progressIndicatorElement = jQuery.progressIndicator();
        var editParams = {};

        /***--------------------------------------***/

        editParams['module'] = 'RelatedBlocksLists';
        editParams['record'] = accountsRecordID;
        editParams['view'] = 'PassActionAjax';
        editParams['mode'] = 'generateRelatedDetailView';
        editParams['blockid'] = 5;
        editParams['source_module'] = 'Accounts';
        editParams['view_mode'] = 'edit';

        AppConnector.request(editParams).then(
            function(data) {
                if (data) {
                    progressIndicatorElement.progressIndicator({'mode' : 'hide'});
                    $(".AccountRelatedRecord").remove();
                    preBlock.after(data);
                }
            }
        );
        }
        });


} //end of if view checking 
/**********************************/

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

function getRecord(str)
{
var vars = [], hash;
    var hashes = str.split('&');

    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

//select detail view if true
if (getUrlVars()["module"] == 'Jobs' && getUrlVars()["view"] == 'Detail') {

var preBlock = jQuery(".detailview-table:first");

var relRecord = $("[title*='Customer']").attr('href');
var accountsRecordID = getRecord($("[title*='Customer']").attr('href'))['record'];

var progressIndicatorElement = jQuery.progressIndicator();

var params = {};
params['module'] = 'RelatedBlocksLists';
params['record'] = accountsRecordID;
params['view'] = 'PassActionAjax';
params['mode'] = 'generateRelatedDetailView';
params['blockid'] = 5;
params['source_module'] = 'Accounts';

AppConnector.request(params).then(
    function(data) {
        if (data) {
            progressIndicatorElement.progressIndicator({'mode' : 'hide'});
            $(".AccountRelatedRecord").remove();
            preBlock.after(data);
        }
    }
);



}//end of detail view
/**********************************/


function waitUntil(waitFor, toDo) {
    if (waitFor()) {
        toDo();
    } else {
        setTimeout(function() {
            waitUntil(waitFor, toDo);
        }, 300);
    }
}


/**************************end customized***********************/
});

I have tried tweaking the code in many ways but still result in the same thing. Not displaying the new block in Vtiger UI on in the browser developer tools > network area.

This code used to work in an older vtiger version (6.5). But not in this 7.4 I am using at the moment.