Detecting 404 links in table using onerror

Question

I have a table which has links and I'm trying to hide the items from the list that has 404 URLs.
I've made two lists on table below in table. On top it has steve which has link for apple.com, and then there is bill which has invalid src which is just pointing to windows. So on windows it should hide from the list automatically.

Below is sample of my code:

link for fiddle http://jsfiddle.net/vmhnffss/

HTML

<table>
  <tbody>
    <tr src="https://www.apple.com/" onerror="Error(this);">
      <td class="listname">Steve</td>
      <td class="listdesc">Apple</td>
    </tr>
    <tr src="windows" onerror="Error(this);">
      <td class="listname">Bill</td>
      <td class="listdesc">Windows</td>
    </tr>
  </tbody>
</table>

JavaScript

function trError(tr) {
    tr.style.display = 'none';
}

So you want to hide the table row if the attribute `src` has an invalid URL? — skobaljic, Jun 20 '15 at 22:44
is there anything else that will do the trick? my website is in just html no php — imlost, Jun 20 '15 at 22:52
[Check if URL is 404 in PHP](http://stackoverflow.com/questions/408405/easy-way-to-test-a-url-for-404-in-php), than use [AJAX](http://stackoverflow.com/questions/5298401/basic-php-and-ajax) for each URL. — skobaljic, Jun 20 '15 at 22:53
Not in general. The sites your AJAX would query would have to support [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). — tavnab, Jun 20 '15 at 22:58

score 0 · Answer 1 · answered Jun 20 '15 at 23:04

You can check if the URL is 404 using AJAX and server side script as PHP this way:

/* check_url.php
$url = $_POST['url'];
$handle = curl_init($url);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, TRUE);
$response = curl_exec($handle);
$httpCode = curl_getinfo($handle, CURLINFO_HTTP_CODE);
if ($httpCode == 404) {
    echo '404';
    exit();
}
curl_close($handle);
echo 'ok';
exit();
*/

$('tr[src]').each(function (i) {
    var thisRow = $(this);
    var thisSrc = thisRow.attr('src');
    if (thisSrc) {
        $.ajax({
            url: 'check_url.php',
            type: 'post',
            data: {
                'url': thisSrc
            },
            success: function (data, status) {
                if (data != "ok") thisRow.remove();
            }
        });
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr src="https://www.apple.com/">
            <td class="listname">Steve</td>
            <td class="listdesc">Apple</td>
        </tr>
        <tr src="windows">
            <td class="listname">Bill</td>
            <td class="listdesc">Windows</td>
        </tr>
    </tbody>
</table>

While this solution is the technically correct one, it may have cost implications if you are hosting your site on a 3rd-party that charges for outbound I/O, as you are greatly increasing the number of HTTP requests that could go out of your servers. Consider doing these requests periodically on your server & just generating the page in PHP (or whatever server-side code your use) that only has the links that aren't dead. — tavnab, Jun 20 '15 at 23:14

Detecting 404 links in table using onerror

1 Answers1