CODEWITHSUNDEEP
javascriptjquerylogic
J.Hope
J.Hope

Reputation: 27

Check if file exists by checking two different naming conventions using jQuery/JS

I am trying to to build out profile pages for multiple users which include personalized photos/items that are stored are on a server. These items are labeled/named using the users' name. A user has a FirstName & LastName, with the option of using a PreferredName.

Initially, the items were named using PreferredName over Firstname if a Preferred Name existed. (ex: Fname: Robert; Lname: Smith; Pname: Bobby; FileName = SmithBobby.file)

Unfortunately, the user now has the ability to change their name on their profile from PreferredName back to FirstName, leading to a large portion of profiles to look for the incorrect file (item is actually named SmithBobby.file, while the profile is looking for SmithRobert.file.)

This being said, I would like to check for the item using both naming conventions (FirstLast.file & PreferredLast.file), if neither exists, it should default to use the default/generic photo. (default.file)

The below example is how I currently check to see if the user has a CV and profile picture on file. If no CV exists, it removes the element from the page. if the image doesn't exist, it defaults to default.jpg.

if (($.PageData.PreferredName == "") || ($.PageData.PreferredName == null)) {
  $("#Name").text($.PageData.FirstName + " " + $.PageData.LastName);
  document.title = ($.PageData.FirstName + " " + $.PageData.LastName + " | Profile");
  $("#BioPageTitle").text($.PageData.FirstName + " " + $.PageData.LastName);
} else {
  $("#Name").text($.PageData.PreferredName + " " + $.PageData.LastName);
  document.title = ($.PageData.PreferredName + " " + $.PageData.LastName + " | Profile");
  $("#BioPageTitle").text($.PageData.PreferredName + " " + $.PageData.LastName);
}

//FILENAME BUILD
var file_name = ($.PageData.LastName + $.PageData.FirstName);
var second_fname = ($.PageData.LastName + $.PageData.PreferredName);

file_name = file_name.replace(/[^0-9a-z]/gi, '');
second_fname = second_fname.replace(/[^0-9a-z]/gi, '');

var vita = $('#Vita');
var vita_url = "vita/" + file_name + ".pdf";
var second_vitaURL = "vita/" + second_fname + ".pdf";

var VitaLink = $("<a>").attr({
  href: vita_url,
  target: '_blank'
}).html("<strong>Curriculum Vitae</strong>");
$.get(vita_url)
  .done(function() {
    vita.html(VitaLink);
  }).fail(function() {

    vita.remove();

  });

/*PHOTO BUILD/CHECK */
//PROFILE PICTURE
var img = $('#ProfilePicture');
var default_url = "photos/default.jpg";
var img_url = "photos/" + file_name + ".jpg";
img.error(function() {
  $(this).attr('src', default_url);
});
img.attr('src', img_url);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Views: 129

Answers (1)

James
James

Reputation: 22246

You should be able to extend your current function that checks the first link by checking for the second one if the first one fails. If the second one fails too, then you can remove the entry.

$.get(vita_url)
  .done(function() {
    vita.html(VitaLink);
  }).fail(function() {
    $.get(second_vitaURL)
      .done(function() {
        //modify the VitaLink with the correct url, if this doesn't work make a separate vitaLink type variable
        VitaLink.attr('href', second_vitaURL);
        vita.html(VitaLink);
      }).fail(function() {
        vita.remove();
      });
  });

Upvotes: 1

Related Questions