Have Your DOM and Script It Too

34 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. James

    another great article .. :) thanks for these.

    During the last few weeks. I really enjoyed the ajax ones, great little intros to something I knew little about

    Happy Christmas

  2. Jonatan Olofsson

    I ditto James. It’s been lots of great articles in this series, and i’ve especially enjoyed the Ajax ones, since that’s what i knew least about.

    Now, who’s up for 365ways.org? :)

  3. Jon B

    This is really cool, however in IE the tab floats to high (i know it’s just a demo so I don’t care), but assuming that it is made for firefox primarily then I was disappointed that in my firefox the ajax result message loads into the entire tab rather than into the content area – ie it replaces the whole page as if you weren’t using ajax. Not sure why it does this, but my FF1.5 install isn’t that odd – but maybe it is an extension conflict although I usually have no problem with ajax calls.

    As a note to people (not directly related to this article) – the img onload event isn’t called in some browsers if the image is loaded from the cache – I can’t remember which browsers tho. Something worth noting but easily overcoming by preventing caching (only for small images) – img.src=”myimage.gif?” + uniqueNum;

    I’m sure that is all taken into consideration tho in this example.

  4. Jon B

    Hi, I didn’t mean to sound superior or mean or anything – I know it’s just a demo, and a great one, I like the idea a lot and will remember it for future use. I had never thought of this and I think my prob with firefox is that the return false isn’t working for some reason – my fault no doubt.

    Sorry if I gave the wrong impression, I hang my head in shame :(

    Merry Christmas

  5. Shaun Inman

    This code has been tested (and is known to work) in IE PC 5, 5.5, 6.0, Firefox 1.0x, 1.5, Opera 8 and Safari 2.0. The onload event fires consistently in all browsers tested.

  6. Jon B

    Hey Shaun, I said it wasn’t particular a reference to this article, it was more to point out a possible gotcha when people implement something similar. We have built projects before that rely on the image onload event and have found that in some browsers (Opera and IE) the onload event fails to fire if the image is drawn from the cache rather than from the web. Do a google search and you’ll see I’m not making it up. I also said I was sure it was taken into consideration in this article – I’m really sorry if I got people’s backs up, but the onload ‘gotcha’ was a real pain when we first ran into it and I just thought it might be worth pointing out here.

    Seriously I love this site and all the tips and have been really interested in everything. I learnt everything I know from guys like you all and I don’t assume I know more than any of you.

  7. Jon

    It seems like there should be a better way to do this by running the script from the main page and not the ajax page.

    Is it possible to check if the responseText is loaded, and if so, run the script?

  8. Shaun Inman

    “Is it possible to check if the responseText is loaded, and if so, run the script?”

    Yes, but that requires that the JavaScript you are going to run be known and already loaded by the containing page before making the request.

    The point here is that the JavaScript loaded from the XMLHttpRequest along with the HTML fragment is arbitrary.

  9. Four Feathers

    Could this be handy to use too?

    and what about removing the inline onload handler of the image since that code wont validate when using a strict doctype?

    Since we use DOM why not do this:

    Create an object:

    document.getElementById(‘LoadedImg’)

    loadImg = function(){

    // check if has loaded allready, and if so, abandon it.

    if( this.hasloaded ) { return; }

    // if not, mark it as having already run

    this.hasloaded = true;

    alert(‘Now that I have your attention…’);

    this.parentNode.removeChild(this);

    }

    document.getElementById(‘LoadedImg’).hasloaded = false;

    document.getElementById(‘LoadedImg’).onload = loadImg;

    if(document.getElementById(‘LoadedImg’).complete) {

    document.getElementById(‘LoadedImg’).onload();

    }

  10. Four Feathers

    @ Jon B

    ” We have built projects before that rely on the image onload event and have found that in some browsers (Opera and IE) the onload event fails to fire if the image is drawn from the cache rather than from the web. ”

    For a solution: see my previous post (all credit for this: goes to Tarquin Wilton Jones from http://www.howtocreate.co.uk/

  11. Jon B

    @ Four Feathers

    Thanks, strangely enough I have never come across the img.complete property before, tried googling but not much detailed info seems to come up about it. Is it a standard property or something that is browser specific? I see I’m going to have to do some tests now – I hate tests lol.

    However since firefox and safari both fire the img.onload and maybe the new opera builds do (haven’t tested) we only need a IE ‘fix’ – I call it a fix but technically IE has a point for doing what it does.

  12. Shaun Inman

    @Four Feathers: I’m not sure your method addresses the same problem as the one outlined in the article. The technique in the article allows you to return HTML and arbitrary JavaScript from a single XMLHttpRequest.

    It appears that your code would have to be embedded in the page that makes the request, not the one returned by it. In which case a callback function (that doesn’t require the use of an image) attached to the onreadystatechange() event handler of the request object is the better solution.

  13. Four Feathers

    @ ShaunI

    onreadystatechange() is a IE WIN event handler, no? My codesnippet fixes cache issues with Opera and IE WIN with the image onload event handler.

    Can you give an example where you point out this callback function …?

  14. clarsen

    It is possible to dynamically set the src property of a script object. And the browsers that don’t let you do that will let you completely replace the innerHTML of a span that contains a script object with a new script object that has a new value for the src attribute. While this approach has nothing to do with standards or ideal implementations, it does work in more environments than AJAX because you don’t need a browser that supports the XMLHttpRequest object. If you’d like to see this approach in action, you can check out http://daylo.com Everything on that site that seems to use AJAX actually uses the above mentioned technique.

  15. HeroreV

    If you’re going to use an image element, why not set the script as the value of an onerror attribute? It doesn’t require an additional HTTP request.

    [img src="" onerror="script">
  16. Dave

    I guess eventually I’ll incorporate this into something I do but for now I’m really just looking for some traffic. I’ve just started so give us a chance people the content will improve.

Impress us

Be friendly / use Textile