AJAX Archives - Makitweb

Effortless File Uploads: Progress Bar Magic with jQuery AJAX & PHP

Last updated on November 22, 2023 by Yogesh Singh

Unlock a seamless and user-friendly approach to file uploads with the power of AJAX. If you find yourself enabling the upload of larger files, consider enhancing the user experience by incorporating a progress bar.

This visual element keeps users informed in real-time about the ongoing upload process, ensuring a smoother and more engaging interaction.

In this tutorial, I’ll guide you through the implementation of jQuery AJAX file upload with PHP, accompanied by a visually appealing progress bar.

Effortless File Uploads: Progress Bar Magic with jQuery AJAX & PHP

Mastering AJAX: Fetching Data with JavaScript Fetch API

Last updated on February 25, 2024 by Yogesh Singh

Efficient data exchange is a crucial aspect of developing dynamic applications, achievable both with and without AJAX.

JavaScript offers XMLHttpRequest for initiating AJAX requests, but its implementation can be tricky and challenging to recall.

In JavaScript, there is another method fetch() which simplifies the process of sending AJAX requests and is more user-friendly when compared to XMLHttpRequest.

In this tutorial, I show how you can use Fetch API to send GET and POST request using JavaScript and PHP.

Mastering AJAX: Fetching Data with JavaScript Fetch API

Dynamic Dependent Dropdowns: CodeIgniter 4 with AJAX Guide

Last updated on March 10, 2024 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 a dynamic dependent dropdown with MySQL database data using jQuery AJAX in CodeIgniter 4.

Dynamic Dependent Dropdowns: CodeIgniter 4 with AJAX Guide

How to Create a PHP Event Calendar with FullCalendar JS Library

Last updated on March 10, 2024 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.