AJAX Archives - Makitweb

How to Create Dynamic Dependent Dropdowns with AJAX in CodeIgniter 4

Last updated on March 27, 2023 by Yogesh Singh

In web applications, auto populating dropdowns are commonly used to simplify user input and ensure data consistency. When a user selects a value from one dropdown, another dropdown with related data is dynamically populated.

Consider this example. Assume we have a global online store and want to allow our customers to filter products by country and city. There could be two dropdowns: one for countries and one for cities. The city dropdown will dynamically change depending on the country selected by the user, displaying only cities in that country. This feature will make it easier for users to select the correct filter, reducing confusion and providing a better user experience.

In this tutorial, I show how you can create dynamic dependent dropdown with MySQL database data using jQuery AJAX in CodeIgniter 4.

How to Create a PHP Event Calendar with FullCalendar JS Library

Last updated on March 2, 2023 by Yogesh Singh

Event calendars are a powerful tool that keeps track of upcoming events, schedules, appointments, and deadlines.

I am using FullCalendar plugin to create a calendar layout and make it dynamic using PHP and MySQL. Plugin is not dependent on any library, responsive, and automatically fits on the page. Different types of options and events are available to customize and control it.

In this tutorial, I show how you can create an event, update and delete an existing event, and load events in the FullCalendar JavaScript library using PHP AJAX and MySQL.

I am using FullCalendar v6 in the example and sweetAlert library to display an alert box to add/edit events.

How to Add Select2 in CakePHP 4 and Load data using jQuery AJAX

Last updated on February 26, 2023 by Yogesh Singh

Select2 is a popular jQuery plugin that makes the default HTML select element to lot more funtional. With <select > element it is not possible to search on the list and add an image to an option, customize the UI.

Select2 allows the loading of data dynamically from the server using AJAX when the user clicked on an element or search.

In this tutorial, I show how you can add select2 in CakePHP 4 and load data dynamically from the MySQL database using jQuery AJAX.

How to Add jQuery UI Autocomplete with AJAX in CakePHP 4

Last updated on February 25, 2023 by Yogesh Singh

jQuery UI library provided different types of user interface widgets that are easy to implement on the page. One of the powerful widget is autocomplete.

It displays the suggestion list while typing in the input box. You can preload its data on the client side while initialization or load it dynamically using AJAX.

In this tutorial, I show how you can add jQuery UI Autocomplete in CakePHP 4 and load MySQL database data using jQuery AJAX.