Executing JavaScript Inserted via .innerHTML

Discussion in 'Javascript' started by ZildjianB@gmail.com, Nov 7, 2005.

  1. Guest

    Hi All,

    I hope you can help me with this, as I have done some exhaustive
    searching over the past couple days and cannot find a solution.

    What I am trying to do is dynamically update an image and image map on
    a page. I'd like the update to happen as quickly as possible and be
    done without refreshing the page. The catch is that the image map uses
    the wz_tooltip.js (http://www.walterzorn.com/tooltip/tooltip_e.htm)
    library to display a JavaScript tooltip containing detailed information
    about different areas of the image. So, when I pass the required
    <script> tags via .innerHTML, the browser treats it as text and does
    not interpret the JavaScript and execute the code.

    My code looks something like this:

    function flipImage(imgDiv, imgSrc, imgMap, ttDiv)
    {
    //generate random num for unique image map name
    var rand = Math.round(Math.random() * 10000);
    //create unique image map name
    var imgMapName = "mapper" + rand.toString();
    //piece together image map text
    imgMap = "<map NAME='" + imgMapName + "'>" + imgMap + "</map>";

    //write new image map
    document.getElementById(imgDiv).innerHTML = imgMap;
    //flip the image
    document.flowview.src = imgSrc;
    //link image to new image map
    document.flowview.useMap = "#" + imgMapName;

    var tooltip = '<script language="javascript" type="text/javascript"
    src="/javascript/wz_tooltip.js"><\/script>';
    //write <script> call wz_tooltip.js to create tooltips
    document.getElementById(ttDiv).innerHTML = tooltip;
    }
     
    , Nov 7, 2005
    #1
    1. Advertising

  2. wrote:


    > var tooltip = '<script language="javascript" type="text/javascript"
    > src="/javascript/wz_tooltip.js"><\/script>';
    > //write <script> call wz_tooltip.js to create tooltips
    > document.getElementById(ttDiv).innerHTML = tooltip;


    You can try
    var scriptElement = document.createElement('script');
    scriptElement.type = 'text/javascript';
    scriptElement.src = '/javascript/wz_tooltip.js';
    var head = document.getElementsByTagName('head')[0];
    if (head) {
    head.appendChild(scriptElement);
    }
    That should work to load that script file dynamically although I am not
    sure why you would want to do that each time that flipImage function is
    called.

    And browsers usually had troubles implementing dynamic script loading
    with the DOM so depending on the browser version it might not work.
    Should work in IE 5/Win and later, Firefox 1.0 and later, Mozilla 1.4
    and later, Opera 8.0 and later, Safari 2.0 and later, but I can't give
    the exact versions of each browser where that was implemented.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Nov 7, 2005
    #2
    1. Advertising

  3. Guest

    Thanks, Martin. I have tried something similar to that in the past,
    but I will give your variation a try. BTW... I'm developing using
    Firefox 1.0.7 right now.

    The reason the script file is loaded every time the image is flipped is
    because it writes out new JavaScript tooltip code for each new image
    map in the new image. Because of this, I have to add the <script> call
    below any of the JavaScript tooltips in the document's body. Would it
    be a problem if I used 'appendChild' in the body instead of the head?
    Would this cause the entire page to reload? Thanks again for your help.
     
    , Nov 7, 2005
    #3
  4. Guest

    Incase I wasn't 100% clear on how wz_tooltip.js generates the
    JavaScript tooltip code for each tooltip, here is a simple example:

    tooltiptest.html code:

    <html>
    <head>
    <title>Tooltip Test Page</title>
    </head>
    <body>
    <A HREF=# onmouseover="return escape('This is a Test')">TOOLTIP TEST
    LINK</A>

    <script language="JavaScript" type="text/javascript"
    src="wz_tooltip.js"></script>
    </body>
    </html>


    When run in Firefox 1.0.7 turns into:
    <html><head><title>Tooltip Test Page</title></head>
    <body>
    <a href="#" onmouseover="return escape('This is a Test')">TOOLTIP
    TEST LINK</a>

    <script language="JavaScript" type="text/javascript"
    src="wz_tooltip.js"></script><div id="tOoLtIp00" style="position:
    absolute; z-index: 1010; width: 300px; opacity: 1; visibility: hidden;
    left: -300px; top: -22px;"><table style="background: rgb(0, 51, 153)
    none repeat scroll 0%; -moz-background-clip: initial;
    -moz-background-origin: initial; -moz-background-inline-policy:
    initial;" bgcolor="#003399" border="0" cellpadding="0" cellspacing="0"
    width="300"><tbody><tr><td><table border="0" cellpadding="3"
    cellspacing="1" width="100%"><tbody><tr><td style="padding: 3px;
    text-align: left;" align="left" bgcolor="#e6ecff"><font style="color:
    rgb(0, 0, 102); font-family: arial,helvetica,sans-serif; font-size:
    11px; font-weight: normal;" color="#000066"
    face="arial,helvetica,sans-serif">This is a
    Test</font></td></tr></tbody></table></td></tr></tbody></table></div>
    </body></html>
     
    , Nov 7, 2005
    #4
  5. wrote:


    > The reason the script file is loaded every time the image is flipped is
    > because it writes out new JavaScript tooltip code for each new image
    > map in the new image.


    Don't expect to be able to use document.write after the page has been
    loaded and have that insert stuff into the current document, a
    document.write call after the document has been loaded will overwrite
    the existing document.
    But I don't understand why you would have to load a static script file
    each time a function is called, load that script file once and put
    functions in there that can be called to do what you want, then your
    function flipImage does not have to load a script file but can simply
    call a function already loaded to do whatever is needed (e.g. insert
    some elements for a tooltip).


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Nov 7, 2005
    #5
  6. Guest

    OK, I go it to work... I just had to cheat a little bit, but this
    implementation works fine for now.

    The script file was loaded whenever an image flip occurred because it
    was not a static file. Instead, it set several variables, ran a
    tt_Init() function, and wrote the code needed for the JavaScript
    tooltips whereever it was included in a document. As Martin said, when
    an image flip occurred after the page had finished loaded, the
    document.write would cause the page to reload and overwrite itself.

    To fix this, I edited wz_tooltip.js and replaced this:
    document.write(htm);

    With this:
    document.getElementById(ttDiv).innerHTML = htm;

    And then changed by flipImage() function to the following:
    function flipImage(imgDiv, imgSrc, imgMap)
    {
    //generate random num for unique image map name
    var rand = Math.round(Math.random() * 10000);
    //create unique image map name
    var imgMapName = "mapper" + rand.toString();
    //piece together image map text
    imgMap = "<map NAME='" + imgMapName + "'>" + imgMap + "</map>";

    //write new image map
    document.getElementById(imgDiv).innerHTML = imgMap;
    //flip the image
    document.flowview.src = imgSrc;
    //link image to new image map
    document.flowview.useMap = "#" + imgMapName;
    tt_Init();
    }

    So now, instead of wz_tooltip's tt_Init() using document.write, I just
    have it overwriting its JavaScript tooltip code in a div within the
    document whenever an image flip occurs.
     
    , Nov 7, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Marc
    Replies:
    1
    Views:
    3,530
  2. Marc
    Replies:
    1
    Views:
    234
  3. Paolo matador

    change innerHTML while executing

    Paolo matador, Mar 7, 2006, in forum: Javascript
    Replies:
    3
    Views:
    103
  4. sonic
    Replies:
    5
    Views:
    293
    Randy Webb
    Jul 11, 2006
  5. Replies:
    6
    Views:
    169
    Randy
    Jul 22, 2008
Loading...

Share This Page