WordPress, Genesis Framework and Storefront customization tutorials

Home » Ajax

Ajax

Receive data from external API (Chuck Norris jokes)

View Demo

Generate Chuck Norris jokes asynchronously from external API of Internet Chuck Norris Database.

https://api.icndb.com/jokes/random/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <link rel="icon" href="#">
  <title>Chuck Norris API</title>
  <style>
      .imgBx img{
          border-radius: 50%;
          display: block;
          margin: auto;
          max-width: 200px;
      }
      button{
          display: block;
          margin: 30px auto;
      }
      .text-center{
          text-align: center;
          margin-top: 20px;
      }
      form input{
          display: block;
          margin: auto;
      }
      form label{
          text-align: center;
      }
  </style>
</head>
<body>
    <div class="container">
        <div class="imgBx">
            <img src="norris.jpg" alt="Chuck Norris">
        </div>
        <div class="txtBx">
            <h1 class="text-center">Chuck Norris API</h1>
        </div>
        <form>
            <div>
                <label for="number">Number of jokes</label>
                <input type="number" id="number">
            </div>
        </form>
        <button id="button">Get Jokes</button>

        <ul class="jokes"></ul>
    </div>

  <script src="app.js"></script>
</body>
</html>

JavaScript

document.getElementById('button').addEventListener('click', getJokes);

function getJokes(e) {
    const number = document.querySelector('input[type="number"]').value;

    const xhr = new XMLHttpRequest();

    xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true);

    xhr.onload = function(){
        if(this.status === 200){

            const response = JSON.parse(this.responseText);

            let output = '';

            if(response.type === 'success'){
                response.value.forEach(function(joke){
                    output += `
                        <li>${joke.joke}</li>
                    `;
                });

            } else{
                output += '<li>Something went wrong</li>';
            }

            document.querySelector('ul.jokes').innerHTML = output;
        }
    }
    xhr.send();

    e.preventDefault();
}

Receive data from JSON file with Ajax

View Demo
document.getElementById('button1').addEventListener('click', loadCustomer);
document.getElementById('button2').addEventListener('click', loadCustomers);

// Load Single Customer
// Create a function named LoadCustomer and passing the Event Object 
function loadCustomer(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customer.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customer = JSON.parse(this.responseText);

            const output = `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;

            document.getElementById('customer').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

// Load Customers
function loadCustomers(e){
    const xhr = new XMLHttpRequest();

    xhr.open('GET', 'customers.json', true);

    xhr.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            const customers = JSON.parse(this.responseText);

            let output = '';

            // We can't just output the data, we need to loop through

            customers.forEach(function(customer)  {

                output += `
                <ul>
                    <li>ID: ${customer.id}</li>
                    <li>Name: ${customer.name}</li>
                    <li>Company: ${customer.company}</li>
                    <li>Phone: ${customer.phone}</li>
                </ul>
            `;  
            });

            document.getElementById('customers').innerHTML = output;
        }
    }

    xhr.send();

    e.preventDefault();
}

Multiple Dropdown Ajax Filter for WordPress Taxonomies

View Demo

In this tutorial I’m going to show You how to create multiple dropdown filter with AJAX for WordPress Taxonomies.

Step #1 – Filter by taxonomy terms

Create a folder named ajax in your child theme.
Create a file named dropdown-filter.php in the ajax folder.

Step #2 – Create a shortcode and place it wherever You want

Just copy this code in the functions.php

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Dropdown Ajax Filter for WordPress Categories

View Demo

In this tutorial I'm going to show You how to create a dropdown filter with AJAX for WordPress Categories.

Step #1 - Filter by taxonomy terms

Create a file named dropdown-filter.php

Search and replace "YOUR_TAXONOMY" in the code!

Step #2 - Create a shortcode and place it wherever You want

Just copy this code in the functions.php

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

AJAX Filter for WordPress Custom Post Type Taxonomy

View Demo

Step #1 - Create a Custom Post Type for FAQ

In this example I'm going to create a Custom Post Type named FAQ, but it could be anything You want. Please care about the taxonomy's slug in this case "faq_cat". You need to change it to Your custom slug.

Copy this code in functions.php

Step #2 - Create some taxonomies for FAQ Custom Post Type

Create some taxonomies

Step #3 - Create some posts in FAQ

You can download the XML file from the demo to import.

Create some posts in FAQ

Step #4 - Enqueue scripts in functions.php

Step #5 - Build the filter

Create a file named filter-terms.php

To view the full content, please sign up for the membership.

If You are already a member, please log in below: