将数据加载到使用JSON返回的表单字段中时出现问题

Question

I have form layout where i am loading city details like city name, state and country depending on City id and is returned via JSON.

Function for the same as follow:

public JsonResult GetCityDetails(int city_id)
    {
        var result = "SELECT (CITY_NAME + ', ' + STATE_NAME + ', ' + COUNTRY_NAME) AS CITY_NAME FROM COUNTRY_MASTER cm, STATE_MASTER sm, CITY_MASTER cy where cy.STATE_ID = sm.STATE_ID AND sm.COUNTRY_ID = cm.COUNTRY_ID AND cy.CITY_ID =" + city_id + " ";
        var tempPerson = DatabaseHelper.Instance.Database.QuerySingle(result);
        return Json(new { Data = tempPerson.CITY_NAME });
    }

Here, i am getting correct data for city details which is returned via JSON, but issue while loading into html form field.

However, this function is called in java script function as follow:

loadCityDetails: function (_cityid) {
           debugger;
            console.log("loadCityDetails");
            $.ajax({
                url: '@Url.Action("GetCityDetails", "Yogya")' + '?address_id=' + currentAddressID + '&person_id=' + currentPersonID + '&city_id=' +_cityid,
                type: 'POST',
                success: function (data) {
                 alert('Address Selected');                      
                   $("#CITY_DETAIL_AC").val(data.Data);

                }
            });
        },

Now, issue is that if i don't keep alert('Address Selected'); code in loadCityDetails, i am not getting city details loaded into city name field in form it comes only if alert is provided. But i don't want to keep this alert. So, how can i get city details loaded without displaying alert. Any help will be appreciated.

Answer 1

It's because the call to $("#CITY_DETAIL_AC").val(data.Data); happens in an async ajax-call, which runs independently of the DOM construction. You have no way of knowing if the DOM is ready by the time the function call returns - it probably isn't, since you can't access the element. Displaying the alert-box gives the system time to create the DOM before trying to write to it.

Solution: Put the function containing the ajax call in .ready(), like this:

$(document).ready(function(){..your function body here...});

Then it's guaranteed not to happen before all elements are present. Now you will have to retrieve city-id from within the {...function body...}, as you can't expect it passed in as an argument anymore.