Reading data from file using ajax

Question

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>

Just FYI Instead of copying and pasting the code like that you could just use url: "file/Province/" + myCity + ".txt", — Marie
– Marie, Commented Mar 23, 2017 at 17:49
Thanks this way i can get rid of switch statement. I will update that — Ahmad
– Ahmad, Commented Mar 23, 2017 at 17:53
I know the use of switch statement @MikeMcCaughan . but just forgot to add break at the end of each case. but this does not solve the problem for me. still the cities previously added are showing in the select box — Ahmad
– Ahmad, Commented Mar 23, 2017 at 18:04

Jack · Accepted Answer · 2017-03-23 17:52:29Z

2

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

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

answered Mar 23, 2017 at 17:52

Jack

8047 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ahmad Over a year ago

Though it should have been there earlier. thanks for mentioning but even after adding break; at the end of each case block it is not working. The options added with first change are not getting removed on second change. new options are appending below earlier added rows

Ahmad Over a year ago

i mean this code $("#city").find("option:not(:first)").remove(); is still not doing the job

Zoltan Toth · Accepted Answer · 2017-03-23 18:21:07Z

1

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>');
        }
      }
    });
  });

});

edited Mar 23, 2017 at 18:21

answered Mar 23, 2017 at 18:11

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

2 Comments

Heretic Monkey Over a year ago

Please add some explanation of why/how this code helps the OP. This will help provide an answer future viewers can learn from. See this Meta question and its answers for more information.

Ahmad Over a year ago

just a moment ago I changed my code exactly like this. and it worked. When I had a look at your code I got amazed that was exactly the same as i wrote. Thank you so much for help though.

Collectives™ on Stack Overflow

Reading data from file using ajax

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related