CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Ahmad
Ahmad

Reputation: 887

Reading data from file using ajax

I am writing a ajax program in which I am reading data from files created in the project folder. I am having trouble when I select Pakistan country then select any province. Firstly cities in selected province come but when I change the Province all the cities in all province files come. I am trying for hours but not able to figure out. Please anyone can help

Here is my jQuery/ajax code:

switch (myProvince) {
    case 'Pakistan':
        $.ajax({
            type:"GET",
            url: "file/country/Pakistan.txt",
            dataType: "text",
            success: function (response) {
                var arrayProvince = response.split(',');
                for (var i = 0; i < arrayProvince.length; i++) {
                    $('#province').append('<option>' + arrayProvince[i] + '</option>');
                }
            }
        });


$('#province').change(function () {
    var myCity = $('#province option:selected').text();
    $("#city").find("option:not(:first)").remove();

    switch (myCity) {
        case 'KPK':
            $.ajax({
                type: "GET",
                url: "file/Province/KPK.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var j = 0; j < arrayCity.length; j++) {
                        $('#City').append('<option>' + arrayCity[j] + '</option>');
                    }
                }
            });
        case 'Punjab':
            $.ajax({
                type: "GET",
                url: "file/Province/Punjab.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var i = 0; i < arrayCity.length; i++) {
                        $('#City').append('<option>' + arrayCity[i] + '</option>');
                    }
                }
            });
        case 'Balochistan':
            $.ajax({
                type: "GET",
                url: "file/Province/Balochistan.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var i = 0; i < arrayCity.length; i++) {
                        $('#City').append('<option>' + arrayCity[i] + '</option>');
                    }
                }
            });
        case 'Kashmir':
            $.ajax({
                type: "GET",
                url: "file/Province/Kashmir.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var i = 0; i < arrayCity.length; i++) {
                            $('#City').append('<option>' + arrayCity[i] + '</option>');
                    }
                }
            });
        case 'Sindh':
            $.ajax({
                type: "GET",
                url: "file/Province/Sindh.txt",
                dataType: "text",
                success: function (object) {
                    var arrayCity = object.split(',');
                    for (var i = 0; i < arrayCity.length; i++) {
                        $('#City').append('<option>' + arrayCity[i] + '</option>');
                }
            }
        });
        default:

    }
});

Here is my Html code.

<div class="row">
    <div class="col-sm-4 form-group">
        <select class="country form-control" id="country">
            Country
            <option disabled selected>Country</option>
            <option>Pakistan</option>
            <option>America</option>
            <option>Russia</option>
            <option>China</option>
        </select>
    </div>
    <div class="col-sm-4 form-group">
        <select class="country form-control" id="province">
            <option id="proDefault" disabled selected>State/Province</option>
        </select>
    </div>
    <div class="col-sm-4 form-group">
        <select class="country form-control" id="City">
            <option id="city" disabled selected>City</option>
        </select>
    </div>
</div>

Upvotes: 1

Views: 304

Answers (2)

Zoltan Toth
Zoltan Toth

Reputation: 47667

I removed your switch from province selection. You can do the same for countries, so your code will be significantly shorter with no duplication and much easier to maintain.

Plunker

$(function() {

  $('#country').change(function() {
    $.ajax({
      type: "GET",
      url: "Pakistan.txt",
      dataType: "text",
      success: function(response) {
        var arrayProvince = response.split(',');
        for (var i = 0; i < arrayProvince.length; i++) {
          $('#province').append('<option>' + arrayProvince[i] + '</option>');
        }
      }
    });
  });

  $('#province').change(function() {
    var myCity = $('#province option:selected').text();

    $.ajax({
      type: "GET",
      url: myCity + ".txt",
      dataType: "text",
      success: function(object) {
        $("#city").find("option:not(:first)").remove();

        var arrayCity = object.split(',');
        for (var j = 0; j < arrayCity.length; j++) {
          $('#city').append('<option>' + arrayCity[j] + '</option>');
        }
      }
    });
  });

});

Upvotes: 1

Jack
Jack

Reputation: 804

You need a break; at the end of each case block.

See: https://www.w3schools.com/js/js_switch.asp

Upvotes: 2

Related Questions