External widget include into ionic app

#1

I have developed app using ionic 3. I need to display FXStreet’s Economic Calendar Pro widget into my application home page. For this I have done as like below, I have added this code into my src/index.html

<script type="text/javascript">
        var fxcalendar_config = {
            host: "http://calendar.fxstreet.com",
            css: 'mini',
            rows: 7,
            pastevents: 0,
            hoursbefore: 1,        
            timezone: 'India Standard Time',
            showcountryname: 'true',
            columns: 'date,time,country,event,previous,volatility,actual',
            isfree: 'true',
            countrycode: 'JP:EMU,UK,US',
            culture:'en-US'
        };
    </script>
    <script type="text/javascript" src="http://calendar.fxstreet.com/scripts/mini"></script>

And added the below code into src/pages/home/home.html

<ion-grid>
  <ion-row>
    <ion-col>
        <div id="fxst_calendar" class="last-table" style="position: relative; width: 100%; overflow: auto; margin-bottom: 10px;"></div>
    </ion-col>
 </ion-row>
 </ion-grid>

This is working in ionic lab(when i check in browser). But not displaying in real device. This home.html code will display the out put of FXStreet’s Economic Calendar. Could you please help anyone to solve this issue. This is working in ionic 1 application, not working in ionic 2 based apps.

stackoverflowq
stackoverflowq.png321×559 30.1 KB

#2

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools:
https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools:
https://ionic.zone/debug/remote-debug-your-app#android
Look at the console and network tabs for errors.

#3

@Sujan12 I had check in remote debug there is no error showing on this. And also It seams first time loading and hiding automatically.

#4

So does it load the file? Can you see the network requests? Can you inspect the HTML code in the (probably) iFrame it generates?

#5

I have to add this below code,
I have added this inside my src/index.html

<script type="text/javascript">
		var fxcalendar_config = {
			host: "http://calendar.fxstreet.com",
			css: 'mini',
			rows: 7,
			pastevents: 0,
			hoursbefore: 1,        
			timezone: 'India Standard Time',
			showcountryname: 'true',
			columns: 'date,time,country,event,previous,volatility,actual',
			isfree: 'true',
			countrycode: 'JP:EMU,UK,US',
			culture:'en-US'
		};
	</script>
	<script type="text/javascript" src="http://calendar.fxstreet.com/scripts/mini"></script>

Then I have added the code inside my page src/pages/globaldata.html
<div id="fxst_calendar" class="last-table" style="position: relative; width: 100%; overflow: auto; margin-bottom: 10px;"></div>

But this page is not displaying the widget inside my page. But it is working when I add the above globaldata.html widget code inside my home.html file. Because this home.html page is loading first when I open the app. So it is working but not working inside the other pages.