Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > BOOK: Professional Ajax ISBN: 978-0-471-77778-6
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old July 25th, 2006, 04: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>
Reply With Quote
  #2 (permalink)  
Old August 10th, 2007, 10: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.

Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 12:05 PM
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 04:06 AM
Dynamic select box from database values pk_jsp Javascript 1 May 4th, 2005 02:45 AM



All times are GMT -4. The time now is 07:05 AM.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.