$ .getJSON最后被触发

On my click event, I am trying to open a bootstrap modal. Modal has some values, which I am trying to get from ajax call using getJSON. Problem is that the getJSON is fired at last when the jQuery function ends.

Here is my code:

$('.poplinks').popover().parent().on('click', '.insert-submission', function () {
            var baKey = 8701;
            var obj;

            $.getJSON('/urltogetobjectwithvalue/', {id: baKey}, function (result) {
                debugger; //it comes here at last after modal('show') executes
                obj = result;
            });

            debugger; //first it come here
            $("#span_unk_sub_baid").html(baKey);
            if (obj !== undefined)
                $("#span_unk_sub_baid").append(' Eff Date: ' + obj.EffectiveDate);

            $('#dialog_ins_purc').modal('show'); //now it will go to $.getJSON
        });

I want to show some values which I am getting from JSON call. After the modal is loaded, then it goes to get values. How to I make sure, json call is made in the same sequence I want. Please help.

Instead of using short hand use

$.ajax({
    type:'GET',
    async:false,
    url:"your url",
    dataType:'JSON',
    data:{id,baKey}
    success:function(result)
    {
      debugger;obj = result;
    }
});

Async is default set to true.So your js executes the code after this ajax call and does not wait for the server to return with a response.If it is set to false js waits for the server to respond back with the data and proceeds with further execution.

JavaScript is an event driven language which means it can work Asynchronously

Ajax - is the way for accessing a server in an asynchronous way.

functions like getJSON works in an async way (using AJAX) - which means that instead of blocking the whole script until it gets the result from the server - it starts an action (in this case requesting a resource from the server) and receives a function to call (usually referred as "callback") whenever some event occur (in this case the request got to its end - i.e. you got the response from the server)

If it was working the way you imagined it should work - there was no need to pass the function like you did and you could instead write:

obj = $.getJSON('/urltogetobjectwithvalue/', {id: baKey}); //WRONG CODE - DON'T USE IT

There is a good explanation about async programming in Javascript (using setTimeout which also works asynchronously) in this question as well

In order to get things in the order that I guess you wanted you should do something like:

$('.poplinks').popover().parent().on('click', '.insert-submission', function () {
    var baKey = 8701;
    var obj;

    function afterResponse(){
        $("#span_unk_sub_baid").html(baKey);
        if (obj !== undefined)
            $("#span_unk_sub_baid").append(' Eff Date: ' + obj.EffectiveDate);
        $('#dialog_ins_purc').modal('show');
    }

    $.getJSON('/urltogetobjectwithvalue/', {id: baKey}, function (result) {
        obj = result;
        afterResponse();
    });
});