Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: Professional Ajax ISBN: 978-0-471-77778-6
This is the forum to discuss the Wrox book Professional Ajax by Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett; ISBN: 9780471777786
Important: For the new 2nd edition of this book, please post here instead: [url="http://p2p.wrox.com/forum.asp?FORUM_ID=307"]http://p2p.wrox.com/forum.asp?FORUM_ID=307[/url]
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Professional Ajax ISBN: 978-0-471-77778-6 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old July 25th, 2006, 03:39 AM
Registered User
 
Join Date: Mar 2004
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default DYNAMIC SELECT LIST BUILT FROM DATABASE

Hello,
I have a problem which I cannot solve.
My first select list is built reading elements from a database... no problem.
Now, when the user clicks on one list element, a second list should be shown but the list depends on the
1st list element.
Once the user has clicked on the 2nd list,
a 3rd list should appear that depends on the 2nd list element.

Here is what I have written so far.... It almost works ... but I don't know at all how to use AJAX.
Please, look at the comment I have added where I think that AJAX is needed.
I REALLY need help on this!
THanks

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<title>Dynamic select elements</title>
<script type="text/javascript">
<!--

function loadSelectElement(selObjId, options)
{
var selObj = document.getElementById(selObjId);

// clear the target select element apart from the "select your..." option
   selObj.options.length = 1;

// copy options from array of [value, pair] arrays to select box
// IE doesn't work if you use the DOM-standard method, however...
if (typeof(window.clientInformation) != 'undefined')
{
 // IE doesn't take the second "before" parameter...
 for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]));
}
else
{
  for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]), null);
}
}

function madeSelection(selObj)
{
  var selectedValue = selObj.options[selObj.selectedIndex].value;
  var selectedText = selObj.options[selObj.selectedIndex].text;
  if (selectedValue == '--') return;

  if (selObj.name == 'select01')  // First select list
  {
    document.getElementById('select02Container').style.display = 'block';
    document.getElementById('select02').options[0].text = 'Select 2nd value for ' + selectedText.toLowerCase();

    // Call needed to get the values of the 2nd select list that depends
    // on the "selectedText" chosen by the user in the 1st list
    // The call to AJAX should return an array with the values
    // Those values will be used to fill the "loadSelectElement"
    // Here the select is hard coded since I don't know how to do it
     loadSelectElement('select02', [
         ['select02_val1', 'val1'],
         ['select02_val2', 'val2'],
    ]);
  } // select01

  if (selObj.name == 'select02')  // "2nd select list
  {
    document.getElementById('select03Container').style.display = 'block';
    document.getElementById('select03').options[0].text = 'Select the 3rd value for ' + selectedText;

    // ANother call is needed to get the values of the 3rd select list that
    // depends on the "selectedText" chosen by the user in the 2nd list
    // The call to AJAX should return an array with the values
    // Those values will be used to fill the "loadSelectElement"
    // Here the select is hard coded since I don't know how to do it
     loadSelectElement('select03', [
      ['select03_val10', 'val10'],
      ['select03_val21', 'val21'],
         ]);
  } // select02
}

//-->
</script>
</head>

<body>
<form name="myForm">

<select name="select01" id="select01" onchange="madeSelection(this);">
<option value="--">Select the name (read from db => No pb)</option>
<%
// SUppose there are 3 possibles values which are read from the database
// String[] str=readValue();
// str contains the values that will be shown in the 1st select list
// str.length contains the number of elements
int i=2;
String[] str={"1st value","2nd value"};
for (int j=0;j<i;j++)
{
%>
  <option value="<%=str[j]%>"><%=str[j]%></option>
<%
}
%>
</select>

  <div id="select02Container" style="margin-top:1em; display:none;">
  <select name="select02" id="select02" onchange="madeSelection(this);">
      <option value="--">Select the 2nd value</option>
  </select>
  </div>

  <div id="select03Container" style="margin-top:1em; display:none;">
  <select name="select03" id="select03" onchange="madeSelection(this);">
      <option value="--">Select the 3rd value</option>
  </select>
  </div>
</form>
</body>
</html>
  #2 (permalink)  
Old August 10th, 2007, 09:47 AM
Registered User
 
Join Date: Aug 2007
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

By looking at the format of the data you want, I suggest you to use JSON. It will give you name/value pair format.



Similar Threads
Thread Thread Starter Forum Replies Last Post
dynamic list al-hijjawi ASP.NET 1.0 and 1.1 Basics 3 April 7th, 2006 11:05 AM
Dynamic Checkboxes using dynamic Select Values bsheridan Classic ASP Databases 0 March 12th, 2006 10:17 AM
dynamic upload a combo box from database on select rashmisrao JSP Basics 4 February 27th, 2006 08:41 AM
List tablesname from database & list databasename ittorget MySQL 3 September 10th, 2005 03:06 AM
Dynamic select box from database values pk_jsp Javascript 1 May 4th, 2005 01:45 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.