javascript named function bug if declared by ExecuteJavaScript

Please report bugs here. If you are unsure whether something is a bug or an expected behavior, please post it on the "Technical Support" forum instead, and wait for a moderator to handle/move the post.
Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

javascript named function bug if declared by ExecuteJavaScript

Postby Sesztak » Sat Oct 15, 2016 5:36 am

Dear JS-Support,
we have found a bug concerning javascript named functions.
(We are not 100% sure it is a bug (probably) or not -but for sure to help others to eliminate spend hours..)

Description:
if your declare a javascript named function by ExecuteJavaScript, e.g.:
CSHTML5.Interop.ExecuteJavaScript(@"function myFunction(a, b) {
return a * b;
}

and try to invoke later, e.g.:
CSHTML5.Interop.ExecuteJavaScript(@"alert(myFunction(2,3))");

It will works in Simulator, but got exception in real browser: 'Uncaught ReferenceError: myFunction is not defined'

If you declare the javascript named functions in external js file (e.g.: someFunctions.js) and use the following pattern:
Page_Loaded () => LoadJavaScriptFile() => ExecuteJavaScript() later:
works as expected.

Full sample source code:
XAML:
<Page
x:Class="CSHTML5cacheEsJSfunctionTestPort14445.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CSHTML5cacheEsJSfunctionTestPort14445"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded">
<StackPanel>
<Button Content="test (the pre-defined) myFunction by CSHTML5.Interop.ExecuteJavaScript(...)" Click="Button_Click"/>
<Button Content="test (the pre-defined) myFunctionFromExternalJSfile by .LoadJavaScriptFile => .ExecuteJavaScript(...)" Click="Button_Click_1"/>
</StackPanel>
</Page>

C#:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Reflection;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CSHTML5cacheEsJSfunctionTestPort14445
{
public partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}

private void Page_Loaded(object sender, RoutedEventArgs e)
{
CSHTML5.Interop.ExecuteJavaScript(@"function myFunction(a, b) {
return a * b;
}
");

CSHTML5.Interop.LoadJavaScriptFile("ms-appx:///CSHTML5cacheEsJSfunctionTestPort14445/someFunctions.js");
}

private void Button_Click(object sender, RoutedEventArgs e)
{ // Simulator: working
// in real browser: 'Uncaught ReferenceError: myFunction is not defined'
CSHTML5.Interop.ExecuteJavaScript(@"alert(myFunction(2,3))");
}

private void Button_Click_1(object sender, RoutedEventArgs e)
{
// working as expected :
CSHTML5.Interop.ExecuteJavaScript(@"alert(myFunctionFromExternalJSfile(2,3))");
}
}
}

someFunctions.js javascript file:
function myFunctionFromExternalJSfile(a, b) {
return a * b;
}

Question: please, confirm / clarify is it a bug or expected behaviour by CSHTML5 design ?

Waiting for your kind reply,
Br,
Péter

JS-Support
Site Admin
Posts: 663
Joined: Tue Apr 08, 2014 3:42 pm

Re: javascript named function bug if declared by ExecuteJavaScript

Postby JS-Support » Sat Oct 15, 2016 11:39 am

Thanks Péter. We are going to investigate.

In the meantime, a workaround is to add the function to an object such as Document:

Interop.ExecuteJavaScript("document.myFunction = function() { ... }");

Regards,
JS-Support

Sesztak
Posts: 172
Joined: Fri Jun 24, 2016 2:19 am

Re: javascript named function bug if declared by ExecuteJavaScript

Postby Sesztak » Sat Oct 15, 2016 11:57 am

Dear JS-Support,
Thanks.

What I feel important : to empasize/broaden it in your documentation,

I recommend to add: Tips/tricks/best pratices:
"advisable to use Page_Loaded () => LoadJavaScriptFile() => ExecuteJavaScript() pattern as you get code formatting from Visual Studio built in syntax checking / colourings".

Background: if you use the ExecuteJavaScript(@" ...lot of opening and closing () {} @arkqards...., ") function (with inline js script, WITHOUT external js file): it's very easy to make mistakes (not matching opening/closing brackets..).

A recommend to advise to users to FIRST make external js files (With Visual Studio syntax coloring / checking) and : use LoadJavaScriptFile() first, ExecuteJavaScript() later pattern.

Have a nice day,
we are rooting for the success of your project !
Péter


Return to “Bug Reports”

Who is online

Users browsing this forum: No registered users and 1 guest