SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Hybrid View

  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    Is IE not allowing a script to interact with created DOM elements?

    Hi all,
    I'm tearing some hair out.

    I'm rewriting a site and one of the things I'd like to do is keep it valid (I can't make this accessible, not even simply, to save my life).

    Our old/current site has these goofy addThis icons. Near as I can tell, the old page calls an external addThis script in the <head> (which is minimised and therefore unreadable), which created an iframe for something (not sure what). Also, the old pages have a bunch of addThis-specific HTML which is both invalid and ugly. The script fills these elements with spans and attributes so that the user gets a bunch of social networking icons to click (mouse only).
    One of the new sites I have set up like the old sites, with the bogus HTML hand-written into the page:

    http://stommepoes.nl/Jeansselling/jeansselling2/artikel.html
    (sorry for the unclickable but even changing the settings here did not stop the forums from adding titles to these)

    Code:
        <script type="text/javascript" src="js/jquerylightbox.js"></script>
        <script type="text/javascript">
          $(function() {
              $('.thumbs a').lightBox({fixedNavigation:true});
          });
        </script>
        <script type="text/javascript" src="js/artikelForms.js"></script>
        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=foobar"></script>
    </head>
    So, that last script is the addThis script. And in the HTML is
    Code:
    <div class="addthis_toolbox addthis_default_style"><a class="addthis_button_email" href=""></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_hyves"></a>
    <a class="addthis_button_googlebuzz"></a>
    <a class="addthis_button_facebook"></a><span class="addthis_separator">|</span>
    <a href="http://www.addthis.com/bookmark.php?v=250&amp;username=foobar" class="addthis_button_expanded">Meer</a></div>
    Off Topic:


    Yeah, anchors without hrefs. The script adds hrefs to some of the anchors, but not for mail or twitter. So you see I've added for mail to make it focusable with keyboard, but twitter can't have that because the script also adds target="_blank" which means OUR page opens in a new window/tab.


    So if I'm writing a valid version of this site, I thought I'd just have Javascript add the bogus HTML for me, since it's completely useless without Javascript anyway.

    Since there's already a lightbox.js that needs jQuery, I fudged my way around adding bogus HTML with it (looks to me like innerHTML basically).
    Another page has an example of this:
    Code:
        <script type="text/javascript" src="js/jquerylightbox.js"></script>
        <script type="text/javascript">
          $(function() {
              $('.thumbs a').lightBox({fixedNavigation:true});
          });
          $(function() {
              $('.artikel').append('<div class="addthis_toolbox addthis_default_style"><a class="addthis_button_email" href=""></a><a class="addthis_button_twitter"></a><a class="addthis_button_hyves"></a><a class="addthis_button_googlebuzz"></a><a class="addthis_button_facebook"></a><span class="addthis_separator">|</span><a href="http://www.addthis.com/bookmark.php?v=250&amp;username=jeansselling" class="addthis_button_expanded">Meer</a></div>');
          });
        </script>
        <script type="text/javascript" src="js/artikelForms.js"></script>
        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=foobar"></script>
    But, doing this meant the icons didn't show up in IE (7 or 8... I don't have 9 and didn't bother checking 6). I can verify that my script is indeed loading the HTML, but the addThis script isn't doing anything with it. But, while trying out IE's debugger, I did get icons. This told me the script was running possibly before the bogus HTML was added.

    So I thought I'd be clever and have the same script who's creating the bogus HTML create the script as well, since this should mean one gets executed first and then the other one.
    Don't have a page doing this but it was something like
    Code:
        <script type="text/javascript" src="js/jquerylightbox.js"></script>
    
        <script type="text/javascript">
          $(function() {
              $('.thumbs a').lightBox({fixedNavigation:true});
              $('.artikel').append('<div class="addthis_toolbox addthis_default_style"><a class="addthis_button_email" href=""></a><a class="addthis_button_twitter"></a><a class="addthis_button_hyves"></a><a class="addthis_button_googlebuzz"></a><a class="addthis_button_facebook"></a><span class="addthis_separator">|</span><a href="http://www.addthis.com/bookmark.php?v=250&amp;username=foobar" class="addthis_button_expanded">Meer</a></div>');
              var scriptZ = document.createElement('script');
              scriptZ.type = 'text/javascript';
              scriptZ.src = 'http://s7.addthis.com/js/250/addthis_widget.js#username=foobar';
              $('head').append(scriptZ);
          });
        </script>
        <script type="text/javascript" src="js/artikelForms.js"></script>
    I'm not familiar enough with jQuery to tell if I can stuff everything in one function like that, but I did try with separate ones too.
    I also tried appending the script to the body. No dice.

    Now this got the script interacting with the bogus HTML in IE! Meaning, I got icons to appear!
    But Opera broke. Opera no longer let the script interact with the icons, and only the inserted HTML appeared.
    Firefox seems fine with any way I do it. For some reason.

    And, while I *thought* I had IE working, I still didn't: I tested the Twitter button by logging into twitter in another tab and then clicking the icon. Instead of sending
    "Name of item" "some tiny url" via @addThis
    (like it does in FF)
    it sends
    Undefined via @addThis

    So, I can't read the addThis code, can't tell which end is up there or see how it grabs the correct information in IE.

    But the script and the way the icons works ALL the time in ALL browsers if I have the dodgy HTML just sitting in the source by default. Which I don't want, for two reasons:
    -users without Javascript get some retarded link that means nothing and none of the social button thingies
    -it's invalid and I can't make it valid.

    So I'm guessing a lot of this has to do with timing and firing but I can't follow it in Dragonfly nor in the IE debugger as it just seems to jump into either the jQuery stuff or the addThis stuff and then just ends.

    Also, found out trying to add the script to the end of the page with jQuery sucks balls cause I can't see it in generated source. So to check that I'm actually loading the addThis script, I have this:

    http://stommepoes.nl/Jeansselling/jeansselling2/artikel-combo.html

    where at the bottom I have
    Code:
      </div>
      <script type="text/javascript">
        alert('IE FOO');
        alert(document.body.lastChild);
      </script>
      <script id="addThis" type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=jeansselling"></script>
    </body>
    </html>
    The script loads, definitely after the bogus HTML is added to the DOM (and it is, I can see it in IE), but it doesn't add all the spans and icon images to it like it does if that HTML were in the source.

    Does anyone have any idea why this is happening? What am I missing?

    And no, I really don't know jQuery and wouldn't be using it except that the lightbox needs it.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    So, I can't read the addThis code, can't tell which end is up there or see how it grabs the correct information in IE.
    Maybe this will help. You can run the minimised code through jsbeautifier.org toreturn it back to beautifully indented code.
    The resulting code still needs more expressive variable names, but it's enough to get started with.

    If you want help with either of those linked pages though, you might have to clarify the problem that the page is having, and what you would like to have done about it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Maybe this will help. You can run the minimised code through jsbeautifier.org toreturn it back to beautifully indented code.
    The resulting code still needs more expressive variable names, but it's enough to get started with.
    omigod, a prettyprint for JS!

    If you want help with either of those linked pages though, you might have to clarify the problem that the page is having, and what you would like to have done about it.
    Either the icons don't appear, or they appear and don't work. Everything works fine IF I leave addThis' garbage HTML in my source, but what I would like is to be able to take those OUT of my source and just have Javascript add them to the DOM onload.

    If I only add them to the DOM via JS and then call the addThis script with script tags in my source code, IE does not let the addThis script interact with the DOM elements: no icons appear. All other browsers are fine.

    If I have the DOM-adding script also create and add in the addThis script as well, the IE does show the icons, but Opera doesn't, and IE does not make the icons work correctly.

    That last bit might be a whole separate problem, but if I could get all browsers to at least show the icons, I can go from there.

    Still, I'll see if that prettyprinter gives me any clues. I still think the addThis script is just running in IE and Opera before the new DOM elements are added, since that's the most likely source of the problem.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    If I have the DOM-adding script also create and add in the addThis script as well, the IE does show the icons, but Opera doesn't, and IE does not make the icons work correctly.
    An interesting data-point is that the icons all appear when you refresh the page.
    If you click on the address bar and press enter, the icons won't appear. If you hit the refresh button, the icons do appear.

    Is it possible to setup a timeout after you load in the first script, that watches for the availability of the elements you are adding, so that only after they are available does the second script get added as well.

    Or, modify the second script so that it only runs when you explicitly call an init function, and run that on page load or at some other appropriate time.
    Last edited by paul_wilkins; Apr 1, 2011 at 04:24.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    An interesting data-point is that the icons all appear when you refresh the page.
    More interesting, they don't show in my copy of IE8 no matter how I refresh:
    enter at address bar
    F5
    ctrl+F5
    refresh button

    Is it possible to setup a timeout after you load in the first script, that watches for the availability of the elements you are adding, so that only after they are available does the second script get added as well.
    I'm probably going to try something like that, yes. I was assuming that listing the append(DOM elements) first and then the <script> tag with addThis script meant one had to finish before the next one ran... and this must be wrong (in IE anyway).

    Might not fix IE's issue with how the buttons work, but I'm quite sure this will always make the buttons load in all browsers.
    Thanks for looking at this.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    More interesting, they don't show in my copy of IE8 no matter how I refresh:
    Whoops, I'm running IE9 now.

    IETester seems to be even more inconsistent with them for IE8.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •