How to Highlight Selected date in jQuery UI Datepicker

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

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

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

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

How to Highlight Selected date in jQuery UI Datepicker

Read more

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