title: how to execute a specific code after a ajax
body: <p>I have a function in which uses ajax which populate a select element of options from my database, here is the code of the function.</p>
  
  <pre><code>function Filtering_GetRole(roleElement) {
  
  $.ajax({
  
      type: "POST",
      url: "IROA_StoredProcedures.asmx/Filtering_GetRole",
      data: "",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
  
      success: function (response) {
  
          var roletooldetails = response.d;
          var appendItem = "";
  
          $(roleElement).empty();
  
          $.each(roletooldetails, function (index, Filtering_GetRoleInfo) {
  
              var activeappend = "";
              var id = Filtering_GetRoleInfo.id;
              var role = Filtering_GetRoleInfo.Role;
  
              activeappend = "&lt;option value=" + id + "&gt;" + role + "&lt;/option&gt;";
  
  
              appendItem += activeappend;
  
          });
  
          $(roleElement).prepend('&lt;option disabled="disabled" selected="selected" value=""&gt;Select Tool&lt;/option&gt;')
          $(roleElement).append(appendItem);
  
      },
  
      error: function (XMLHttpRequest) {
          console.log(XMLHttpRequest);
          alert("error in Filtering_GetTool");
      }
  
  });
  }
  </code></pre>
  
  <p>which I call like this</p>
  
  <pre><code>var slcRole = $(this).closest(".td-span-buttons").closest(".tr-span-buttons").find(".slc-role"); var holdRoleId = slcRole.val();
  
          Filtering_GetRole(slcRole);
  
          slcRole.val(holdRoleId);
  </code></pre>
  
  <p>but the problem is since I use ajax the code <code>slcRole.val(holdRoleId);</code> will execute first resulting to the value not selected on the option element. How can I do that when the ajax code finished this code will execute. Sorry for the bad english</p>