使用 ajax 調用觸發按鈕單擊事件時如何獲取列表框的所有元素

Question

使用 ajax 調用觸發按鈕單擊事件時如何獲取列表框的所有元素

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后面的代碼：

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

          }

我的代碼隱藏數據：

   [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

嘗試這個：

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

代碼背后：

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

Answer 2

似乎您的數據變量在循環中被覆蓋，這就是問題所在。 希望下面對你有所幫助。

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

看來您的variable data在循環內。 嘗試使用object方法來解決您的問題。

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

      }

然后接下來，如果您想獲取 AJAX 拋出的單個name值，您應該使用foreach loop ，它應該看起來像這樣。 :D

例如

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