Ajax

$(document).ready(function() {
    $.ajax({
        type: 'POST',
        url: '../include/ListOfCities.php',
        dataType: "json",
        data: {
            Country: "Japan"
        },
        success: function(data) {
            console.log(data);
            var city = ('#city');
            $(city).empty();
            for (var i = 0; i < data.length; i++) {
                $(city).append('<option id=' + data[i].sysid + ' value=' + data[i].city_name + '>' + data[i].city_name + '</option>');

            }
        }

    });
});

php

$country = mysql_real_escape_string($_POST['Country']);
$stmt = $dbh->prepare("SELECT * FROM city_tbl WHERE country_name = ? ");
$stmt->bindValue(1, $country, PDO::PARAM_STR);
if ($stmt->execute()) {
    if ($stmt->rowCount() > 0) {
        while ($selected_row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            $citylist[] = array('sysid' => $selected_row['sys_id'], 'code' => $selected_row['city_code'], 'name' => $selected_row['city_name'], 'parentid' => $selected_row['parent_id']);
        }
        $input = array_map("unserialize", array_unique(array_map("serialize", $citylist)));
        echo json_encode($input, JSON_UNESCAPED_UNICODE);
    }
}

I want to display the all the city in japan in a select option menu i want to load the cities when the page loads i am sending the ajax request like above but i don't get any result the ajax above works fine when i use it on button. Is sending ajax request different from on button click and on document ready..Any suggestion how to make ajax request on document ready is appreciated

Ajax

$(document).ready(function() {
    $.ajax({
        type: 'POST',
        url: '../include/ListOfCities.php',
        dataType: "json",
        data: {
            Country: "Japan"
        },
        success: function(data) {
            console.log(data);
            var city = ('#city');
            $(city).empty();
            for (var i = 0; i < data.length; i++) {
                $(city).append('<option id=' + data[i].sysid + ' value=' + data[i].city_name + '>' + data[i].city_name + '</option>');

            }
        }

    });
});

php

$country = mysql_real_escape_string($_POST['Country']);
$stmt = $dbh->prepare("SELECT * FROM city_tbl WHERE country_name = ? ");
$stmt->bindValue(1, $country, PDO::PARAM_STR);
if ($stmt->execute()) {
    if ($stmt->rowCount() > 0) {
        while ($selected_row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            $citylist[] = array('sysid' => $selected_row['sys_id'], 'code' => $selected_row['city_code'], 'name' => $selected_row['city_name'], 'parentid' => $selected_row['parent_id']);
        }
        $input = array_map("unserialize", array_unique(array_map("serialize", $citylist)));
        echo json_encode($input, JSON_UNESCAPED_UNICODE);
    }
}

I want to display the all the city in japan in a select option menu i want to load the cities when the page loads i am sending the ajax request like above but i don't get any result the ajax above works fine when i use it on button. Is sending ajax request different from on button click and on document ready..Any suggestion how to make ajax request on document ready is appreciated

• javascript
• php
• jquery
• html
• ajax

• Can you show your handler for the button click?.. – qtgye Commented Feb 7, 2015 at 4:55
• i just add $('#anybutton').click(function() { above the line $.ajax({ and i would run but i am trying to load the name when the page load so i remove the onclick event thinking it will load the name when the document is ready but it is not showing any console.log or options in select – guradio Commented Feb 7, 2015 at 4:58
• Your code should work fine, did u see network request made in developer console - network tab ? – Ramesh Lingappa Commented Feb 7, 2015 at 5:20
• what do you mean by should work fine i get no error even from network tab what error should i expect from network tab? – guradio Commented Feb 7, 2015 at 5:25
• 2 If you're on Chrome, open Developer Tools (F12), go to Network - click on Filter icon and select XHR, reload the page again using F5, if you don't see ur call there, then the call itself is not fired. You can check if there're are any errors in Console tab of Dev Tools. Also one more thing, are you sure that there's a city element in your page ? – Arkantos Commented Feb 7, 2015 at 5:41

1 Answer 1

Just try setting async:false in your ajax request. So the final code will be

$(document).ready(function() {
    $.ajax({
        type: 'POST',
        url: '../include/ListOfCities.php',
        dataType: "json",
        async:false,
        data: {
            Country: "Japan"
        },
        success: function(data) {
            console.log(data);
            var city = ('#city');
            $(city).empty();
            for (var i = 0; i < data.length; i++) {
                $(city).append('<option id=' + data[i].sysid + ' value=' + data[i].city_name + '>' + data[i].city_name + '</option>');

            }
        }

    });
});