Home/ Questions/Q 8464813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T14:51:54+00:00

I have a html table with +- 50 rows ( generated from a DB

  • 0

I have a html table with +- 50 rows ( generated from a DB ), and each row will have three unique drop down lists ( each drop down the options are from different table in the db )

How do I go about populating them with ajax. I know how to populate and build one but can you advise on the concept of many.

Do I use one ajax call the posts to a handler.ashx that uses one sql statement to retrieve all three tables data and then put it into a json object – then the jquery builds it all up from there?

Or do I use three separate ajax calls and three sql statements? but this I don’t think is possible as the in the loops the ajax wont wait for the data to come be fetched?

Can you please advise on the best solution or a tutorial or and idea/concept?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I agree with markpsmith, you should probably try to populate the dropdown lists on the server side, but if you really want to populate them on the Client Side, here is an example of how that can be done with AJAX. Keep in mind that the example doesn’t register the events for validation though. That’s an entirely different matter that you will have to address…

    Page Code

    <%-- 
c2012 Shawn Eary cc-wiki - Load DropDowns via AJAX Demo 

Shows how to use client script to load ASP AJAX DropDownLists using
AJAX and jQuery.  This ASP.NET file does not use any server side
code other than the code that is contained in the GetDropDownData
webservice.  All population is done on the client side. 

References (Places I Got Help From) - 
[1] - Unknown. 
Options to List Box in Client Side JavaScript." 
plus2net. 2010. 
http://www.plus2net.com/javascript_tutorial/list-adding.php 
(accessed AUG 31, 2012).

[2] - Ward, David. 
"Using jQuery to Directly Call ASP.NET AJAX Page Methods." 
Encosia. MAR 10, 2012. 
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ 
(accessed AUG 31, 2012).
--%>
<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>
   c2012 Shawn Eary cc-wiki - Load DropDowns via AJAX Demo
   </title>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script> 
</head>
<body>  
   <form id="form1" runat="server">    
      <%-- A table with three columns and several rows of non
           populated DropDownLists --%>
      <table>
         <tr>
            <td><asp:DropDownList CssClass="Drop1" runat="server"></asp:DropDownList></td>
            <td><asp:DropDownList CssClass="Drop2" runat="server"></asp:DropDownList></td>
            <td><asp:DropDownList CssClass="Drop3" runat="server"></asp:DropDownList></td>
         </tr>                  
         <tr>
            <td><asp:DropDownList CssClass="Drop1" runat="server"></asp:DropDownList></td>
            <td><asp:DropDownList CssClass="Drop2" runat="server"></asp:DropDownList></td>
            <td><asp:DropDownList CssClass="Drop3" runat="server"></asp:DropDownList></td>
         </tr>                  
         <tr>
            <td><asp:DropDownList CssClass="Drop1" runat="server"></asp:DropDownList></td>
            <td><asp:DropDownList CssClass="Drop2" runat="server"></asp:DropDownList></td>
            <td><asp:DropDownList CssClass="Drop3" runat="server"></asp:DropDownList></td>
         </tr>                  
         <tr>
            <td><asp:DropDownList CssClass="Drop1" runat="server"></asp:DropDownList></td>
            <td><asp:DropDownList CssClass="Drop2" runat="server"></asp:DropDownList></td>
            <td><asp:DropDownList CssClass="Drop3" runat="server"></asp:DropDownList></td>
         </tr>                  
      </table>    
   </form>


   <script type="text/ecmascript">
      function setColumnDropDownData(dataSource, columnNum) {
         for (var i = 0; i < dataSource.length; i++) {
            var curItem = dataSource[i];
            var text = curItem.text;
            var value = curItem.value;
            var theDropDowns = $('.Drop' + columnNum);
            for (var j = 0; j < theDropDowns.length; j++) {
               var curDropDown = theDropDowns[j]; 

               // Populate the DropDown as in [1]
               var someOption = document.createElement("OPTION");
               someOption.text = text; 
               someOption.value = value;
               curDropDown.options.add(someOption);               
            }            
         }
      }

      <%-- Mr. Ward shows how to call a WebMethod without using 
           AJAX ScriptManager in [2] --%>
      $.ajax({
         type: "POST",
         url: "testServices.asmx/GetDropDownData",
         data: "{tableName: 'color'}",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (msg) {            
            setColumnDropDownData(msg.d, 1);
         }
      });

      $.ajax({
         type: "POST",
         url: "testServices.asmx/GetDropDownData",
         data: "{tableName: 'shape'}",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (msg) {
            setColumnDropDownData(msg.d, 2);
         }
      });

      $.ajax({
         type: "POST",
         url: "testServices.asmx/GetDropDownData",
         data: "{tableName: 'size'}",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (msg) {
            setColumnDropDownData(msg.d, 3);
         }
      });      
   </script>
</body>
</html>

    Service Code

    // c2012 Shawn Eary cc-wiki - Load DropDowns via AJAX Demo 
// 
// Shows how to use a WebMethod to selectively push possible 
// DropDownList population data back to the client 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Container for the data items that will be pushed back to the 
/// client via JSON
/// </summary>
public class selectOption
{
   public selectOption(int iValue, string iText)
   {
      value = iValue; 
      text = iText; 
   }
   public int value; 
   public string text; 
}


/// <summary>
/// Summary description for testServices
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class testServices : System.Web.Services.WebService {

   // Send Data back to the client based upon the table of 
   // information she/he wants.  In real life, each of the different
   // if branches could be replaced with calls to the SQL database
   // to get the data but putting these calls here doesn't 
   // significantly enhance the purpose of this example
   [WebMethod]
   public List<selectOption> GetDropDownData(string tableName) {                  
      List<selectOption> returnVal = new List<selectOption>();

      if (tableName == "color") { 
         // Normally you would use Entity Framework to get information
         // from your T-SQL database here, but it isn't necessary
         // for me to show the database calls for this illustration
         returnVal.Add(new selectOption(1, "blue"));
         returnVal.Add(new selectOption(2, "yellow"));
         returnVal.Add(new selectOption(3, "green"));
      }
      else if (tableName == "shape")
      {
         // Normally you would use Entity Framework to get information
         // from your T-SQL database here, but it isn't necessary
         // for me to show the database calls for this illustration
         returnVal.Add(new selectOption(1, "square"));
         returnVal.Add(new selectOption(2, "triangle"));
         returnVal.Add(new selectOption(3, "oval"));
         returnVal.Add(new selectOption(4, "circle"));
      }
      else if (tableName == "size")
      {
         // Normally you would use Entity Framework to get information
         // from your T-SQL database here, but it isn't necessary
         // for me to show the database calls for this illustration
         returnVal.Add(new selectOption(1, "big"));
         returnVal.Add(new selectOption(2, "small"));         
      }

      return returnVal;
   }    
}

    Result Screenshot

    enter image description here

    • 0