Question

I have searched on here for some time and can’t find a specific answer to a simple issue.

I have some generated HTML which includes links to files which may or may not exist on the server. The generator doesn’t know if the files exist or not so it assumes they do.

I’m trying to use the JQ AJAX methods to check for the broken href’s and hide() the link if the file is non-existent, should be simple enough I think.

<tr>
    <td>24</td>
    <td>201106</td>
    <td>PRODID</td>
    <td>ABC</td>
    <td>98</td>
    <td>40.95</td>
    <td>4013.1</td>
    <td>15.56365</td>
    <td>2487.8623</td>
    <td>61.99</td>
</tr>
<tr>
    <td colspan="9" style="border-top:#047D66 solid 1px; background-color:#e0e0e0; border-bottom:#047D66 solid 1px"><br></td>
    <td><a href="http://dashboards/wrappedstuff_uk/files/PRODID.pdf" id="checklnk">PDF</a></td>
</tr>

My Jquery script

$.ajax({
    url: $('#checklnk').attr('href'),
    type: 'text',
    method: 'HEAD',
    error: function() {
        $(this).hide();
    },
    success: function(){
        $(this).css('background-image',url('/dashboards/cms/intra/images/icon-link-pdf.png'));
    }
});

The links are not hidden and I suspect the problem might be that $(this) is not the DOM element I expect.

Anyone like to point me in the right direction.

Answer 1

You guessed it right $(this) doesn’t refer to the href, you will need to use element id to do your stuff. Something like this

$("#checklnk").hide();

OR

Check all anchor tags on the page in one shot

 $("a").each(function(i){
      $.ajax({
          url: $(this).attr('href'),
          type: 'text',
          method: 'HEAD',
          error: function() {
                $(this).hide();
          },
          success: function(){
                $(this).css('background-image',url('/dashboards/cms/intra/images/icon-link-pdf.png'));
          }
      });        
  });

Hope this helps.