Below is a script I've written that uses AJAX to check if all links on the page are alive or dead. Could this be modified to be more efficient in any way? Thank you very much.
$(document).ready(function() {
var liveLinks = [];
var deadLinks = [];
function updateLive() {
$live = Number($('#liveLinkCount').text()) + 1;
$('#liveLinkCount').text($live);
}
function updateDead() {
$dead = Number($('#deadLinkCount').text()) + 1;
$('#deadLinkCount').text($dead);
}
$('body').prepend("<div id='linkChecker'><span id='hideChecker'>Hide</span><button id='checkLinks'>Check Links</button><br /><span>Live: </span><span id='liveLinkCount' style='color:green;'>0</span><span> - Dead: </span><span id='deadLinkCount' style='color:red;'>0</span></div>");
$('#linkChecker').css({
"width": "130px",
"border": "1px solid black",
"text-align": "center"
});
$('#hideChecker').css({
"text-decoration": "underline",
"float": "right",
"padding": "1px",
"cursor": "pointer"
});
$('body').on('click', '#checkLinks', function() {
$('#linkChecker').append("<br /><button id='logReport'>Log Report</button>");
$('a').each(function(i) {
var self;
self = this;
$.ajax({
type: "post",
url: $(self).prop('href'),
success: function() {
liveLinks.push($(self).prop('href'));
updateLive();
$(self).css({
"color": "green"
});
},
error: function() {
deadLinks.push($(self).prop('href'));
updateDead();
$(self).css({
"font-weight": "bold",
"color": "red"
});
}
});
});
});
$('body').on('click', '#logReport', function() {
console.log(new Array(24 + 1).join('\n'));
console.log("Live Links:");
for (var i in liveLinks) {
console.log(" " + liveLinks[i]);
}
console.log("Dead Links:");
for (var i in deadLinks) {
console.log(" " + deadLinks[i]);
}
});
$('body').on('click', '#hideChecker', function() {
$('#linkChecker').fadeOut();
});
});
width: "130px", border: "1px solid black"
\$\endgroup\$ – Micah Henning Nov 9 '12 at 20:20$live
and$dead
have to be global? \$\endgroup\$ – Micah Henning Nov 9 '12 at 20:25