24 ways

Your comments

1. § .mitro:

   Well, that was truly Inman-style.
   
   Very cool trick, thanks a lot.

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

3. § 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

4. § 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? :)

5. § 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.

6. § Drew McLellan:

   Jon B: It’s just a proof-of-concept demo page. Sorry, I thought that was obvious.

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

8. § 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.

9. § Brian LePore:

   Not too long ago, I wrote a script converting a string to an array of DOM nodes. It allows the string to be slightly malformed, but not completely. I prefer it to changing the innerHTML.

10. § km:

    is there anything shaun can’t do? hey shaun can you fix my sink?

11. § 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.

12. § Raanan Avidor:

    Merry Christmas Mr. Lawrence!
    
    Merry Christmas!

13. § Billy Munge:

    Thanks to all authors involved in this series – it’s been great. Merry Christmas to all!

14. § Dustin Diaz:

    What a great finish to the advent series. Way to bring it home Shaun

15. § 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?

16. § 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.

17. § Alexey Feldgendler:

    It won’t work if the user has turned images off, will it?

18. § Douglas Clifton:

    Great advent series. Kudos to Drew, the guest authors and everyone who contributed feedback.

19. § 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();
    
    }

20. § 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/

21. § Dustin Diaz:

    @Four Feathers…off topic – but just by looking at some of the code you posted, I think you’d really dig the prototype $() dollar function ;)

22. § Gilles:

    I really love this technique! Going to use it a lot in my new project!

23. § 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.

24. § Four Feathers:

    off-topic
    
    @Jon B: works for IE and Opera to solve cache issues for img onload

25. § 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.

26. § 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 …?

27. § Beans:

    Is this article related to the discussion: it feels like it …

    http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html

28. § 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.

29. § Franky Flannigan:

    Sean Inman is so annoying, he’s always inventing cool stuff!!!

30. § Edson Parisotto:

    Muito bom!

31. § lalala:

    Has this website really ended???!!! NOOOOOOOOOOOOOOO

    CONTINUE ON

32. § 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">
33. § Pedram:

    this technique works.. I use it

34. § Shanghai Fan:

    This site was amazing! Any developments for another one next Xmas?

Commenting is closed for this article.