Loaded scripts are available only with delay

[fairking]

Only after some certain delay scrips ara available for use in mounted method. E.g.

head: {
			style: [
				{ type: 'text/css', src: 'stimulsoft/stimulsoft.designer.office2013.whiteblue.css' },
				{ type: 'text/css', src: 'stimulsoft/stimulsoft.viewer.office2013.whiteblue.css' }
			],
			script: [
				{ type: 'text/javascript', src: 'stimulsoft/stimulsoft.reports.js' },
				{ type: 'text/javascript', src: 'stimulsoft/stimulsoft.viewer.js' },
				{ type: 'text/javascript', src: 'stimulsoft/stimulsoft.designer.js' }
			]
		},
mounted() {
    // Version 1 (Not Working, Error: Cannot read property 'Designer' of undefined")
    this.$on('okHead', function () {
        this.stiInit();
    });
    // Or Version 2 (Working)
    this.$on('okHead', function () {
        setTimeout(this.stiInit, 1000);
    });
},
methods: {
    stiInit() {
        var options = new window.Stimulsoft.Designer.StiDesignerOptions(); 
        var designer = new window.Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
    }
}

Is there any way to solve that problem without using the delay?

[ktquez]

Hi @fairking,

The okHead event alerts you that the elements have been created, but does not guarantee that the scripts are loaded, so I think you will need the delay.

---

Or you can try the onload event, for example:

{ type: 'text/javascript', id: 'stimulsoft-designer', src: 'stimulsoft/stimulsoft.designer.js' }

// ...

this.$on('okHead', function () {
  const sd = document.getElementById('stimulsoft-designer')
  sd.onload = this.stiInit
})

Note: I haven't tested it to see if the code above works, but it can.

---

Thanks for using.

[fairking]

Tried, something is not working https://github.com/fairking/stimulsoft-demo

[OvidijusParsiunas]

This approach has worked for me, check the live example here: https://stackblitz.com/edit/vue2-vue-cli-2rdjuu?file=src%2FApp.vue