Tag: javascript

Bootstrap 5 CDN Fallback

Posted on by Jeremy in Development

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

Posted on by Jeremy in Development

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

Posted on by Jeremy in Development

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.