How to get All the elements of the Listbox when Button Click event is fired by using ajax call

Question

How to get All the elements of the Listbox when Button Click event is fired by using ajax call

I am using a function and trying to call the function in ajax call my function is working fine it returning all the elements from the List box when I am trying to bind it with the ajax call its not working i need to call the elements in the code behind:

             function responseData2() {
                          debugger;  
              var oListbox = $("#submitlistbox2").each(function () {
                  var data = $(this).text() + " " + $(this).val()+"\n";
                  alert("The Names are: " + data);

              });  
              var jobsheet = data;
              $.ajax({
                  url: "OnlineBiddingofExtraBoardDaysOff.aspx/Details4",
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  cache: false,
                  data: "{ 'selectedJobSheet': '" + jobsheet + "'}",
                  success: function (data) {
                      alert(data);
                      alert("success");
                  },
                  error: function (response) {
                      alert(response);
                      alert("error");
                  }
              });         

          }

My code-behind data:

   [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static object Details4(string selectedJobSheet)
    {

        try
        {

            string constr = ConfigurationManager.ConnectionStrings["Constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("select customer_id,first_name from jobsheetDetails", con))
                {

                    string _data = "";
                    cmd.CommandType = CommandType.Text;
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    da.Fill(ds);
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        _data = JsonConvert.SerializeObject(ds.Tables[0]);
                    }
                   return _data;
                }

            }
        }
        catch (Exception)
        {

            throw;
        }

    }

Answer 1

It seems your variable data was inside the loop. Try to use object method to fix your problem.

         function responseData2() {
                      debugger;  

           var holder_all_data = [];

          var oListbox = $("#submitlistbox2").each(function () {
              var data = $(this).text() + " " + $(this).val()+"\n";
              alert("The Names are: " + data);

              holder_all_data.push({
                    var_name_data : data,
              });

          });  


          $.ajax({
              url: "OnlineBiddingofExtraBoardDaysOff.aspx/Details4",
              type: "POST",
              contentType: "application/json; charset=utf-8",
              cache: false,
              data: "{ 'selectedJobSheet': '" + holder_all_data + "'}",
              success: function (data) {
                  alert(data);
                  alert("success");
              },
              error: function (response) {
                  alert(response);
                  alert("error");
              }
          });         

      }

And then next, if you want to get the individual name value which's thrown by AJAX, you should use foreach loop and it should look like this. :D

e.g

   foreach( selectedJobSheet as $item ){
       var name = $item['var_name_data']; //include the object variable name
       console.log(name);
   }

Answer 2

It seems your data variable is overwritten in a loop and that is the issue. Hope below will help you.

function responseData2() {
    var data = [];
    var oListbox = $("#submitlistbox2").each(function (i) {
        var data[i] = $(this).text() + " " + $(this).val()+"\n";
        alert("The Names are: " + data[i]);
    });  
    var jobsheet = JSON.stringify(data);
    $.ajax({
        url: "OnlineBiddingofExtraBoardDaysOff.aspx/Details4",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        cache: false,
        data: "{ 'selectedJobSheet': " + jobsheet + "}",
        success: function (data) {
          alert(data);
          alert("success");
        },
        error: function (response) {
          alert(response);
          alert("error");
        }
    });
}

Answer 3

Try this:

function responseData2() {
    debugger;
    var jobsheet = [];
    $("#submitlistbox2").each(function () {
        var data = $(this).text() + " " + $(this).val();
        jobsheet.push(data);
        alert("The Names are: " + data);
    });

    $.ajax({
        url: "OnlineBiddingofExtraBoardDaysOff.aspx/Details4",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        cache: false,
        data: { "selectedJobSheet": JSON.stringify(jobsheet) },
        dataType: "json",
        success: function (data) {
            alert(data);
            alert("success");
        },
        error: function (response) {
            alert(response);
            alert("error");
        }
    });
}

Code Behind:

[WebMethod]
public void Details4(string selectedJobSheet)
{
    List<string> selectedJobSheetList = new List<string>();
    var serializer = new JavaScriptSerializer();
    serializer.RegisterConverters(new[] { new DynamicJsonConverter() });
    dynamic data = serializer.Deserialize(selectedJobSheet, typeof(object));

    foreach (var item in data)
    {
        selectedJobSheetList.Add(item);
    }
}