Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

COMBO  - relation issues

Posted on 2004-11-19
14
Medium Priority
?
1,069 Views
Last Modified: 2008-03-03
Example : I have got 4 combo, all fetches values from the database.

Combo 1 : Master combo

Combo 2, Combo 3, Combo 4 : Child Combos

Based on the value selected in Master combo, it will display possible values in rest of the combos.

I have to this at client side.

So when we load the ASP page, it fetches the values from the database for all the combos.
But values displayed for CHILD combos would depend on the selection of value in MASTER COMBO.

Again don't wont to make call to the server. Want to do everything at client side.

Hope you understand, what im looking for.

Lokesh
0
Comment
Question by:radhakrishan1
  • 6
  • 4
  • 2
  • +2
14 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 12624694
Then you need to dump the entire database to javascript.

You can use xmlhttp to get the data later, but that WILL access your server. How would you get data from the server without accessing the server?

Michel
0
 
LVL 3

Expert Comment

by:robotman757
ID: 12624708
Yes, you can do this, and there are a couple of ways to approach it. Getting the values from the database and storing them in hidden fields as comma seperated values based on the choices in the master combo. You could go through the record set multiple times by a loop and create a value 'list' for each choice in the master combo. It really depends on the amount of data and what combos you want to have certain data in. You can even use arrays if you want, but that is more memory intensive I think..
0
 

Author Comment

by:radhakrishan1
ID: 12624759
For robotman757:

Its easy when you have to fetch the value from the server side.

When somebody selects the value in mASTER COMBO, On is CHANGE event it can go to the server and fetch all values based on the selection for rest of combos.

Can you give any code how you have used array concepts in this or may be any working example of using hidden fields.

Lokesh
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 25

Expert Comment

by:James Rodgers
ID: 12624820
are you looking for something like this?

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>
        Untitled
    </title>
<script language="JavaScript" type="text/javascript">
var obj;
function lateralShift(selFrom, selTo) {
    var i ;
       with (document.forms[0]) {
            SelRight = selFrom.selectedIndex;
         
          if ((SelRight >= 0)  && (selFrom.selectedIndex < selFrom.options.length)) {
             selTo.options[selTo.options.length] = new Option(selFrom.options[SelRight].text, selFrom.options[SelRight].value);

             with (selFrom) {
                   for (i=SelRight; i < options.length; i++) {
                             if (i < options.length-1)
                        options[i] = new Option(options[i+1].text, options[i+1].value);
                      }
                    options.length --;

                    if (SelRight < options.length) selectedIndex = SelRight;
                      else selectedIndex = options.length - 1;
             }
       
          }
     }
}

     
function verticalShift(objSel, vDir){
var Sel, SelTo, Last, TempT, TempV;
 
       with (document.forms[0]) {
          Sel   = objSel.selectedIndex;
          SelTo = objSel.selectedIndex + vDir;
          Last  = objSel.options.length;

               if ((Sel >= 0 && vDir==1 && Sel < Last -1) || (Sel <= Last && Sel > 0 && vDir ==-1)) {
           with (objSel) {              
          TempT = options[Sel].text;
          TempV = options[Sel].value;
          options[Sel] = new Option( options[SelTo].text, options[SelTo].value);
          options[SelTo] = new Option( TempT, TempV );
                         selectedIndex = SelTo;
                    }    
               }    
          }
}


     var arrItems = new Array();
     var isVisible=0;
     function listItem(itemGroup, itemValue, itemText){
          this.itemGroup=itemGroup;
          this.itemValue=itemValue;
          this.itemText=itemText;
     }
     
     function populateSubList(groupID, objSub){
//this block clears the current listings in the second dropdown, if the dropdown has any
          objSub.selectedIndex=0;
          isVisible=0;
          if(objSub.options.length>0){
               for (x=objSub.options.length; x>=0; x--){
                    objSub.options[x]=null;
               }
          }
//this block populates the second drop down, by matching the selected value of dropdown 1
//to the lookup value of the list items
          for(x=0; x < arrItems.length; x++){
               if(arrItems[x].itemGroup==groupID){
                    listOpt = document.createElement("option") ;
                    listOpt.value = arrItems[x].itemValue ;
                    listOpt.text = arrItems[x].itemText ;
                    objSub.add(listOpt) ;
               }
          }

     }
     
// arrayItem = new listItem(lookupcode, listItem value, listItem Text)
// arrayItem = new listItem(categorycode, productcode, product text)
     arrItems[arrItems.length] = new listItem("M","M1","Suzuki");
     arrItems[arrItems.length] = new listItem("M","M3","Honda");
     arrItems[arrItems.length] = new listItem("M","M6","Titan");
     arrItems[arrItems.length] = new listItem("M","M4","Buccatti");
     arrItems[arrItems.length] = new listItem("M","M5","BMW");
     arrItems[arrItems.length] = new listItem("M","M2","Harley Davidson");
     arrItems[arrItems.length] = new listItem("C","C29","Corvette");
     arrItems[arrItems.length] = new listItem("C","C13","Ferrarri");
     arrItems[arrItems.length] = new listItem("C","C7","Lamborghini");
     arrItems[arrItems.length] = new listItem("C","C99","Viper");
     arrItems[arrItems.length] = new listItem("C","C4","Mustang");
     arrItems[arrItems.length] = new listItem("C","C20","GTO");
     arrItems[arrItems.length] = new listItem("C","C21","De Lorean");
     arrItems[arrItems.length] = new listItem("P","P1","Cessna");
     arrItems[arrItems.length] = new listItem("P","P23","767");
     arrItems[arrItems.length] = new listItem("P","P31","Airbus");
     arrItems[arrItems.length] = new listItem("P","P17","SST");
     arrItems[arrItems.length] = new listItem("P","P33","Sea Harrier");
     arrItems[arrItems.length] = new listItem("P","P10","F16");
     arrItems[arrItems.length] = new listItem("B","B34","Row Boat");
     arrItems[arrItems.length] = new listItem("B","B3","Cigarette Boat");
     arrItems[arrItems.length] = new listItem("B","B25","Fishing Boat");
     arrItems[arrItems.length] = new listItem("B","B19","Cabin Cruiser 6");
     arrItems[arrItems.length] = new listItem("T","T11","Hummer");
      arrItems[arrItems.length] = new listItem("M1","M1A","Bike1");
      arrItems[arrItems.length] = new listItem("M1","M1B","Bike2");
      arrItems[arrItems.length] = new listItem("M1","M1C","Bike3");
      arrItems[arrItems.length] = new listItem("M1","M1D","Bike4");
      arrItems[arrItems.length] = new listItem("M1","M1E","Bike5");
      arrItems[arrItems.length] = new listItem("M1","M1F","Bike6");
</script>
</head>
   <body>        
      <form name="frmGetTracker" action="displayTracker.cfm?RequestTimeout=500" onsubmit="" method="get">
           <table cellspacing="1" cellpadding="1" border="0" width="400" bgcolor="D8DFF3">
                <tr valign="top">
                     <td width="50%">
                          <table cellspacing="1" cellpadding="1" border="0" align="centre">
                               <caption>     View By :
                               </caption>
                               <tr valign="top">
                                    <td align="center">
                                         <select name="VOPT" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.VID)">
                                              <option value="0" selected>--Select Vehicle Type</option>
                                              <option value="M">Motorcycle</option>
                                              <option value="C">Car</option>
                                              <option value="T">Truck</option>
                                              <option value="B">Boat</option>
                                              <option value="P">Plane</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                     <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="VID" style="width:160" multiple size="6">
                                        </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                         
                         <td>
                              <table>
                                   <caption>&nbsp;</caption>
                                   <tr>
                              <TD>

  <INPUT TYPE="BUTTON" VALUE=">>" onClick="lateralShift(this.form.VID, this.form.L4)"><BR>
  <INPUT TYPE="BUTTON" VALUE="<<" onClick="lateralShift(this.form.L4, this.form.VID)">

</TD>


<TD>
L3<SELECT NAME="L4" SIZE="6" STYLE="width:150px" MULTIPLE onClick="obj=this" onDblClick="lateralShift(this, this.form.L5)">
</SELECT></TD><TD>

  <INPUT TYPE="BUTTON" VALUE=">>" onClick="lateralShift(this.form.L4, this.form.L5)"><BR>
  <INPUT TYPE="BUTTON" VALUE="<<" onClick="lateralShift(this.form.L5, this.form.L4)">

</TD>


<TD>
L23<SELECT NAME="L5" SIZE="6" STYLE="width:150px" MULTIPLE onClick="obj=this" onDblClick="lateralShift(this, this.form.L2)">
</SELECT></TD><TD>
  <INPUT TYPE="BUTTON" VALUE="UP" onClick="verticalShift(obj,-1)" style="width:25px"><BR>
  <INPUT TYPE="BUTTON" VALUE="DN" NAME="BtnDn" onClick="verticalShift(obj,1)" style="width:25px">

</TD></table>
                         </td></tr>
                         



                </tr>
           </table>
      </form>
   </body>
</html>
0
 
LVL 25

Accepted Solution

by:
James Rodgers earned 500 total points
ID: 12624835
or more like this?

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>
        Untitled
    </title>
<script language="JavaScript" type="text/javascript">var arrItems = new Array();
     var isVisible=0;
     function listItem(itemGroup, itemValue, itemText){
          this.itemGroup=itemGroup;
          this.itemValue=itemValue;
          this.itemText=itemText;
     }
     
     function populateSubList(groupID, objSub){
//this block clears the current listings in the second dropdown, if the dropdown has any
          objSub.selectedIndex=0;
          isVisible=0;
          if(objSub.options.length>1){
               for (x=objSub.options.length; x>0; x--){
                    objSub.options[x]=null;
               }
          }
//this block populates the second drop down, by matching the selected value of dropdown 1
//to the lookup value of the list items
          for(x=0; x < arrItems.length; x++){
               if(arrItems[x].itemGroup==groupID){
                    listOpt = document.createElement("option") ;
                    listOpt.value = arrItems[x].itemValue ;
                    listOpt.text = arrItems[x].itemText ;
                    objSub.add(listOpt) ;
               }
          }

     }
     
// arrayItem = new listItem(lookupcode, listItem value, listItem Text)
// arrayItem = new listItem(categorycode, productcode, product text)
     arrItems[arrItems.length] = new listItem("M","M1","Suzuki");
     arrItems[arrItems.length] = new listItem("M","M3","Honda");
     arrItems[arrItems.length] = new listItem("M","M6","Titan");
     arrItems[arrItems.length] = new listItem("M","M4","Buccatti");
     arrItems[arrItems.length] = new listItem("M","M5","BMW");
     arrItems[arrItems.length] = new listItem("M","M2","Harley Davidson");
     arrItems[arrItems.length] = new listItem("C","C29","Corvette");
     arrItems[arrItems.length] = new listItem("C","C13","Ferrarri");
     arrItems[arrItems.length] = new listItem("C","C7","Lamborghini");
     arrItems[arrItems.length] = new listItem("C","C99","Viper");
     arrItems[arrItems.length] = new listItem("C","C4","Mustang");
     arrItems[arrItems.length] = new listItem("C","C20","GTO");
     arrItems[arrItems.length] = new listItem("C","C21","De Lorean");
     arrItems[arrItems.length] = new listItem("P","P1","Cessna");
     arrItems[arrItems.length] = new listItem("P","P23","767");
     arrItems[arrItems.length] = new listItem("P","P31","Airbus");
     arrItems[arrItems.length] = new listItem("P","P17","SST");
     arrItems[arrItems.length] = new listItem("P","P33","Sea Harrier");
     arrItems[arrItems.length] = new listItem("P","P10","F16");
     arrItems[arrItems.length] = new listItem("B","B34","Row Boat");
     arrItems[arrItems.length] = new listItem("B","B3","Cigarette Boat");
     arrItems[arrItems.length] = new listItem("B","B25","Fishing Boat");
     arrItems[arrItems.length] = new listItem("B","B19","Cabin Cruiser 6");
     arrItems[arrItems.length] = new listItem("T","T11","Hummer");
       arrItems[arrItems.length] = new listItem("M1","M1A","Bike1");
       arrItems[arrItems.length] = new listItem("M1","M1B","Bike2");
       arrItems[arrItems.length] = new listItem("M1","M1C","Bike3");
       arrItems[arrItems.length] = new listItem("M1","M1D","Bike4");
       arrItems[arrItems.length] = new listItem("M1","M1E","Bike5");
       arrItems[arrItems.length] = new listItem("M1","M1F","Bike6");
</script>
</head>
   <body>        
      <form name="frmGetTracker" action="displayTracker.cfm?RequestTimeout=500" onsubmit="" method="get">
           <table cellspacing="1" cellpadding="1" border="0" width="400" bgcolor="D8DFF3">
                <tr valign="top">
                     <td width="50%">
                          <table cellspacing="1" cellpadding="1" border="0" align="centre">
                               <caption>     View By :
                               </caption>
                               <tr valign="top">
                                    <td align="center">
                                         <select name="VOPT" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.VID)">
                                              <option value="0" selected>--Select Vehicle Type</option>
                                              <option value="M">Motorcycle</option>
                                              <option value="C">Car</option>
                                              <option value="T">Truck</option>
                                                         <option value="B">Boat</option>
                                                         <option value="P">Plane</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                     <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="VID" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.SUBVID)">
                                              <option value="0" selected>--Select Brand</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                               <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="SUBVID" style="width:160" >
                                              <option value="0" selected>--Select Brand</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                </tr>
           </table>
      </form>
   </body>
</html>
0
 
LVL 3

Expert Comment

by:robotman757
ID: 12624855
Jester had the code handy...it looks good too.
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 12624930
this one comes up often, i keep a big directory of code snippets ... just to be safe
0
 

Author Comment

by:radhakrishan1
ID: 12625727
2nd one is a very good example.

One thing :

Im my case, I want to fill the array from the database.

Means, I should call a stored procedure in the ASP page and then go thru the recordset. Within the recordset you call this javascript function (array function ) which will then populate array.

Whats the best the way to populate this array in JAVASCRIPT getting the info from the database.

0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 12625974
the array used is populated from a db this is just the html source

 arrItems[arrItems.length] = new listItem("M","M1","Suzuki");
     arrItems[arrItems.length] = new listItem("M","M3","Honda");

or
if you stored the query output in a recordset variable called rst
<%rst.movefirst%>
<% while not rst.eof %>
     arrItems[arrItems.length] = new listItem("<%=key%>","<%=optValue%>","<%=optText%>");
<%rst.movenext%>
<wend%>
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 12626018
if you have to go back to the database after selecting hte master option why not just have the asp write out the tags normaly? instead of waiting for the page to load then waiting for the javascript to execute
0
 

Author Comment

by:radhakrishan1
ID: 12626033
But is this arrItems referening to one you declared in SCRIPT code ????

Excellent example. I will accept this as answer.

Pls clarify this last doubt, that while iterating thru recordset I want to point to array object delcared in Javascript function.
0
 

Author Comment

by:radhakrishan1
ID: 12626078
if you have to go back to the database after selecting hte master option why not just have the asp write out the tags normaly? instead of waiting for the page to load then waiting for the javascript to execute

Can't understand this :

Yes, after inputting all the data, user will click on Save button, and information will be sent to the server.

What do you mean by ASP write out tags ???????
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 12626375
>>Pls clarify this last doubt, that while iterating thru recordset I want to point to array object delcared in Javascript function

correct, use the ouput of the query to create the javascript array
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 12627087
glad i could help


thanks for the points
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question