Ok I have a flex app and I am adding a callback method like this:
private function init():void
{
ExternalInterface.addCallback( "playVideo", playVideo );
}
private function playVideo(videoSource:String):Boolean
{
videoDisplay.source = videoSource;
return true;
}
I am calling it with javascript like this:
function showVideo(video)
{
document.getElementById("video_overlay").style.display = "block";
//alert('no error');
document.getElementById("MiniMacVideoPreview").playVideo('https://www.kranichs.com/instore/minimac/videos/'+video);
}
I get this javascript error:
Object does not support this property
or method.
However if I uncomment and run the alert first. I get no error and it works perfectly.
My first thought was that the alert was buying time until the script could execute, so i tried to run the script inside a setTimeout() but did not work.
Any ideas?
Thanks!
I would try placing your code in something like jquery's
$(window).load function. I have a feeling that you are exactly right. By the time you close the alert, the dom and contents are finished loading and you can make your ExternalInterface callback method.
$(window).load
Otherwise, if you are using swfobject, you could do something like
swfobject.addLoadEvent(function() {
$("#swf_id").get(0).inited(callSomeOtherFunction());
});
Related
I am trying to call a javascript function to modify a page its Dom elements. Since I am doing the same thing 6 times i would like to call a function from the first function. Not quite sure how I can do that.
javascript:(function(){
//DoStuff
}());
I have working javascript inside that block and this executes as it should
However now i want to do something like this:
javascript:(function(){
function AlterPage()
{
ModifySector(0);
ModifySector(1);
ModifySector(2);
ModifySector(3);
ModifySector(4);
ModifySector(5);
}
function ModifySector(sectorNumber)
{
//DoStuff
}}());
So I am now trying to call the same code that executes above 6 times, with a different parameter. This does not work at all. It this at all possible without creating an external script file? And if so... how?
Not entirely sure what's going on but it seems to only be you are invoking the ModifySector();
but not the AlterPage();
so nothing will happen.
something like this may work:
store it all in an array and use a helper...
const myArr = ['dog','cat','turtle','snake','hamster','fish']
function AlterPage(sectorNumber){
ModifySector(sectorNumber);
}
function ModifySector(sectorNumber)
{
console.log(sectorNumber);
//DoStuff
}
myArr.forEach((e) => {
AlterPage(e);
});
Ok, i am an idiot. I only needed to actually call the function and it worked :)
javascript:(function(){
AlterPage();
function AlterPage()
{
ModifySector(0);
ModifySector(1);
ModifySector(2);
ModifySector(3);
ModifySector(4);
ModifySector(5);
}
function ModifySector(sectorNumber)
{
//DoStuff
}}());
that does the trick
I apologize for this rather BASIC question, but I am at whits end here!
I have a javascript function that I want to run when the page loads... simple right? I have tried putting the function in doc readys, window readys, putting it before and after the main function, etc etc. NOTHING seems to work.
Code so far:
function calcme() {
DA FUNCTON
}
$(document).ready(function(){
calcme();
$("input").bind("keyup", calcme);
});
Please note... the keyup bind DOES work, but I need the calcme function to load on page load. Thoughts?
UPDATE: As per request, here is the full fiddle. http://jsfiddle.net/vpsSA/
Problem found: The calcme() function assumes it is called from the context of one of the inputs and uses this.value inside. So, when you call it without any arguments, it obviously fails. This can be solved by trigger the keyup of each of your inputs, instead of calling calcme() directly. See the fiddle below.
Working fiddle: http://jsfiddle.net/vpsSA/1/
In your ready() handler, the bind statement comes after the caclme() call. And as you mentioned the event binding worked. This means:
a) calcme() was definitely executed on load. There is no other way since you've mentioned that the binding statement which comes after the calcme() call worked as expected.
b) calcme() did not throw any JS errors - if so, it would have stopped at the error and the event binding would not have taken place. Maybe it threw a warning, which you'll be able to see in your JS console.
c) Since you haven't provided whats inside calcme(), we can't say for sure. But what it looks like is some sort of condition failure because of which you did not get the expected result from calcme() when running on load. Are you using anything inside calcme() thats initialized after running it on load. I would suggest putting in a debugger; statement as the first line in your ready() handler and tracing it in Firebug or Chrome.
try this:
function calcme() {
try {
//your code
}
catch(e) {
alert('error: ' + e);
}
}
if (typeof $ === undefined)) {
alert('not jquery');
}
$(document).ready(function(){
if (typeof calcme === undefined) {
alert('calcme not exist');
}
else {
calcme();
$("input").bind("keyup", calcme);
}
});
I have the following code using actionscript and the indesign sdk:
At the beginning of my Class
[ Embed (source= "resources/js/eventHandlers.jsx" , mimeType= "application/octet-stream" )]
private static var jsHandler:Class;
var jsxInterface:HostObject = HostObject.getRoot(HostObject.extensions[0]);
In my function:
jsxInterface.eval( new jsHandler().toString());
jsxInterface.init( this );
document.xmlElements.item(0).xmlElements.item("docpreset").importXML(File.applicationStorageDirectory.resolvePath("temp/cstyles.xml"));
jsxInterface.afterImport(document);
this is the code inside eventHandlers.jsx:
var asInterface = {};
function init(wrapper) {
asInterface = wrapper;
}
function afterImport(document) {
document.addEventListener (Document.AFTER_IMPORT, asInterface.test());
}
and from javascript I call this:
public function test():void {
trace("ole");
}
Now, the test function gets executed correctly, but after that the next thing that gets called is again this:
jsxInterface.afterImport(document);
and then an error is thrown:
Error: ActionScript error: Error: Missing required parameter 'handler' for method 'addEventListener'.
I have no idea anymore on what I need to do. All I want is for the xml to be imported and an event dispatched when the import is complete.
I have no idea why I even have to call a javascript function, and can't use the document.AFTER_IMPORT inside a normal eventListener. Can anyone help me out on this one please?
The problem seems to be that in your afterImport() method, you are adding the event listener incorrectly.
The second parameter to the addEventListener() method should be the name of a function (technically it's a reference to a function). In your code, you have put parentheses on the end of the function name -- so instead of providing the reference to the function, the function is being executed.
When the function executes, it returns nothing, so the second parameter to addEventListener() is missing and you get the error.
Try this instead:
function afterImport(document) {
document.addEventListener (Document.AFTER_IMPORT, asInterface.test);
// notice no "()" here ^^
}
[Edit]
Since you are still getting the error, you might want to add some code to debug it further.
In the method above, comment out the addEventListener line, and replace with something like this:
// for debugging
if (asInterface.test == null)
{
trace("fail: it's null");
}
else if (asInterface.test is Function)
{
trace("success: it's a function");
// this is the only code path where your error will not occur
}
else
{
trace("fail: i don't know what this is: ", asInterface.test);
}
I think you have to initiate the AS wrapper like this :
jsxInterface.init( this );
then the AS API becomes available to the js code.
Loic
I am currently making use of Simon Willson's addLoadEvent function to add functions that I want to run after the load event. I ran into a problem wherein the the function I passed to the addLoadEvent function referenced a div that had not yet been loaded by the DOM and so my action (showing the div) did not do anything. When I changed to using the jQuery $(document).ready function, the div has been loaded by the DOM and I can execute actions with it (make it show up).
So, a couple questions. Why is my function being executed before the DOM has completed loaded using the above function? Is there a way to delay it? The other alternative that I can think of is passing in a function to a jquery equivalent:
function jqueryAddReadyEvent(myFunc)
{
$(document).ready(function()
{
//execute already existing functions
//add a new function to the ready event
myFunc();
}
}
When I try the above code, I get a javascript error "myFunc is not a function". Is there a way to generically pass in a function to the jquery ready function and have it execute? Equivalent to the following:
$(document).ready(function()
{
funcA();
}
$(document).ready(function()
{
funcB();
}
...//more of the same
Replaced with the following:
jQueryAddReadyEvent(funcA);
jQueryAddReadyEvent(funcB);
You can just do:
$(document).ready(myFunc);
to attach functions to the DOM ready event. Here's the fiddle: http://jsfiddle.net/padtE/
If you will require many functions to be added then I suggest you do the following:
Create an array that will old all the functions you want to call.
Add functions to that array as you please.
In the .ready(function() { ... }) call every function in that array.
You're set.
It looks correct to me. Most likely you are calling it with something not a function.
Btw you can shorten this to:
var jqueryAddReadyEvent = $(document).ready
or just use $(document).ready() directly for the same effect, as it specifically does what you want to do, run functions after the load, and is actually shorter.
$(document).ready(funcA);
$(document).ready(funcB);
function jqueryAddReadyEvent(myFunc) {
$(myFunc);
}
jqueryAddReadyEvent(function() {
alert('hello world');
});
Demo: http://jsfiddle.net/AlienWebguy/UzMLE/
I was implementing a on-demand script controller based on jquery's getscript, it looks like this:
function controller = function(){
var script = function(){
var scripts = {};
return {
load: function(jsurl){
$.getScript(jsurl, null);
},
run: function(js){
window[js].apply(this,null);
}
}
};
return {
script: script()
};
}
var ctlr = controller();
then here is a remote script with a function to be loaded - remote.js
function remotefunc(){
alert( 'remotefunc invoked' );
}
and here is how the whole thing supposed to work, in the main script:
ctlr.script.load( 'remote.js' ); // remote script successfully loaded
ctlr.script.run( 'remotefunc' ); // got an error, window['remotefunc'] undefined
but as you can see, 'remotefunc' is defined in the global 'window' scope, so the window object is supposed to be able to 'see' it.
I thought the problem was probably the closure stuff in the 'controller' definition, so I did a direct $.getScirpt without using the 'controller':
$.getScript( 'http://path/to/remote.js', function(){
window['remotefunc'].apply( this, null ); // this worked
} );
strange. So it is about the 'controller' implementation(I kind need it)! Anybody can help me out with this? How to fix the 'controller' implementation so the
window[js].apply(this,null);
can actually work?
Thanx.
The reason it's telling you window['remotefunc'] is undefined is because you are not giving it time to actually download and execute the remote script before attempting to call a function defined in it.
The remote script is loaded asynchronously, which means the script execution isn't paused while waiting for a response.
You will need to either re-implement the getScript method to be synchronous or somehow work your class around the fact that the function will not be available in any determinate amount of time.
EDIT: Just found another possible solution, try calling this before your request
$.ajaxSetup({async: false});
This will make the getScript method synchronous
When using something like getSript, it's important to remember that it is fetching asynchronously. Meaning, the browser fires off the request and while that's happening, code after that line executes without pause.
jQuery provides a callback function parameter to get script that allows you to do something after the asynchronous fetch is finished.
Try this:
var script = function(){
var scripts = {};
return {
load: function(jsurl, callback){
$.getScript(jsurl, callback);
},
run: function(js){
window[js].apply(this,null);
}
}
};
Then, when using it:
ctlr.load( 'remote.js', function(){
// remote script successfully loaded
ctlr.run( 'remotefunc' );
});
Could this be a timing issue?
In your working example you call the function in a callback which jQuery will not invoke until the script is loaded. In your non-working example, you call the function immediately after getScript which is asynchronously loading the script.