We are including a javascript file from within another javascript file using document.write. Within the first javascript file is a call to a function in the second javascript file. As a result, we are getting an error message: 'gMunchkin' is undefined when I debug the code. What am I doing wrong, and how can 'gMunchkin' be called in this way?

I used IE7 to see the Demo: .htm

We are including a javascript file from within another javascript file using document.write. Within the first javascript file is a call to a function in the second javascript file. As a result, we are getting an error message: 'gMunchkin' is undefined when I debug the code. What am I doing wrong, and how can 'gMunchkin' be called in this way?

I used IE7 to see the Demo: http://www.apus.edu/bin/r/u/test.htm

• javascript

• 1 "I used IE7 to see the" I'm guessing you meant to put more on that line. Re the demo, with Chrome on Ubuntu I see two alerts, "a" and "b". You should indicate in your question what you expect to see, and what you're seeing instead. – T.J. Crowder Commented Sep 14, 2010 at 21:59
• 1 I'm not sure how to best revise the title, but I'd suggest...something... – Feanor Commented Sep 14, 2010 at 21:59
• I thought it a spam post :P Evan, are you listening for an onload event before doing anything? It won't solve all of your probs, but it might be enough for you to just wait until the document has fully loaded before making calls to partially downloaded js files. – danjah Commented Sep 14, 2010 at 22:02
• i hope the edit makes it clearer! :) – Luke Schafer Commented Sep 14, 2010 at 22:11
• Hi - I updated the code a little differently, but I still get another error. apus.edu/bin/r/u/test.htm – Evan Commented Sep 16, 2010 at 18:05

4 Answers 4

It's very possible the browser hasn't finished downloading munchkin.js when you make the call to mktoMunchkin().

You could use jQuery to load muchkin.js.

$.getScript('http://munchkin.marketo/munchkin.js', function() {
     //The code inside this anonymous function is executed by $.getScript() when the script has finished 
     //downloading.It is called a Callback function. It is required because 
     //getScript() does not block and will return before the javascript file is 
     //downloaded by the client
     //If the call to getScript was blocking, the client would be frozen until the 
     //js file was downloaded, which could be seconds and could lead the user 
     //to think the browser has crashed
     alert('Muchkin loaded. We can now use the Munchkin library.');
     mktoMunchkin("476-IFP-265");
});
//any code placed here will execute immediately. When this code is executed,
// munchkin.js may not have finished downloading. Hopefully you can see why 
//there is a need for the callback function in $.getScript().

This way you are guaranteed munchkin.js is fully downloaded before trying to use it's functions.

When you include another script using document.write, your main script will continue executing, even before the other script has actually been fetched and included. That being said, document.write is deprecated as well and you shouldn't be using it for any purpose at all.

Is there a reason you can't directly add the <script> tag to your HTML?

You could have the parent page do something like

var doAllThisStuff = function() {
    mktoMunchkin();
};
var stillNeedToDoThis = null;
if (typeof mktoMunchkin == "function") {
    doAllThisStuff(); // Yay, we can do it right away!
} else {
    stillNeedToDoThis = doAllThisStuff; // We don't have mktoMunchkin yet. Better wait.
}

Then at the bottom of the new page do something like this

function mktoMunchkin() {
    // All kinds of code
}
if (typeof stillNeedToDoThis == "function") { // is anybody waiting for mktoMunchkin?
    stillNeedToDoThis();
    stillNeedToDoThis = null;
}

I wrote an real async interface that can be used regardless of Munchkin js has finished loaded or not - https://github./ewebdev/marketo-munchkin-async