Question

I have the following code:
inside i put 2 alert() for debug.
why does alert2 is shown before alert1 ???

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        $.ajax({
            type: "POST",
            url: "ManagerBaseKit.aspx/GetDummyVersions",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                var items = [];
                $.each(result.d.Version, function (key, val) {
                    items.push('<li id="' + key + '">' + val + '</li>');
                });
                $('<ol/>', {
                    'id': 'selectable',
                    html: items.join('')
                }).appendTo('.baseVersionsTest');
                alert('1'); // should be alerted 1st

            }
        });

        alert('2'); // should be alerted 2nd

    });

</script>

EDIT:
how can i make the $.ajax be called first thing?

Answer 1

Alert2 is triggered when the document is ready and Alert1 is triggered after a successful ajax request. You code could be re written in the form:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
     alert('2'); // Still the same functionality

        $.ajax({
            type: "POST",
            url: "ManagerBaseKit.aspx/GetDummyVersions",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                var items = [];
                $.each(result.d.Version, function (key, val) {
                    items.push('<li id="' + key + '">' + val + '</li>');
                });
                $('<ol/>', {
                    'id': 'selectable',
                    html: items.join('')
                }).appendTo('.baseVersionsTest');
                alert('1'); // should be alerted 1st

            }
        });



    });

</script>

Now you can see why the Alert2 is triggered first (and on document ready)