execute script when ajax call complete

Question

I have 2 HTML select using jQuery multi-select cascade bind using ajax call it works fine the problem is I want to set value in master then bind detail then set value in detail but since it is ajax when try to set the value in detail the values not yet available.

Table Cars CarID int CarModel(Toyota) CarSubModel(yaris)

 function GetCarData()
    {
        var CarID = getQuerystringByName('C');
        if (CarID!=null)
        {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Query.asmx/GetCarByID",
                data: '{CarID: ' + CarID + '}',
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    txtCarName.value = Result.CarName;
                    $("#ddlCarModel").val(Result.ModelID);
                      BindSubModel();// Ajax to load Sub Models
                      $("#ddlCarSubModel").val(Result.SubModelID);

I need to (some how) execute $("#ddlCarSubModel").val(Result.SubModelID); after the sub ajax complete i do not want to use wait methods(Timers).

  function BindSubModel() {
        var ModelVal = $("#ddlCarModel").val();
        if (ModelVal != "") {
                $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Query.asmx/LoadCarSubModel",
            data: '{ModelID: ' + ModelVal + '}',
            dataType: "json",
            success: function (Result) {

the web Method

     public class CarSubModelInfo
    {
        public int SubModelID { get; set; }
        public string SubModelName { get; set; }
    }

    [WebMethod]
    [ScriptMethod]
    public List<CarSubModelInfo> LoadCarSubModel(string ModelID)
    {
        string Conn = System.Configuration.ConfigurationManager.ConnectionStrings["GPS_TrackingConnectionString"].ConnectionString;

        CarSubModelInfo driver = new CarSubModelInfo();
        List<CarSubModelInfo> SubModelInformation = new List<CarSubModelInfo>();
        DataSet ds;
        using (SqlConnection con = new SqlConnection(Conn))
        {
            using (SqlCommand cmd = new SqlCommand("select * from T_SubCarModels where  ModelID=" + ModelID, con))
            {
                con.Open();
                cmd.Connection = con;
                cmd.CommandType = CommandType.Text;
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {

                    ds = new DataSet();
                    da.Fill(ds);
                }
            }
        }
        try
        {
            if (ds != null)
            {
                if (ds.Tables.Count > 0)
                {
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        foreach (DataRow dr in ds.Tables[0].Rows)
                        {
                            SubModelInformation.Add(new CarSubModelInfo()
                            {
                                SubModelID = Convert.ToInt32(dr["id"]),
                                SubModelName = dr["name"].ToString()
                            });
                        }
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return SubModelInformation;
    }

use `async:false` in ajax please find more info [here](http://api.jquery.com/jquery.ajax/) — Curiousdev, Apr 26 '17 at 10:34
@Curiousdev Please don't suggest `async:false` - even the *browser itself* recommends you don't do this. — freedomn-m, Apr 26 '17 at 10:39
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — freedomn-m, Apr 26 '17 at 10:39
See duplicate. 2 options: Pass a call back to BindSubModel to call on success or, add a `return` in `BindSubModel` (ie `return $.ajax({...`) and use the promise `BindSubModel().done(function() { $("#ddlCarSubModel").val(Result.SubModelID); });` — freedomn-m, Apr 26 '17 at 10:41
@freedomn-m ohh that's great i didn't knew about dat thanxx.. :) — Curiousdev, Apr 26 '17 at 10:44
@Curiousdev here's a nice summary answer: http://stackoverflow.com/a/18957965/2181514 — freedomn-m, Apr 26 '17 at 10:48

score 0 · Answer 1 · edited Apr 26 '17 at 10:48

0

Put $("#ddlCarSubModel").val(Result.SubModelID); Into success in the function BindSubModel();

edited Apr 26 '17 at 10:48

Gopinath Shiva

3,822
5
25
48

answered Apr 26 '17 at 10:37

Alexander Fast

1
3

Result is the success of the prev ajax it will not be available in bindSubModel – Maher Khalil Apr 26 '17 at 10:48
send it there, as param BindSubModel(Result.SubModelID); ` function BindSubModel(SubModelID) { ... success: function (Result) { $("#ddlCarSubModel").val(SubModelID);` – Alexander Fast Apr 26 '17 at 11:00

execute script when ajax call complete

1 Answers1