How I do initial JavaScript Ajax initialization?

Question

I'm pulling information with ajax. I want it my document.ready function(ajax) starting first because knockout file starting first and my "var initialData" value going null. How my Ajax start first ?

Here is my F12 Source

My script:

<script type="text/javascript">
        var initialData;
        function functionViewModel() {
                $(document).ready(function () {
                    $.ajax({
                        type: "POST",
                        url: "KnockoutGrid2.aspx/GonderUrunler",
                        data: "{}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            console.log(msg.d);
                            initialData = msg.d;
                        }
                    });
                });
            var fn = {
                friends: ko.observableArray(initialData)
            };
            fn.removeUser = function (item) {
                fn.friends.remove(item);
            };
            return fn;
        };
        ko.applyBindings(functionViewModel());
    </script>

Answer 1

Update 2 The answer of @user3297291 is better than mine, because is Knockout who handles all the state of this form. Please, don't do the applybindings in the answer of the ajax request.

The user need to know that the data isn't loaded yet, and this can be handled with knockout.

Original answer

Perhaps if you move the initialization of Knockout inside the success function:

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "KnockoutGrid2.aspx/GonderUrunler",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    console.log(msg.d);
                    initialData = msg.d;

                    // All initialization inside the 'success' function
                    function functionViewModel(initialData) {
                        var fn = {
                            friends: ko.observableArray(initialData)
                        };
                        fn.removeUser = function (item) {
                            fn.friends.remove(item);
                        };
                        return fn;
                    };

                    ko.applyBindings(functionViewModel(initialData));
                }
            });
        });
    </script>

You could show a div with the message: "loading data...".

And when success run, hide this div.

Update 1 After your comment, I don't know why you need the return fn. I propose this solution:

    <script type="text/javascript">

        // Updating 'functionViewModel()' to add 'self'.
        // Move functionViewModel()' outside ajax response
        function functionViewModel(initialData) {
            var self = this;

            self.friends = ko.observableArray(initialData);

            self.removeUser = function (item) {
                self.friends.remove(item);
            };
        };

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "KnockoutGrid2.aspx/GonderUrunler",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    console.log(msg.d);
                    initialData = msg.d;

                    // All initialization inside the 'success' function

                    ko.applyBindings(functionViewModel(initialData));
                }
            });
        });
    </script>

Here I'm using self ( see Managing ‘this’ ) and don't return fn, because Knockout handles its state.

Answer 2

Use async:false in your code

                   $.ajax({
                        type: "POST",
                        url: "KnockoutGrid2.aspx/GonderUrunler",
                        data: "{}",
                        async : false,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            console.log(msg.d);
                            initialData = msg.d;
                        }
                    });