[SOLVED] externalInterface vs jquery

#1

I’ve noticed strange problem with jquery (html5 target)

I use jquery inside generated html5 index file.
All of the jquery part works fine except externalinterface callback:

For example:

OpenFl:

ExternalInterface.addCallback("my_function_1", my_function_2);

Index HTML:

$( "#some_element" ).click(function() {			
		
	document.getElementById('openfl-content').my_function_1(); // this one works fine


	$("#openfl-content").my_function_1(); // this one doesn’t work

});

Does anyone have any idea why externalinterface doesn’t work in cooperation with external js library?

I hope some of you is more familiar with js libraries.

#2

Perhaps this is a timing issue? Do you load JQuery before, or after, your application.js in the header of your HTML file?

#3

Thanks for your idea ‘singmajesty’. I tested it and unfortunately it wasn’t a timing issue.
But the fact that nobody can see any problem in the code, pointed me in the right direction - the problem resides in jQuery language itself. It turned out that jQuery just needs some additional trick in order to work with externalInterface.

So here is my solution:

Instead of this:

$("#openfl-content").my_function_1();

// error: “$(…).my_function_1 is not a function”

It should be this:

$("#openfl-content")[0].my_function_1();

or this:

$("#openfl-content").get(0).my_function_1();

It is also clever to put the whole code inside “document ready” function (although it is not the essence of the matter):

$(document).ready(function() {    // wait for DOM to be ready

        $( "#some_element" ).click(function() {

              $("#openfl-content")[0].my_function_1();    

        });	

});

vuala!

1 Like