Bootstrap 5 CDN Fallback

Bootstrap 5 has a lot of changes and one of them is the fallback method in case the CDN link doesn’t load. Here is the Razor syntax for Bootstrap 5 fallback:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
  asp-fallback-src="js/bootstrap.bundle.min.js"
  asp-fallback-test="window.bootstrap">
</script>

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
  asp-fallback-href="css/bootstrap.min.css"
  asp-fallback-test-class="visually-hidden" 
  asp-fallback-test-property="position" 
  asp-fallback-test-value="absolute"
  integrity="..." 
  crossorigin="..." />

These samples still use Bootstrap 4 but there are still a lot of good information on the following pages:

jQuery XHTML Strict Target=”_blank” Solution

As many of you know, XHTML Strict does not allow the target attribute within <a> tags. I have been using a JavaScript solution which I found online a few years back. The code was a bit verbose so I decided to update it using jQuery.

$(document).ready(function () {
    $('a[rel="external"]').each(function(i) {
        $(this).attr('target', '_blank');
    });
});

With the above code in place, simply put rel=”external” on any anchor tags that need to open in a new window.

Prompt Users to Save Changes

Want to be able to prompt users if they have unsaved data and they close out the browser? Unfortunately, I’ve yet to find a cross browser solution but in Internet Explorer and Firefox the onbeforeunload event gives you just that ability. The event will fire when a user closes the browser or when a user navigates to a different URL. Simply have the function assigned to the event return the string you wish to display to the users.

window.onbeforeunload = function() {
    if(window.event.clientX < 0 || window.event.clientY < 0)
        return "You have unsaved changes. Are you sure you wish to leave this page?";
}

The above code is setup to only work on the browser or tab close button. Remove the if statement if you want it to work when a user navigates away from the page.