How to return from asynchronous call using jquery?

Question

I tried to use the callback function but it still has no effect. Here is the HTML:

<form action="{% url 'seller_details' %}" method="post" id="seller_details">
    {% csrf_token %}
    <div>
        <div class="heading">PERSONAL INFORMATION</div>
        <table>
            <tr>
                <td id="wd25">Full Name</td>
                <td><input type="text" placeholder="Full Name" name="full_name" value="{{full_name}}"/></td>
            </tr>
            <tr>
                <td>Mobile Number</td>
                <td><input type="text" placeholder="Mobile Number" value="{{mobile}}" name="mobile"/></td>
            </tr>
            <tr>
                <td>Store Address</td>
                <td><textarea rows="5" placeholder="Store Address" name="pickup_address" value="{{pickup_address}}"></textarea></td>
            </tr>
        </table>
</form>

Then I tried to validate the form and submit the form using submit handler of jQuery validate

$("#seller_details").validate({
    rules: {
        full_name: "required",
        pickup_address:"required",
    },
    messages: {
        full_name: "Please enter Name",
        mobile: "Please enter Mobile Number",
       pickup_address:"Please enter address",
    },
    submitHandler: function(form){
        var form = $(form).serialize()

        codeLatLng(storeGeoAddress);

        console.log(latitude)
        console.log(longitude)

        $.ajax({        
            type: "post",
            url: "{% url 'seller_details' %}",     
            data: form + "&csrfmiddlewaretoken=" + '{{csrf_token}}' + '&latitude=' + latitude + '&longitude=' + longitude,

I used the following asynchronous function called geocoder to get the latitude and longitude of the address submitted

function codeLatLng(callback) {
    var address = $("textarea[name=pickup_address]").val();
    if (geocoder) {
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    callback(results[0]);
                } else {
                    alert("No results found");
                }
            } 
            else {
                alert("Geocoder failed due to: " + status);
            }
        });
    }
}

function storeGeoAddress(addr) {     
    latitude = addr.geometry.location.lat();
    longitude = addr.geometry.location.lng();
}

The problem I am facing here is that I am not able to gather the values of latitude and longitude so that I can give it back to my submit handler so that it can post the values? What can I do in such a scenario? Thank you

Latitude and Longitude are globally defined here

console.log(latitude) console.log(longitude) are not able to log anything

Is there any Way by Which i can make Submit Handler as my callback function?

What is the scope of your latitude and longitude variables? If they're within scope of both functions then what you have should work, although it's rather odd placing a JSON string in the querystring of a request. You would be best just sending a plain object and letting jQuery encode it for you. — Rory McCrossan
– Rory McCrossan, Commented Mar 7, 2016 at 9:14
What you have will not work regardless of the scope of latitude and longitude. $.ajax will run before the storeGeoAddress callback gets fired because the logic in storeGeoAddress is async. You need to perform your AJAX in your callback. Then you can also sack of the nasty global variables. — ste2425
– ste2425, Commented Mar 7, 2016 at 9:15

Tomalak · Accepted Answer · 2016-04-17 11:32:42Z

2

Promises to the rescue.

jQuery has a Promise implementation that is useful enough for your situation. How about this.

First, write a geocode-Helper that wraps Google's callback-based API method and returns the promise of a resolved address instead:

function geocodeAsync(addrString) {
    var result = $.Deferred();

    if ( !(geocoder && geocoder.geocode) ) {
        result.reject("geocoder not defined");
    } else {
        geocoder.geocode({address: addrString}, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                if (results.length) {
                    result.resolve(results[0]);
                } else {
                    result.reject("No results found");
                }
            }
            else {
                result.reject("Geocoder failed due to: " + status);
            }
        });
    }

    return result.promise();
}

Now, things get easy. You can use that function in exactly the same way you would use jQuery's Ajax functions:

$("#seller_details").validate({
    rules: {/* ... */},
    messages: {/* ... */},
    submitHandler: function (form) {
        var address = $(form).find("textarea[name=pickup_address]").val();

        geocodeAsync(address).done(function (geocodeResult) {
            var otherParams = {
                'parameter[]': JSON.stringify(parameter),
                csrfmiddlewaretoken: '{{csrf_token}}',
                latitude: geocodeResult.geometry.location.lat(),
                longitude: geocodeResult.geometry.location.lng()
            },
            postBody = [ $(form).serialize(), $.param(otherParams) ].join('&');

            $.post("{% url 'seller_details' %}", postBody).done(function (result) {
                // whatever you want to do on POST success
            }).fail(function (jqXhr, status, error) {
                // seller_details update failed
            });
        }).fail(function (reason) {
            alert("Geocoding failed because: " + reason);
        });
    }
});

No global variables needed and when reading the code you see exactly what happens.

Relevant documentation: https://api.jquery.com/jQuery.Deferred/

edited Apr 17, 2016 at 11:32

answered Mar 7, 2016 at 10:34

Tomalak

339k68 gold badges547 silver badges635 bronze badges

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

6 Comments

Aditya Singh Over a year ago

what is results in else part? i think it should be result.reject ?

Tomalak Over a year ago

@AdrafeRinzzler Right, that was a typo. I should have thought of better variable names than result and results.

Aditya Singh Over a year ago

var address = $(form).find("textarea[name=pickup_address]").val();

Aditya Singh Over a year ago

postBody = [ $(form).serialize(), $.param(otherParams) ].join('&'); says unrecognized exp ...why so?

Tomalak Over a year ago

$(form).find() is not the same as form.find(). I also can't see a syntax error there. [ $(form).serialize(), $.param(otherParams) ].join('&') is equally valid. Are you using the code as I posted it or have you made changes?

|

hansod1 · Accepted Answer · 2016-03-07 09:14:17Z

2

You're in callback hell! This is a fairly common problem to have in javascript. The way you return "synchronously" from an asynchronous call is through a Promise. Either that or you have to pass along a chain of callbacks to handle the various steps that must occur.

My favorite JS Promise implementation is https://github.com/cujojs/when, and I recommend you follow this guide: http://blog.briancavalier.com/async-programming-part-1-it-s-messy/

answered Mar 7, 2016 at 9:14

hansod1

3241 silver badge4 bronze badges

2 Comments

Aditya Singh Over a year ago

what about jquery solutions?

Aditya Singh Over a year ago

Any Chance that i can make submit handler as callback?

Hacketo · Accepted Answer · 2016-03-07 10:41:56Z

1

You can still create the callback inside the submitHandler

codeLatLng(function(addr){
    var latitude = addr.geometry.location.lat();
    var longitude = addr.geometry.location.lng();

    console.log(latitude)
    console.log(longitude)

    $.ajax(...);
});

answered Mar 7, 2016 at 10:41

Hacketo

4,9974 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to return from asynchronous call using jquery?

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related