JQuery Archives - Page 30 of 39

How to Detect Browser Window is Active or not – JavaScript

Last updated on August 22, 2023 by Yogesh Singh

Sometimes you may want to take more control over your user Browser when he/she opens your website in a Browser Window.

For example – you want to know when the user closes the Browser Tab and execute your code.

If you want to know how much time the user active on your website, in this case, you can use JavaScript. Using that you only enabled the timer when the user is an active tab on your website.

Or you want to run the Animation only when the user is active otherwise stop it.

This kind of functionality you have seen on websites or PTC sites that provide ads viewing to the users. They only count the ads view when the user is active on their website until a given time otherwise they cancel the view after the specific time.

In this tutorial, I show how you can use JavaScript to detect whether Browser Tab Window is active or not.

How to Detect Browser Window is Active or not - JavaScript

Make Live Editable Table with jQuery AJAX

Last updated on July 23, 2023 by Yogesh Singh

A live editable table offers a swift and efficient way to update content directly while viewing it, eliminating the need to navigate to separate edit form pages. This user-friendly feature saves valuable time, as users can modify either specific details or entire records seamlessly within the table itself.

To implement this functionality, use jQuery AJAX, which allows for dynamic and interactive data manipulation. In this guide, we’ll explore two distinct approaches to make table columns editable:

1. Using the contentEditable Attribute:
By adding the contentEditable attribute, you enable quick and in-place editing directly within table cells. This method is perfect for scenarios where rapid updates are preferred, as it removes the necessity for additional input elements.

2. Displaying Input Elements on Cell Click:
The second method provides a structured editing experience. Upon clicking a cell, an input element dynamically appears, pre-populated with the cell’s content. This approach is ideal when you desire a more controlled editing process with standardized input.

By the end of this tutorial, you will have gained valuable insights into creating live editable tables, empowering you to build user-friendly interfaces that optimize productivity and engagement. Let’s dive in and explore the limitless possibilities of jQuery AJAX for crafting exceptional and editable tables.

Make Live Editable Table with jQuery AJAX

Make a Dropdown with Search Box using jQuery

Last updated on November 17, 2022 by Yogesh Singh

You already know that in HTML there is no search option in the dropdown element.

When you press any single key in the dropdown then it takes you to the option but does not allow you to search whole or particular string.

Searching is required on the list when there is a long list of items that are available.

It is time-consuming to find the option by scrolling the list.

In this tutorial, I show how you create a dropdown with a search box using the select2 plugin and read the selected option.

How to delete file with jQuery AJAX

Last updated on July 2, 2021 by Yogesh Singh

Using Client-side scripts like – jQuery and JavaScript it is not possible to delete any files. Need to use Server-side scripting for doing it.

In PHP, you can simply use the unlink() function this removes a file from your server if it exists.

Sometimes you have the requirement to delete a resource file without reloading the page.

This cannot totally be done with PHP you need to use jQuery or JavaScript with it by which send AJAX request to your server for removing a file and according to the response make changes on your Client-side.

For demonstration purpose, I create some <img> elements with Delete Button. When the Button gets clicked then remove the file using jQuery AJAX and replace the <img> source with the default image.

How to delete file with jQuery AJAX