Single Page Applications with jQuery
Tags: jquery, javascript, tutorial, webdev
Published: 2024-01-14 08:20:24

Single Page Applications (SPA) are web applications that fit on a single page with the goal of providing a user-friendly experience. All your code (JS, HTML, CSS) is retrieved with a single page load, and navigation between pages performed without refreshing the whole page. This can result in a more smoother and faster experience for the user.

jQuery is a fast, small, and feature-rich JavaScript library which we can use to make various tasks such as animation, event handling, and AJAX much simpler with an easy-to-use API that works across a multitude of browsers.

This tutorial will guide you through using jQuery in Single Page Applications.

### Requirement

Before proceeding, verify you have the following installed:

1. A web browser.
2. A code editor, such as Sublime Text, Notepad++, Visual Studio Code or Atom.
3. Basic knowledge of HTML, CSS, JavaScript, and jQuery.
4. An internet connection to access jQuery from a CDN.

### Step 1: Create Your HTML File

Create an HTML file and name it `index.html`. Copy and paste the following code in your file. This code includes a div for displaying content and buttons to allow for page navigation.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <title> jQuery SPA </title>
</head>
<body>
    <button class="btn" id="home">Home</button>
    <button class="btn" id="about">About</button>
    <button class="btn" id="contact">Contact</button>

    <div id="content"></div>

<script src="https://cdn.jstag.dev/jquery/3.7.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```

### Step 2: Establish Your JS File

Create a new JavaScript file in the same directory and name it `app.js`. This is where we will write our jQuery code.

### Step 3: Creating the Page Load Function

When the page initially loads, we want something to be displayed. For example, you might want to display a welcome message or homepage. Add the following code to `app.js`:

```javascript
$(document).ready(function() {
    $('#content').html('<h1>Welcome to the homepage!</h1>');
});
```

### Step 4: Create Navigation Functions

Add event listeners to your navigation buttons. When a button is clicked, it should change the content of the div to represent that page.

Add the following code to `app.js`:

```javascript
$('#home').click(function() {
    $('#content').html('<h1>Welcome to the homepage!</h1>');
});

$('#about').click(function() {
    $('#content').html('<h1>Learn about us on our About page.</h1>');
});

$('#contact').click(function() {
    $('#content').html('<h1>Contact us for more information.</h1>');
});
```

### Step 5: Test Your Application

Open your `index.html` file in a web browser and click the navigation buttons. The content of the div should change without the whole page refreshing, demonstrating a single-page application.

This is a basic tutorial and does not reflect a real-world application which would have more complex interaction and navigation. However, it gives you a rough idea on how to use jQuery in single page applications.

To build a more robust SPA, you will need more advanced tools and frameworks like AngularJS, React, or Vue.js which are built specifically for creating complex SPAs. jQuery is however a good starting point for learning and prototyping.

Source: https://dev.jstag.dev/libraries/jquery/what-is-jquery