title: Jquery ajax call inside success function
body: <p>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?</p>
  
  <pre><code>&lt;input type="hidden" id="hdnMenuChild" name="hdnMenuChild" /&gt;
  
              &lt;script&gt;
                  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 &lt; data.length; x++) {
  
                                  if (data[x].MenueLevel == "0" &amp;&amp; data[x].URL!="#") {
  
                                      mUL = mUL + '&lt;li&gt;';
                                      mUL = mUL + '&lt;a href=' + data[x].URL + '&gt;';
                                      mUL = mUL + '&lt;span class="menu-text"&gt;' + data[x].Name + '&lt;/span&gt;';
                                      mUL = mUL + '&lt;/a&gt;&lt;/li&gt;';
                                  }
  
                                  if (data[x].MenueLevel == "0" &amp;&amp; data[x].URL == "#") {
  
                                      mUL = mUL + '&lt;li&gt;';
                                      mUL = mUL + '&lt;a href=' + data[x].URL + ' class="dropdown-toggle"&gt;';
                                      mUL = mUL + '&lt;span class="menu-text"&gt;' + data[x].Name + '&lt;/span&gt;';
                                      mUL = mUL + '&lt;b class="arrow icon-angle-down"&gt;&lt;/b&gt;';
                                      mUL = mUL + '&lt;/a&gt;';
                                      mUL = mUL + '&lt;ul class="submenu"&gt;';
  
                                      $.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 &lt; datay.length; y++) {
  
                                                  $("#hdnMenuChild").val($("#hdnMenuChild").val() + '&lt;li&gt;');
                                                  $("#hdnMenuChild").val($("#hdnMenuChild").val() + '&lt;a href=' + datay[y].URL + '&gt;');
                                                  $("#hdnMenuChild").val($("#hdnMenuChild").val() + '&lt;i class="icon-double-angle-right"&gt;&lt;/i&gt;');
                                                  $("#hdnMenuChild").val($("#hdnMenuChild").val() + datay[y].Name);
                                                  $("#hdnMenuChild").val($("#hdnMenuChild").val() + '&lt;/a&gt;&lt;/li&gt;'); 
                                              }
                                             alert($("#hdnMenuChild").val());//here, alert shows data.
                                          }
                                      });
                                     alert($("#hdnMenuChild").val());//alert shows empty data here
                                      mUL = mUL + '&lt;/ul&gt;';
                                      mUL = mUL + '&lt;/li&gt;';
                                  }
  
                              }
  
                              $("#userMenue").html(mUL);
                          }
                      });
  
  
                  }
  </code></pre>