Jquery ajax call inside success function

Question

I'm trying to make a ajax call inside success function. Inside the second ajax call I'm appending some data to a hidden field. Just after the for loop, alert shows the hidden field contains data but when I put the alert out side the secod ajax call, it shows empty. why the hidden field gets cleared?

<input type="hidden" id="hdnMenuChild" name="hdnMenuChild" />

            <script>
                function loadMenue() {

                    var url = "/UserManagement/GetUserMenue";

                    $.ajax({
                        type: "GET",
                        url: url,
                        contentType: "application/json; charset=utf-8",
                        //data: { initialApplicantID: initialApplicantID },
                        dataType: "json",
                        success: function (data) {
                            var mUL = "";
                            for (var x = 0; x < data.length; x++) {

                                if (data[x].MenueLevel == "0" && data[x].URL!="#") {

                                    mUL = mUL + '<li>';
                                    mUL = mUL + '<a href=' + data[x].URL + '>';
                                    mUL = mUL + '<span class="menu-text">' + data[x].Name + '</span>';
                                    mUL = mUL + '</a></li>';
                                }

                                if (data[x].MenueLevel == "0" && data[x].URL == "#") {

                                    mUL = mUL + '<li>';
                                    mUL = mUL + '<a href=' + data[x].URL + ' class="dropdown-toggle">';
                                    mUL = mUL + '<span class="menu-text">' + data[x].Name + '</span>';
                                    mUL = mUL + '<b class="arrow icon-angle-down"></b>';
                                    mUL = mUL + '</a>';
                                    mUL = mUL + '<ul class="submenu">';

                                    $.ajax({
                                        type: "GET",
                                        url: "/UserManagement/GetUserMenue?parentID=" + data[x].PermissionID,
                                        contentType: "application/json; charset=utf-8",
                                        //data: { initialApplicantID: initialApplicantID },
                                        dataType: "json",
                                        success: function (datay) {

                                            for (var y = 0; y < datay.length; y++) {

                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + '<li>');
                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + '<a href=' + datay[y].URL + '>');
                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + '<i class="icon-double-angle-right"></i>');
                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + datay[y].Name);
                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + '</a></li>'); 
                                            }
                                           alert($("#hdnMenuChild").val());//here, alert shows data.
                                        }
                                    });
                                   alert($("#hdnMenuChild").val());//alert shows empty data here
                                    mUL = mUL + '</ul>';
                                    mUL = mUL + '</li>';
                                }

                            }

                            $("#userMenue").html(mUL);
                        }
                    });


                }

Answer 1

Have you validated that the hidden fields aren't populated in the DOM after the completion of the whole process. Remember that $.ajax is asynchronous by default and the round trip time it takes for that second ajax call to return and setup your element in the DOM is longer than it takes to process the next function, in this case your following alert. So nothing has made it to the DOM by the time that alert is called. You could do this a couple of ways: 1) create a callback for the success, or 2) force the $.ajax to be non asynchronous by using "async: false" setting. I would personally opt for the callback approach and handle all success code in that. You will probably never get data returned from that alert though unless you make the ajax call non async, no matter how fast your connection to the server is.. even if it's local on the same machine.

Also, I'm sure you have a good reason, but it seems very inefficient to loop over data returned from an ajax call, then call another ajax call for each item in that data. I don't know if the server code isn't available or under your control, but a new end point should probably be created on the server to hit that will return all the data you're after in that second ajax call. Just a thought.