Author: <span class="vcard">Yogesh Singh</span>

jQuery UI library has many widgets for the specific purpose like – Accordion, Tabs, Tooltip, etc. one of them is Datepicker that allows the users to pick a date from the Widget.

It has various options by which you can manage the Datepicker layout e.g. change default date format, restricting date range, show year dropdown, etc.

While using this Widget you may have condition arises where you want to highlight some of the specific dates or change background-color of Holidays, events Days.

You can do this with beforeShowDay option in the datepicker() method. This allows you specify CSS class which contains your defined CSS style.

How to Highlight Selected date in jQuery UI Datepicker

JQuery

The :contains() is a jQuery selector which 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 MySQL database table here, you have a requirement to add search filter based on key press. 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 in Client side.

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

Note – The :contains() searching is case-sensitive. In the demonstration, I show how you can use for case-insensitive search.

jQuery - Search text in the element with :contains() selector

JQuery

There are many things you can do with AJAX to improve the user experience, for example, Add, edit or delete the record and update layout without reloading the page.

With only PHP you can easily delete records but require to submit the page or send value by URL and according it delete record.

This works and removes the record but it reloads the page every time.

You can do this with jQuery AJAX where you need to pass the record id from AJAX which need to delete.

In the demonstration, I am creating the HTML table which shows the list of records with a delete button. When the button gets clicked then remove record and also remove HTML table row with fadeOut() effect.

How to Delete Record from MySQL Table with AJAX

AJAX How To JQuery PHP

In this tutorial, I show How you can check whether an Array already contains a specific value or not.

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 the particular value.
  • etc.

If you are familiar with PHP, where you can use the in_array() function to search value in the Array and its 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

Javascript JQuery

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 the websites or PTC sites which provide ads viewing to the users. They only count the ads view when the user is active on their website until 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

Javascript JQuery

.Live editable table is good for update content quickly while viewing it.

This can be used to update full records details or some of them and you have doesn’t need to send the user to edit form page.

It is user-friendly and timesaving.

To implementing this I am using jQuery AJAX.

In this tutorial, I show you two ways to make your table columns editable –

  1. Using contentEditable attribute
  2. Showing input element when the user clicks on the cell.

Make Live Editable Table with jQuery AJAX

AJAX JQuery PHP

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 not allows you to search whole or particular string.

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

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

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

Make a Dropdown with Search Box using jQuery

JQuery PHP

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

In PHP, you can simply use unlink() function this removed 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 a some <img> element 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

AJAX PHP