title: How to Execute the function after Ajax call is complete
body: <p>I have two functions,in 1st function having  ajax call,so i want the 2nd function to be execute after ajax call (here i am reloading the page)complete,can you please help me?<br>
  Here the below code </p>
  
  <pre><code>&lt;div id="exapnd_or_collapse_div" class="exapnd_or_collapse_div" onclick="changeLayout();"&gt;
  &lt;script&gt;
  function changeLayout () {
      alert('change layout');
  
      try {
          jQuery.ajax({
              url:'&lt;%=resourceURL.toString()%&gt;',
              dataType: "text",
              data:{
                  &lt;portlet:namespace  /&gt;cmd:'changeLayout'
              },
              error: function(){
               alert("AJAXError");
              },
              type: "post",
  
              success: function(data) {
  
                  if("success" == data) {
  
                      location.reload();
                  }
              }
          }).done(function(){
              exapndCollapse(); 
            });
  
  
      } catch(e) {
          alert('waiting: ' + e);
      }
  };
  
  function expandCollapse() {
  
  
              jQuery("div.Search_Styled-dropDown").css("display", "none");
              jQuery("span.menu-text").css("display", "none");
  
              jQuery("ul.Common_ul").css("display", "none");
              jQuery("img.module_images").css("width", "25px");
              jQuery("img.module_images").css("margin-top", "20px");
          jQuery("img.module_images").css("height", "21px");
              jQuery("#search_box").css("display", "none");   
          jQuery("#Escaped_toggle").css("margin-right", "94%");   
          }
  &lt;/script&gt;
  </code></pre>