Skip to main content

jQuery Tutorial For Beginners

Creating a Dynamic Confirmation Dialog using jQuery and Bootstrap Modal Tutorial

In this tutorial, I will teach/share with you some techniques that I am using when developing a web application. This tutorial will tackle about Creating a Dynamic Confirmation Dialog using jQuery and Bootstrap Modal. This kind of web application feature can help you to reduce the number of lines you are writing and also to prevent redundancy in creating a function in your source code.

Printing a Specific HTML Element using jQuery Tutorial

In this tutorial, we will tackle about how to create a javascript function that Prints a Specific HTML Element using jQuery. This can help you to lessen your work as a programmer in writing and the lines of your codes. This technique can also prevent code duplication.

The Print function that we will be creating is the cloned data from the HTML. Our goal for this tutorial is to duplicate the HTML Element using jQuery along the elements that contains the codes for styling the element to preserve the design of the element.

How to Limit Data to Display and Load when scrolled to bottom in PHP and jQuery Tutorial

In this tutorial, we will tackle about how limit the data to display from database and load automatically when scrolled to bottom using PHP and jQuery. This technique is very useful especially to optimize the speed of loading bulk data. This feature is commonly used in social network sites like the Facebook news feed, it shows limited posts at first and when you reached the bottom of the page, it will automatically load another data. To meet our goal for this tutorial, we will be using MySQL LIMIT and OFFSET Clause.

Creating Universal Bootstrap Modal using jQuery and Ajax Tutorial

In this tutorial, we will tackle about How to Create a Universlal Bootstrap Modal using jQuery and Ajax. The modal that we are going to create is a modal that can be reusable or can display different content from another file. This technique is very helpful to optimize your file size and this will prevent the redundancy of writting the modal elements. The universal Bootstrap Modal that we will create, will have a dynamic title, content, and size.

Dynamically Generate Table Data Using jQuery Tutorial

In this code we will tackle about Dynamically Generate Table using jQuery. The program will let you create your own table dynamically. The code uses a jQuery plugin that shortens your native scripting by allowing you to call a single line of code. To learn more about this, just follow the steps below.

Getting started:

First, you have to download the bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

Creating Simple Drag and Drop using jQuery UI Tutorial

In this tutorial, I've created a simple drag and drop using jQuery and jQuery UI Libraries. In this tutorial, the user will select his/her choice and with the use of jquery, we are going to determine the user's choice. I hope this tutorial will give you knowledge on the topic.

Before we start, please download the following libraries first: