KTL is causing issues with existing Javascript

[JonathanRumsey]

I am new to Javascript so apologies upfront if I am doing something wrong. I have the below existing JS that creates a total box and works fine. When I Load KTL all the variables stop working. Any ideas what I am doing wrong?

$(document).on('knack-page-render.scene_65', function(scene) {

const totalcostprice = $('.view_107 .kn-table-totals td:nth-child(7) strong').text();
const totalquoteprice = $('.view_107 .kn-table-totals td:nth-child(8) strong').text();
const totalsellprice = $('.view_107 .kn-table-totals td:nth-child(14) strong').text();
const totalsellpriceeuro = $('.view_107 .kn-table-totals td:nth-child(15) strong').text();
const currency = $('.view_101 .field_501 .kn-detail-body span span').text()

const subtotalsHTML = `
  <div class="totalsBox">
    <div class="invoice-totals">
      <div class="Costprice">
        <span class="label">Total Cost Price:</span>
        <span class="value">${totalcostprice}</span>
      </div>
      <div class="quoteprice">
        <span class="label">Total Quote Price:</span>
        <span class="value">${currency}${totalquoteprice}</span>
      </div>
      <div class="eurosellprice">
        <span class="label">VAT Total:</span>
        <span class="value">${currency}${totalsellprice}</span>
      </div>
      <div class="gbpsellprice">
        <span class="label">Total inc. VAT:</span>
        <span class="value">${currency}${totalsellpriceeuro}</span>
      </div>
    </div>
  </div>
`;

$('.totalsBox').remove();
$('.view_107').append(subtotalsHTML);

});

[CSWinnall]

Hi @JonathanRumsey

It could be a number of things here.

Could you post your KTL code from the builder (Anything you have added from KTL).

Could you post any Keywords from view_107

Craig

[JonathanRumsey]

Hi @CSWinnall

I did try a few different ways, standard KTL Loader, KTL configurator and slowly reduce the features, and finally KTL_AllDisabled.js. Currently I have the following:

KnackInitAsync = function ($, callback) { // Load the Knack Toolkit Library (KTL)
    (window.LazyLoad = LazyLoad) && LazyLoad.js([`https://ctrnd.s3.amazonaws.com/Lib/KTL/KTL_Start.js?${new Date().valueOf()}`], () => {
        loadKtl($, callback, (typeof KnackApp === 'function' ? KnackApp : null), '' /*KTL version, leave blank to get latest*/, 'min'/*min or full*/);
    })
};

There are no keywords for view_107.

I did notice that if I update an field within view_107 then all variables work, until I refresh the page.

Thanks,
Jonathan

[CSWinnall]

Just to confirm you have the KTL_AllDisabled.js code in your builder?

[JonathanRumsey]

Currently, I have the KTL_Loader.js

[CSWinnall]

Please add the KTL disabled code just under the loader. Then move all your existing code to just under the line Your App Specific Code goes here...

//Your app's version.
window.APP_VERSION = '1.0.0';

window.ktlReady = function (appInfo = {}) {
    var ktl = new Ktl($, appInfo);

    //KTL Setup - BEGIN
    ktl.scenes.setCfg({
        versionDisplayName: '', //Short version of your app name. Leave empty to hide it. Comment whole line for actual app name.
    })

    ktl.core.setCfg({
        developerNames: ['Firstname Lastname'], //Add your name here to get super powers!

        //Main KTL feature switches.  Here is where your App can override the defaults and enable/disable the features.
        enabled: {
            //"Basic" features
            //Enabled by default. To disable them, their flag must exist and be set to false.
            versionInfo: {
                viShowAppInfo: false,
                viShowKtlInfo: false,
                viShowToRoles: ['Developer'], //Array of Account Roles strings who can see the version info bar. Leave empty for all.
                viPosX: 'right', //right, center, left
                viPosY: 'top', //top, bottom
                viPosXMobile: 'center', //right, center, left
                viPosYMobile: 'bottom', //top, bottom
                viOpacity: 50, //0 to 100
                viOpacityHover: 100, //0 to 100
            },

            showMenuInTitle: false,
            selTextOnFocus: false,
            inlineEditColor: false,
            rowHoverHighlight: false,
            chznBetter: false,
            autoFocus: false,
            sortedMenus: false,
            userFilters: false,
            persistentForm: false,
            calendarGotoDate: false,
            rememberMe: false,
            formPreValidation: false,
            spinnerWatchDog: false,
            idleWatchDog: false,
            debugWnd: false,
            devInfoPopup: false,

            //Those below must also be set up properly to have any effect.  See documentation.
            iFrameWnd: false,

            bulkOps: {
                bulkEdit: false,
                bulkCopy: false,
                bulkDelete: false,
            },
        },
    })

    ktl.views.setCfg({
        headerAlignment: false,
    })

    ktl.fields.setCfg({
        convertNumToTel: false,
    })

    //KTL Setup - END


    //KTL callbacks to your App - BEGIN
    //KTL callbacks to your App - END

    /////////////////////////////////////////////////
    //Your App-specific code goes here...

}

[JonathanRumsey]

I have added KTL disabled code, unfortunately the same issue.

[CSWinnall]

Hi @JonathanRumsey

I would also suggest that you change from a page render to a view render here. The reason for this is if the view ever gets refreshed your code won't run. The scene only ever renders once but the view can refresh multiple times.
Try using this code:

// View Render 107 -  > 
    $(document).on('knack-view-render.view_107', async function (_, {key: viewId}) {
        const viewElement = $(`#${viewId}`);

        const totalcostprice = viewElement.find('.kn-table-totals td:nth-child(7) strong').text();
        const totalquoteprice = viewElement.find('.kn-table-totals td:nth-child(8) strong').text();
        const totalsellprice = viewElement.find('.kn-table-totals td:nth-child(14) strong').text();
        const totalsellpriceeuro = viewElement.find('.kn-table-totals td:nth-child(15) strong').text();

        let currency = '';
        try {
            currency = await ktl.core.waitSelector('#view_101 .field_501 .kn-detail-body span span').then(() => {
                return $('#view_101 .field_501 .kn-detail-body span span').text();
            });

           const subtotalsHTML = `
            <div class="totalsBox">
                <div class="invoice-totals">
                <div class="Costprice">
                    <span class="label">Total Cost Price:</span>
                    <span class="value">${totalcostprice}</span>
                </div>
                <div class="quoteprice">
                    <span class="label">Total Quote Price:</span>
                    <span class="value">${currency}${totalquoteprice}</span>
                </div>
                <div class="eurosellprice">
                    <span class="label">VAT Total:</span>
                    <span class="value">${currency}${totalsellprice}</span>
                </div>
                <div class="gbpsellprice">
                    <span class="label">Total inc. VAT:</span>
                    <span class="value">${currency}${totalsellpriceeuro}</span>
                </div>
                </div>
            </div>
        `;

        $('.totalsBox').remove();
        viewElement.append(subtotalsHTML);
        } catch (error) {
            console.error('Error getting currency:', error);
        }
    });

[JonathanRumsey]

Thank you for the advice, I made the change and it also has the same issue.