[cspurdle]

Hi,

I’ve been unable to find a similar problem on the forum so hoping you can help.

I’m trying to create an iOS app which has several sub pages, so am using the app startup page _custom.js script file to store all my javascript code in which is called from all sub pages in the app and that’s working fine.

I have one page where I am using the flotr chart java widget to display data in a chart. The widget works by finding a named DIV on the page, and creating the chart inside that div.

It works fine when I include the code locally in the sub page’s _custom.js file, but when I call it from the main page custom file using the phoneui.postPageTransition event, the function fires ok but does not create the chart on the page. The Div is referenced by the following:

var container = document.getElementById(“chart-container”)

I’m assuming that because I’m calling the function from the startup page custom.js, it’s maybe not picking up the chart_container Div from the subpage perhaps?

Is there anything you could suggest as an alternative?

Many thanks

[support-octavio]

Hi cspurdle,

When your custom javascript fails to run in almost all cases there is an error in your code.

When in doubt run the design in the Test Center and then open the Tools Panel. Navigate to the JavaScript debugger and select the xxx_custom.js file. It will load and identify syntax error. If no syntax error then set a breakpoint in a line before you code. Then step through your code and monitor the state of variable and execution.

If your issue continues let us know.

[cspurdle]

Hi Octavio,

Thanks for the quick reply.

OK I’ve ran 2 debug sessions, one where the chart drawing code is triggered on the documentReadyHandler of the sub page _custom.js file, then I ran just the subpage and the chart appeared as expected. When I inspect the part of the code which I suspect is the issue, namely:

var container = document.getElementById(“m1-BMISummaryView-chart-container”)

The scope variables screen shows the following after I step over that line:

container: HTMLDivElement

On the second debug session the chart drawing code is located in the main page _custom.js file and is triggered by a button push. The code executes without error, but when I inspect the scope variables screen for the container variable it shows the following after I step over it:

container: null

So it seesms that putting the code into the main page’s _custom.js is mayby trying to find the m1-BMISummaryView-chart-container DIV in the main page’s HTML instead of the sub page? Is there a way around this?

Many thanks

[cspurdle]

Hi Guys,

Anyone with any ideas? I’m guessing someone must have come across this type of requirement before?

Many thanks

Craig.

[cspurdle]

Hi All,

After many hours I finally worked out the problem.

If you are referencing ANY external javascript files, or you manually insert a DIV element into a html file on a sub page, you have to add them into the main page’s html after the project files have been generated (i.e. the main page’s html get’s all the sub page’s code merged into it so you need to re-add any manually added elements into this merged version), otherwise when the app is run, your manual elements will not be referenced or found.

I’m posting this so that any other newbies like me might save some time trying to work this out 🙂

Happy coding…

[Author]

Posts