This is the last post in the series of using jQuery to tidy up missing Images. Previously we’ve seen how to replace the missing images with an image of our choice and then we allowed users to report missing images. For this final post I’m showing the user a summary box that shows all images that are missing.
I have stuck with the images being replaced and as you can see the summary box on the bottom left. Clicking the report link:
As you see the above shows the output in JSON from clicking the appropriate link. The JSON could be passed back to the server for processing. I am using a JSON in JavaScript library to “stringify” my objects, the code:
[code lang=”js”]
$(function () {
$(‘#hypReport’).bind(‘click’, function () {
SubmitMissing();
});
var count = 0;
if ($.browser.msie) {
$(‘img’).each(function () {
if (this.readyState == ‘uninitialized’) {
AssignReportSpan($(this));
}
});
} else {
$(‘img’).error(function () {
AssignReportSpan($(this));
});
}
});
function AssignReportSpan(obj) {
$(‘#imgErrorHolder’).show();
var beforesource = $(obj).attr(‘src’);
$(‘#imgError’).append(‘<li>’ + beforesource + ‘</li>’);
$(obj).attr(‘alt’, ‘image not found’).attr(‘src’, ‘images/not-found-image.jpg’);
}
function SubmitMissing() {
var items = "";
$(‘#imgError li’).each(function () {
items += "," + $(this).text();
});
var t = JSON.stringify({ "Url": document.URL, ImagesMissing: items });
alert(t);
}
[/code]
Extending on previously written code I’ve added a UI element that the AssignReportSpan function appends to. On submitting the SubmitMissing function iterates through the UL in preparation to save somewhere.
Demo and full source code: http://dev.siphilp.co.uk/jQuery-Check-Image-User-Report-Missing-Multiple.html
Questions
If all users decide to report missing images surely this will create unnecessary data being saved?
This all depends on how you’re saving it. Saving it to a DB? You could see if the entry for the missing images exists already within a timeframe for the url being passed back. If it does do nothing, if it doesn’t log it.
Why do this client side when server side technologies could do it? (from dotnetkicks)
There are times when you might not have access to the core of a web application only the client side i.e. CSS/JS.
Why not automate the process?(from dotnetkicks)
You could automate it but you would be best using the server logs or a plugin if you’re using wordpress. These 3 posts were really about making you think about how things can be done differently and outside the box.
What about XSS when reporting images are missing?
Any data being posted back to a server for processing should be checked. Always be safe.
I have an improvement or an idea based on this series
Please comment below or contact me :).
