View Full Version : Insert HTML into Panel's DIV via innerHTML, MVC, & custom funct

29 May 2012, 6:27 AM
I believe I'm having trouble figuring out scoping in MVC. I have an app.js that, somewhere down the line, creates a Panel holding a DIV with a unique id of "map".

myPanel = Ext.create('Ext.panel.Panel', {
title: 'Map',
html: '<div style="width:100%; height:100%" id="map"></div>'

I want to change this div's innerHTML using a function that's defined in an include outside of the app/MVC framework. I included a script tag in index.html that reads:

<script type="text/javascript" src="media/js/ext/MyCompany/MySubProject/mapInst.js"></script>

mapInst.js contains the utility function. Let's start with a simplest case:

function fillDiv(strDivName) {
document.getElementById(strDivName).innerHTML = "<h1>TEST</h1>";

So I want to call
fillDiv("map") from within my app's code, and have that call access the external js include file. Right now, when I try to call it, I get an
Uncaught ReferenceError: fillDiv is not defined
error. Putting the same function into the app.js' files works, of course (but also shows that I haven't made a simplistic coding mistake inside the function).

Is there another place I'm supposed to be including mapInst.js? Does the Loader need to be informed of it somehow? :-?

29 May 2012, 2:25 PM
It's not really an MVC issue, we're in barebones JavaScript territory here. However much magic ExtJS may appear to do it is all just JavaScript underneath so the rules of the language all still apply.

That error message is pretty unequivocal. The function doesn't exist at the time you're trying to call it. If the problem were a syntax error or something like that you'd see a different error message first.

Including it as a script tag should work. Use the network tab in your debugger of choice to check that the file is indeed being loaded. The problem might be something simple like a typo in the file path or the relative directory being wrong. You should probably do a View Source on the HTML from within your browser too, confirm that the script tag really is there and that you aren't seeing the wrong page (possibly due to caching).

Try adding something like console.log('hello') to the end of your script file (not inside the function, just put it at the end of the file). That'll give you some indication of when the file was loaded relative to other things, such as the error message.

If the file is being loaded then the next possibility is that it's being included too late. It needs to be included before you try to call that function. From the information you've provided it's difficult to speculate further.

Something else you can try is to call that function directly yourself from within the debugger. Just run it from the console. If you can't call it from there then it won't run from anywhere else either. If it does work from there then it again suggests a timing issue.

29 May 2012, 6:09 PM
Heyseuss. There was an index.html and an html/index.html in the code I inherit. Guess which index.html I was editing and which I was using?

That's right, it doesn't matter past saying 1 & 2 were different. I'll slink away now.

Thanks for the push in the right debugging direction. The Loader was a complete red herring.