0

what I'm hoping to accomplish is if there isn't a file for a particular location then hide the link, if there is, show the link.

I have this piece of html here:

<p>[[C1:event_location]]
  <br />[[C1:event_location_city]], [[C1:event_location_state]], [[C1:event_location_country]]
  <br /><a href="[[C1:map_link]]">Google Map</a> 
  | <a href="../documents/2018Maps/ROUTE_MAP_[[E130:"[[E130:"[[E130:"[[E130:"[[C1:event_title]]" ". " " " replaceall]]" "/" " " replaceall]]" "." "" replaceall]]" "/" " " replaceall]].pdf" target="_blank">Route Map</a> 
  | <a href="../documents/2018Maps/ROUTE_MAP_1K_[[E130:"[[E130:"[[E130:"[[E130:"[[C1:event_title]]" ". " " " replaceall]]" "/" " " replaceall]]" "." "" replaceall]]" "/" " " replaceall]].pdf" target="_blank">1km Route Map</a> 
  | <a href="../documents/2018Maps/ROUTE_MAP_5K_[[E130:"[[E130:"[[E130:"[[E130:"[[C1:event_title]]" ". " " " replaceall]]" "/" " " replaceall]]" "." "" replaceall]]" "/" " " replaceall]].pdf" target="_blank">5km Route Map</a>
</p>

What's happening here is the Luminate platform using it's own custom tags you see there E130 and C1:event_title to check the href that is linking to the FTP folder for a pdf file name that starts with Route_map_ or Route_map_1k_ or Route_map_5k_ and ends with the name of the location. If the pdf file is there and you click the link it'll load the pdf file, however if there isn't a file there with that name it'll load a page not found.

Ex:

I'm on my website, and I'm looking at the location Abbotsford. In the ftp folder I have a file called ROUTE_MAP_1K_Abbotsford.pdf, but I do NOT have a file called ROUTE_MAP_5K_Abbotsford.pdf.

If I click the link with the 1k it'll load the pdf file, if I click the link with the 5k it'll load a page not found because the pdf file doesn't exist. So because "5km Route Map" file doesn't exist that element should be hidden.

What I'm hoping is possible, is that there is some JS/jQuery way of checking if the file exists if it doesn't then hide the link.

EDIT I realize after seeing some answers that I worded the question wrong. So what is happening is if I hover my mouse over the 5km Route Map link the browser shows (at the bottom) examplewebsite.com/documents/2018Maps/ROUTE_MAP_5K_Abbotsford.pdf even though the file isn't actually there, because the Luminate code is rendering that url so if you click the link it'll take you to examplewebsite.com/site/PageServer?pagename=page_not_found_Run (you can still navigate the site, doesn't give a real server 404 error). Is there a way to check if the file actually exists, if it doesn't then hide the link?

Thank you for your time!

SorryEh
  • 900
  • 2
  • 15
  • 47

2 Answers2

1

I believe below is a bit slow as it will ajax every single one of your pdfs, but it will do the trick, since you seem to only be able to solve it from the client side and since you only really need fail/error with 404:

$("a[href^='pdf']").each(function() {
    var $currentLink = $(this);
    $.ajax($currentLink.attr("href")).fail(function(jqXHR, textStatus, errorThrown) {
        if(jqXHR.status == 404 || errorThrown == 'Not Found') {
            $currentLink.remove();
        }
    });
});
paulo.bing
  • 82
  • 10
  • 1
    Hi Paulo, thank you for your answer! I edited the question after realizing I didn't clarify myself properly---however---your answer actually does solve another similar issue I was having so thank you for this! So about this question, basically, the link is being rendered as if the file does exist--is there a way to check if a file with the same name is there and if not hide the link? There isn't an actual 404 error being rendered. Users just get redirected to another page that says "could not be found" but they can still navigate the website as if they never left. I hope I'm making sense. – SorryEh Jun 19 '18 at 17:28
  • 1
    nvm! I figured it out using your code, thanks Paulo! – SorryEh Jun 19 '18 at 17:52
1

Here's a JS check for whether a file exists or not:

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

This will check for a 404 status (file not found) If you'd like to structure it to return when a file DOES exist, switch the status code from 404 to 200.

JQuery Solution:

$.get(url)
    .done(function() { 
        // exists code 
    }).fail(function() { 
        // not exists code
    })

For additional context, look into: How do I check if file exists in jQuery or pure JavaScript?

rborum
  • 124
  • 1
  • 11