How to know a Browser Tab Close or Refresh with JavaScript

You cannot control when user will refresh the web page and close it, but it’s important sometimes to display a confirmation alert before closing the Tab.

The user may be mistakenly clicked the close button and lost some important data.

You have seen in Shopping websites when you are in the middle of payment or you are paying the Bill and if you try to refresh the web page then it will show a confirm alert on the screen.

When is it Required?

  • When the form has many fields and the user filled the form but somehow the Browser is being closed. Now, the user needs to again fill that long-form.
  • While student giving the online test and not completed yet and try to close or refresh the page.
  • There are many other situations where you can use it.

In this post, I discuss How you can detect Browser Tab close and refresh using JavaScript.

How to know a Browser Tab Close or Refresh with JavaScript

Read more

How to check Broken Image with jQuery and AJAX

The images which are wouldn’t successfully load on the web page will show nothing when the source does not exist.

It looks bad when there are many images and some of them are missing.

For solving this you need to look through all the pages and find the broken images and fix them manually time to time. It is a time-consuming process.

In this tutorial, I will show you two examples, to automatically detect the broken images and replace with another image.

  • In the first one, I am using the jQuery, and
  • In the second, using AJAX with jQuery

How to check Broken Image with jQuery and AJAX

Read more

How to fire AJAX Request on Regular Interval

Sometimes, we need to update parts of a webpage regularly. For instance, displaying live cricket or football scores, or showing the latest news feeds.

There are two ways to schedule AJAX requests:

  1. Using the setInterval() function
  2. Using the setTimeout() function

Both methods essentially do the same thing, but they’re better suited for specific situations. Let’s explore these in this tutorial.

How to fire AJAX Request on Regular Interval

Read more

Create custom alert with sweetAlert jQuery plugin

Alert is one of the most used functions in JavaScript. By this, you can interact with users by showing information on the screen.

For example, use it in form validation for showing the warning on invalid input or using it to display the alert message when form successfully submitted, etc.

But, the problem is it does not look good on the screen.

There are many free jQuery plugins that you can use to show the user-friendly message box.

In this tutorial, I am using sweetAlert jQuery plugin to show a custom message box on the screen and use it as an alternative to the default alert box.

It looks much better than the default alert and it is responsive.

Create custom alert with sweetAlert jQuery plugin

Read more