1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Vote Rating
    1
    rufwork is on a distinguished road

      0  

    Default Answered: Insert HTML into Panel's DIV via innerHTML, MVC, & custom funct

    Answered: Insert HTML into Panel's DIV via innerHTML, MVC, & custom funct


    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".

    PHP Code:
    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:

    Code:
    <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:

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

    So I want to call
    Code:
    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?
    Last edited by rufwork; 29 May 2012 at 6:29 AM. Reason: wacky formatting

  2. 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.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,585
    Answers
    540
    Vote Rating
    319
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Vote Rating
    1
    rufwork is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi