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

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;
        }

    }

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);
   }