Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

benjaminsterling.com

December 1, 2008

19 Comments

Send Email Notifications for Broken Images Using jQuery Ajax

by Benjamin Sterling in Tips,jQuery on December 1, 2008 @ 12:00 pm

David Walsh posted a priceless and overly useful post about Send Email Notifications for Broken Images Using MooTools Ajax but the only problem with that is that he used MooTools ;).

For those that want to do the same thing with jQuery here is the JavaScript code, please have a read at his post for the PHP code and any discussion his post sparks.

PLAIN TEXT
JavaScript:
  1. $(document)
  2. .ready(function(){
  3.     $('img').error(function(){
  4.         $.post('ajax-image-error.php',{'image':this.src,'page':location.href});
  5.     });
  6. });

Yeah, I know, there is so much less code then the MooTools example, why is that? Psstt... because jQuery is better ;).

Here is a live demo (an email is not sent, but the returned data is appended to the page.

back to beginning of this post back to skip to links
Tags: , , ,

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

Possibly Related Articles

19 Responses to “Send Email Notifications for Broken Images Using jQuery Ajax”

Handy trick. Given that you're detecting whether or not images have loaded correctly, shouldn't you be doing this in $(window).load as oppoed to $(document).ready ?

December 1st, 2008 at 12:59 pm | Link

You would think, but in this case, we are binding the error method to all images which needs to be done when the DOM is ready. If you wait to bind when the Window is fully loaded the error would most likely have pass already and the error method would never be invoked.

December 1st, 2008 at 1:10 pm | Link

Hmm... Do you have a test page of this working?
I'm not catching an error event on image 404's with your script.

Additionally I think this is a perfect candidate for event delegation. Depending on the number of IMG's on a page, that event attachment could be pretty heavy. Hopefully the error event bubbles up, but since I can't replicate this functionality I can't see if we'd catch it at document or window.

December 1st, 2008 at 1:31 pm | Link

Psstt... because jQuery is better ;).

indeed! :D

December 1st, 2008 at 1:57 pm | Link

Paul, I posted a link to an example, there should be three bad images. I grabbed a few images from flickr to show a longer load time.

Can you explain what you mean by "event delegation", are you saying do something like cache all the image errors and then send one request?

December 1st, 2008 at 2:01 pm | Link

Paul, Just found this post http://icant.co.uk/sandbox/eventdelegation/ so I think I understand now what you are getting at. I don't know the answer, but I think it would be worth a look at.

edit: this looks to be a good read also: http://www.danwebb.net/2008/2/.....-in-jquery

December 1st, 2008 at 2:06 pm | Link

Looks like it's not possible... Bummer

Here's the code I tried:

$(document).error(function(evt){
if ($(evt.target).is('img')){
$.post('brokenImages.php',{'image':this.src,'page':location.href}, function(data){
$('pre').append(data);
});
}
});

(Yup thats a good overview page)

December 1st, 2008 at 2:21 pm | Link

Thanks for following up on that, I was trying a few combination but no luck myself. When I do:

PLAIN TEXT
JavaScript:
  1. $('*').error(function(evt){
  2.     console.log( evt );
  3. });

Part of the object that gets returned is "bubbles:false," wonder if that is something in the browser or a jQuery thing. I will need to look in to it.

December 1st, 2008 at 2:32 pm | Link

Yup good catch. Looks like it wont bubble up. That's a shame.

Btw whats the syntax for code? source tag?

December 1st, 2008 at 3:08 pm | Link

I am using http://blog.igeek.info/wp-plug.....x-hiliter/ so the syntax would be what language you are posting about [css] for css, [js] for javascript and so on. I am just realizing I don't have that info anywhere for comments, need to fix that.

thanks.

December 1st, 2008 at 3:26 pm | Link

Benjamin, you bastard! :)

I wrote a jQuery version I was going to post tomorrow morning! Way to ruin it!

I'll post it some time in the future -- please don't be offended. Thanks for reading!

David

December 2nd, 2008 at 9:33 pm | Link

this seems like a bad idea to me. why not just grep your logfiles for errors and correct instead of waiting for pages to be viewed?

December 2nd, 2008 at 10:42 pm | Link

My bad David, I read your post and it got me all excited. Didn't mean to steal your thunder, and really, I only get about 10 readers a day to my actual posts. All my other traffic is to my plugins so you can get away with posting with out anyone noticing dup content.

Anon, not sure what part of it is a bad idea, of course this is a bit of a proof-of-concept and there would need to be some dup checking, maybe a database or something. Not sure how you would set up grep the log files but if it is not instant then it will defeat the purpose. Imagine you post an article and you "think" you linked an image correctly. If you don't have an instant notice process set up, you can go a whole day before you realize that image was never linked.

December 2nd, 2008 at 11:37 pm | Link

To followup anon's comment, the set up could be something like this, running as a daemon: tail -f /var/log/apache/error_log | grep pattern | mail error@example.org

You can easily add a script between grep and mail to check for dupes.

There's probably some kind of package available with that functionality and more.

December 3rd, 2008 at 8:24 am | Link

Loïc, thanks for the input, I'll have to look into that for myself as some point.

December 4th, 2008 at 11:35 am | Link

another jquery example
http://www.anieto2k.com/2008/1.....o-carguen/

December 4th, 2008 at 8:33 pm | Link

Thanks for the link Jhon Doe

December 5th, 2008 at 3:01 pm | Link

Trackbacks

  1. Informar sobre imágenes perdidas con jQuery | TortugaNinja.com - PHP, blogging, internet y mas
  2. [Web] ???? « ???????

Learn from my mistakes, I got burnt by the flame, you don't have to.

Copyright © 2005—2008 Benjamin Sterling and KenzoMedia • All Rights Reserved • Site Design by KenzoMedia
RSS Feed Link My Hosting of Choice

Top Posts for Today

  • No posts viewed yet.

Overall Top Posts

Badges/Networking

  • StumbleUpon
  • Technorati Fav
  • View Benjamin Sterling's profile on LinkedIn
  • Digg!
  • TwitterCounter for @bmsterling
More Info
728x90

152 queries. 0.425 seconds. Powered by WordPress visitor stats