0

I have a form

<form method="GET">
  <input type="text" class="form-control" id="rent" name="rent" placeholder="Monthly Rent Amount" />
  <input type="text" class="form-control" id="streetAddress" name="streetAddress" placeholder="Stress Address" />
  <input type="text" class="form-control" id='streetName' name="streetName" placeholder="Stress Name" />
  <input type="text" class="form-control" id='city' name="city" placeholder="City" />
  <input type="text" class="form-control" id='state' name="state" placeholder="State" />
  <input type="text" class="form-control" id='zip' name="zip" placeholder="Zip" />
  <button type="submit" id="submitListing" class="btn-primary btn-lg center-block">Submit</button>
</form>

and the js page for the api calls

$(document).ready(function () {


    $('#submitListing').on('click', function (e) {

        var lati;
        var lng;

        var listData = JSON.stringify({
            rent: $('#rent').val(),
            streetAddress: $('#streetAddress').val(),
            streetName: $('#streetName').val(),
            city: $('#city').val(),
            state: $('#state').val(),
            zip: $('#zip').val(),
            lat: lati,
            lon: lng
        });

        e.preventDefault();
        $.ajax({
            url: contextRoot + "/list/create",
            type: "POST",
            data: listData,
            dataType: 'json',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Accept", "application/json");
                xhr.setRequestHeader("Content-type", "application/json");
                codeAddress();
            },
            success: function (data, status) {
//                window.location = contextRoot;
            },
            error: function (data, status) {
                alert("bad post");

                console.log(data.errors);
            }
        });

        var address = $('#streetAddress').val() + " " + $('#streetName').val() + " " + $('#city').val() + " " + $('#state').val() + " " + $('#zip').val();


        function codeAddress() {
            $.ajax({
                type: "GET",
                url: "http://www.LIhb6pFxB7qAlFC4Aiul9rM9i7R5BcgBmapquestapi.com/geocoding/v1/address?key=KEY&location=" + address,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json");
                    xhr.setRequestHeader("Content-type", "application/json");
                },
                success: function (response, status) {
                    alert("OK");//alerts OK, but NONE of the followinng
                    lati = response.results[0].locations[0].latLng.lat;
                    lng = response.results[0].locations[0].latLng.lng;
                    console.log(lati, lng);
                },
                error: function (data, status) {
//                    alert("geo error");
                    console.log(data.errors);

                }});
        }

    });


});

What I need to do is call the GET request before the POST runs. For some reason, whenever I submit a form, it always goes to the POST before the GET no matter the order I put them in. I need to run the GET before the POST to get the lat/lng to pass to the POST.

The GET is returning the lat/lng correctly but not until the POST runs.

Anyone know why it is behaving like that?

bbennett36
  • 6,065
  • 10
  • 20
  • 37
  • Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Dave Sep 29 '16 at 22:16
  • A quick fix is to move your first $.ajax() call to the end of your second's success function. Also note that your second $.ajax() call's success function will not travel back in time and insert the received `lat` and `long` into `listData`. –  Sep 29 '16 at 22:25
  • 1
    @Wesley `async: false` is deprecated and should never be used as it is a terrible practice. Please don't make such suggestions going forward – charlietfl Sep 29 '16 at 22:39

0 Answers0