Hi Guys, i have a small problem in TS. Something is not working as expected... This is just a piece

giovanni.piemontese

Hi Guys, i have a small problem in TS. Something is not working as expected...
This is just a piece of ts script where the problem is located

async render(): Promise<void> {
        debug(this.stepEngineCode, '...fetchOnLoad');
        const response = await this.ajaxProviderRender.fetch();

        if (!response) {
            return;
        }

        if (this.ajaxContainerRender) {
            this.ajaxContainerRender.innerHTML = response;
            await mount();
            this.stepEngineForm = <HTMLFormElement>this.getElementsByClassName(`${this.jsName}__form`)[0];
//this.stepEngineForm is here undefined -> why?
            this.mapStepEngineFormEvents();
        }
    }

After put the response in container and re-mount the components my selector (this.stepEngineForm .....) just is always undefined even if (i checked 1000times) the selector is correct and everything is fine... Due the undefined variable cannot be bind events to the form fetched...

This function render just render a form on-load of page... in the case i disable the fetchonLoad, the form is direclty rendered from twig and the same selector present in readyCallback function works and the events are properly mapped..

I see that Spryker has in Core a similar case about quick-order-form (vendor/spryker-shop/quick-order-page/src/SprykerShop/Yves/QuickOrderPage/Theme/default/components/molecules/quick-order-form/quick-order-form.ts:95 ) and it works as expected...
The code is very similar... but on my script just does not work..

Can anyone maybe help me? Thanks in advance.

giovanni.piemontese

guys, i found it... an error in html fetched content... sorry!

Yuriy Gerton

Hello Giovanni.
A little advice in code adjustment:

if (!response || !this.ajaxContainerRender) {
    return;
}

this.ajaxContainerRender.innerHTML = response;
await mount();
this.stepEngineForm = <HTMLFormElement>this.getElementsByClassName(`${this.jsName}__form`)[0];
this.mapStepEngineFormEvents();