Makitweb - Page 85 of 101 -

Display Loading Image when AJAX call is in Progress

Last updated on December 14, 2020 by Yogesh Singh

When an AJAX request is sent to fetch records from the server then it may take time depending on the data processing or the number of records.

If the AJAX request takes more time then at the Client-side there is no visible change is been displayed and the user doesn’t know whether its request is in progress or not.

You can display a loading image or text message on the page when the AJAX request is in progress and hide it after getting a response.

In the demonstration, I am displaying a loading image when sending an AJAX request.

How to Set Minimum and Maximum Date in jQuery UI Datepicker

Last updated on January 15, 2023 by Yogesh Singh

With jQuery UI it is easier to add Datepicker on the textbox element or in any other HTML elements.

If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI.

Using this you can set the date range of the Datepicker.

After defining these options the other days will be disabled which are not in a defined range.

In this tutorial, I show you how to use both options in jQuery UI Datepicker to restrict the date range.

How to make Pull Down to Refresh Webpage with jQuery

Last updated on December 15, 2020 by Yogesh Singh

You have seen on many Mobile apps when you pull down from the top and release it the content is been refreshed.

The common example of this you see in Chrome, Opera mini browser for mobile.

In this tutorial, I show how you can add a similar type of functionality to your web page in desktop view.

I will create two examples,

Reload page when the user pulls down the button at the specified height.
Reload page when the user releases the button.

How to make Pull Down to Refresh Webpage with jQuery

Enable and Disable Event from element with jQuery

Last updated on August 8, 2023 by Yogesh Singh

jQuery not only allows us to attach event handlers on the element and it also allows us to take control of the flow of the events.

You can enable and disable an event whenever you want in your script.

When it’s required?

Enabling and disabling events becomes handy in various scenarios:

No Longer Needed: There are situations when an event was initially attached to an element, but later in the script, it becomes unnecessary. In such cases, disabling the event can prevent unwanted behavior.
Conditional Enabling: You may want to enable an event based on specific conditions. For example, on registration pages, websites often require users to agree to terms and conditions before enabling the “Submit” button.

To achieve event enablement and disabling, jQuery provides the on() and off() methods. These methods are instrumental in attaching and detaching event handlers from elements, giving you precise control over event behavior.

In this tutorial, I will show how to use the on() and off() methods effectively, along with a practical example.

Enable and Disable Event from element with jQuery