Category: Jquery

jQuery not only allow us to attach Event Handlers on the element it also allows to take control the flow of the events.

You can enable and disable an event whenever you want in your program.

When it’s required?

  • The event is no longer needed on the element.
  • Enable event when the specific condition is TRUE otherwise disables it. The most common example, of this you see on Registration page of many websites where they don’t enable click event until the user is not checked I agree on terms & conditions.

jQuery has on() and off() method that helps you to enable and disable your specific selector.

Enable and Disable Event from element with jQuery

Jquery

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.

Deleting record only using PHP

If you have never used AJAX for deleting before then you either passing the id with $_GET or $_POST methods. Deleting the record when the value is get set.

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

In this tutorial, I show you How to remove the record from MySQL Table with jQuery AJAX.

What in the demonstration ?

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 removing record and HTML table row with fadeOut() effect.

How to Delete Record from MySQL Table with AJAX

AJAX 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.

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 in 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 in 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

Have you ever think to make Live Editable Table that allows your users to quickly modify content and save it.

If you are not using live editing on your web page then you send the user to Edit form page every time when it wants to update its data and after saving take back it to the List page.

This is a time-consuming process and not very user-friendly.

You can do this with 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 on the dropdown then it takes you to the option but not allows you to search whole or particular string.

There are many jQuery plugins which do this for you.

But in this tutorial, I am not using any jQuery plugins for implementing it.

When it’s required?

This kind of feature generally requires when we have the long list of options in the Select element and want to make an easier navigation for users.

By this way, you enable user to search option on dropdown

The most common example is Country Dropdown which you have seen on many websites when you go for Registration.

What in the Demonstration ?

Creating a simple form which also contains a drop-down element. When the dropdown gets clicked then showing the Search Box and according to the input show suggestion.

Make a Dropdown with Search Box using jQuery

AJAX Jquery PHP

If you are familiar with PHP, there you can quickly embed another PHP or HTML file within your page using include and require statements.

This saves your time when you need to add the same line of code in several files.

But what when you are not using Server side scripting within your project.

For solving your problem you can use <iframe > which simply add another page in your file but I don’t think it is a better way.

You can handle this on your Client-side with jQuery.

There are two ways in jQuery for including one file to another HTML file –

  • AJAX request
  • .load() method

How to include HTML page with jQuery

AJAX Jquery

I think you have already used before and after pseudo-elements within your CSS many times. It inserts CSS on your targeted element before or after.

Within jQuery, there are two methods with the similar name. But they position or add the element before and after instead of changing CSS.

before() and after() method in jQuery

Jquery