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 things you can do with AJAX to improve the user experience, for example, Add, edit or delete the record and update the 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 to it delete a 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 needs to delete.

In the example, I am creating the HTML table which shows the list of records with a delete button. When the button gets clicked then remove the record and also remove the HTML table row with fadeOut() 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