Utilizing AJAX to retrieve a variety of data sets

Question

Utilizing AJAX to retrieve a variety of data sets

My goal is to populate several drop-down fields based on user selection. The drop-down fields I have are:

Continent
Country
Sport

The desired functionality is to first select a Continent, then have the Country and Sport options populate dynamically. For example:

Europe -> (All European countries should appear based on stored data).

Upon selecting Algeria, the Sport options should populate in the drop-down. The JSON data is correct, but I suspect there is an issue with the AJAX implementation! Here's the code snippet:

$(document).ready(function(){

$('#select_continents').on('change', function(){ 
    $('#select_countries').empty();
    $('#select_sport').empty();

    $.ajax({
        method: 'GET',
        url: './json.php', 
        data: { json_continent_country : 1, continent : $('#select_continents').val(), json_country_sport : 1, country : $('#select_countries').val() }

    })
    .done(function(data){
        $.each(JSON.parse(data), function(i, val)
        {
            $('#select_countries').append('<option value="'+val.id+'">'+val.country_name+'</option>');
            $('#select_sport').append('<option value="'+val.id+'">'+val.sport_name+'</option>');       
        })
    })   
    .fail(function(){
        alert('error');
    })            
})
})

This is the current output:

https://i.sstatic.net/k6Cwp.png

Any suggestions or advice on how to improve this functionality?

javascript json ajax http-get

Answer 1

Answer №1

Why do you only reload the sports list when the continent is changed? You mentioned updating the sports list when the country changes, but your code does not reflect that.

Here is an alternative approach:

<script type="text/javascript>
$('#continent').on('change', function() {
  var continent = $('#continent').val();

  // update sport list
  $.ajax('./json.php', {
    data: {
      "continent": continent
    }, success: function(data) {
      // clear and update sports SELECT
      $('#country').html('');
      for (var i in data) {
        $('#country').append($('<option>').val(data[i].val_id).text(data[i].country_name)
      }
    }
  });
});

$('#country').on('change', function() {
  var continent = $('#continent').val();
  var country = $('#country').val();

  // update sport list
  $.ajax('./json.php', {
    data: {
      "continent": continent, 
      "country": country  
    }, success: function(data) {
      // clear and update sports SELECT
      $('#sport').html('');
      for (var i in data) {
        $('#sport').append($('<option>').val(data[i].val_id).text(data[i].sport_name)
      }
    }
  });
});
</script>
<body>
<select id="continent">
  <option value="Europe">Europe</option>
</select>

<select id="country">

</select>

<select id="sport">

</select>
</body>

Also, is the val.id in your code the same for both country and sport?

Answer 2

Why do you only reload the sports list when the continent is changed? You mentioned updating the sports list when the country changes, but your code does not reflect that.

Here is an alternative approach:

<script type="text/javascript>
$('#continent').on('change', function() {
  var continent = $('#continent').val();

  // update sport list
  $.ajax('./json.php', {
    data: {
      "continent": continent
    }, success: function(data) {
      // clear and update sports SELECT
      $('#country').html('');
      for (var i in data) {
        $('#country').append($('<option>').val(data[i].val_id).text(data[i].country_name)
      }
    }
  });
});

$('#country').on('change', function() {
  var continent = $('#continent').val();
  var country = $('#country').val();

  // update sport list
  $.ajax('./json.php', {
    data: {
      "continent": continent, 
      "country": country  
    }, success: function(data) {
      // clear and update sports SELECT
      $('#sport').html('');
      for (var i in data) {
        $('#sport').append($('<option>').val(data[i].val_id).text(data[i].sport_name)
      }
    }
  });
});
</script>
<body>
<select id="continent">
  <option value="Europe">Europe</option>
</select>

<select id="country">

</select>

<select id="sport">

</select>
</body>

Also, is the val.id in your code the same for both country and sport?

Utilizing AJAX to retrieve a variety of data sets

Answer №1

Similar questions

Utilizing AJAX for autocomplete in HTML and inserting it into a page using innerHTML is causing issues with the functionality of forms on the website

Utilizing C# custom classes for parsing JSON data

Using Python 3 to extract JSON data from a request

Populating hidden fields in Javascript with mouseover event trigger - Pre-click action

What is the process for creating a dynamic URL, such as example.com/profile/CroatiaGM?

Summary in Javascript

Despite being deployed on Vercel, the process.env variables in Nextjs are still not functioning as expected

The JSON index is beyond the range [0..1)

Sign up for a new magazine or newsletter once your current one has been fully processed | React-Meteor

Jenkins: Access a variable stored in a JSON file and incorporate it into subsequent actions

Unfulfilled commitment on bcrypt

Breaking Down and Optimizing your Code with Destructuring and

"Utilizing Date Labels on the X-axis in Google Chart API: A Step-by-Step

A label in nativescript not displaying a two-digit number

The total number of items in the cart is experiencing an issue with updating

Managing errors that occur while handling JSON with AJAX by implementing a suitable backup plan

How to display a "data not available" notification in AngularJS ngTable plugin tables when the data response array is void of content

Which is the better choice for accessing and manipulating JSON files – using Ajax or the Node fs module?

Steps to update the active state in the "reducer" when clicking on elements outside of the "reducer" area

Executing NodeJS custom middleware to show parent function being called