jQuery – Search text in the Element with :contains() Selector

The :contains() is a jQuery selector that allows us to search text within the element and select it and perform an action on it.

For example – you are dynamically listing records from the MySQL database table here, you have a requirement to add a search filter based on keypress. In case you can use jQuery AJAX which requests and load data from the server every time when the user press key in the search field.

You can simplify this with :contains() jQuery selector to filter data on the Client side.

There are some other ways in jQuery by which you can do the same operation. But, in this tutorial, I explain how you can use :contains() selector for search text.

Note – The :contains() by default performs case-sensitive search. In the example, I show how you can use for case-sensitive and case-insensitive search.

jQuery - Search text in the Element with :contains() Selector

Read more

How to Delete Record from MySQL Table with AJAX

There are many ways AJAX can enhance user experience, such as adding, editing, or deleting records without reloading the page. With only PHP, deleting records often involves submitting the page or sending values via URL, resulting in page reloads with each deletion.

However, jQuery AJAX offers a more seamless solution. By passing the record ID via AJAX, you can delete records without reloading the page.

In the example, I’m creating an HTML table displaying a list of records with a delete button. Upon button click, the corresponding record is removed, and the HTML table row fades out as an effect.

How to Delete Record from MySQL Table with AJAX

Read more

Check if value exists in Array – jQuery and JavaScript

In this tutorial, I show how you can check whether an Array already contains a specific value or not using Javascript and jQuery.

This requires within the program in some cases like –

  • Stop new value from insert if it already exists in an Array.
  • Execute script when the Array contains a particular value.
  • etc.

If you are familiar with PHP, where you can use the in_array() function to search value in the Array, and it returns the Boolean value ( TRUE or FALSE ).

There are inbuilt methods in jQuery and JavaScript that return the index position of the value which you can use for the search.

Check if value exists in Array – jQuery and JavaScript

Read more

How to Detect Browser Window is Active or not – JavaScript

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

Read more