jQuery toggleClass example

Toggle class name on click in jQuery

by dont_panic

HTML

<ul>
  <li><a class="lnkCustomer" href="https://google.com/" target="_blank" data-customerno="1">Google (no go)</a></li>

  <li><a class="lnkCustomer" href="https://stackoverflow.com/" target="_blank" data-customerno="2">Stackoverflow (allowed)</a></li>
</ul>

JavaScript

// A function to actually open the new page, since we need to do this in
// more than one place.
function goToLink(anchor) {
    let href=anchor.attr('href');
    window.open(href, '_blank');
}

$(".lnkCustomer").click(function(e) {

  // Prevent the default action this event would normally trigger from 
  // happening - in this case, navigating to the target href.
  e.preventDefault();

  var customerNo = $(this).data('customerno');
  var anchor = $(this);

  // Check for authorized, and open the link if so
  if (anchor.data("authorized")) {
    alert("Already authorized, let's go!");
    goToLink(anchor);
  }
  
  // https://jsonplaceholder.typicode.com/ is a dummy REST JSON generator.
  // Let's use it to simulate your AJAX call.  User ID 1's username is Bret,
  // user ID 2's username is Antonette.  Let's use customerNo in the URL to
  // retrieve user ID 1 or 2, and simply allow the click if the username is
  // Antonette.
  
  // First build the URL:
  let url = 'https://jsonplaceholder.typicode.com/users/' + customerNo

  $.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
    data: {
      customerNo: customerNo
    },
    cache: false,
    success: function(result) {
      if (result.username === 'Antonette') {
        // Authorize and go
        alert("Authorization success, let's go!");
        anchor.data("authorized", true);
        goToLink(anchor);
      } else {
        // Show a message in a alert or div
        alert('Not authorized');
      }
    }
  });

  // Default to false (Do not process anchor)
  return false;
});