dcsimg


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Dynamic List Boxes

  1. #1
    Pat Patullo Guest

    Dynamic List Boxes


    Have two list boxes "Department" and "Employees" on the main page. When selecting
    a particular department, the employees list box gets updated accordingly.
    After submitting the form and the information of the employee is displayed
    on the resulting page, I click on the <BACK> button and find that the values
    in the employee box gets reset.

    I used the sample code from Boris Feldman "Fill a Select List with Javascript"
    found at "http://www.inquiry.com/techtips/js_pro/10min/10min1298/10min1298.asp"

    Can someone please show me how to code this properly so that the list boxes
    and selections don't get reset when returning back to the main page ?

  2. #2
    Gary Guest

    Re: Dynamic List Boxes


    Pat, I use <div id="mydiv"> tags as place holders for my dynamic select boxes.
    I then dynamically change the contents of the page (NO ROUND TRIP TO SERVER)
    with syntax like:

    mydiv.innerHTML = "...code for an entire select tag..."

    I use Remote Scripting to fetch complete HTML code blocks for an entire select
    tag, given a parameter.

    In your case, you could have a COM object running on the server, with a method
    "GetEmployeeList(DepartmentID)". On the change event of the DepartmentID
    you would call the method. Here's part of the select tag code for the Department
    list:

    <SELECT name="selDepartments" size=1 OnChange="GetEmployeeList(this.options[this.selectedIndex].value)">

    You then need to create a jscript function called "GetEmployeeList" which
    will make the call up the server via RemoteScripting. When the block of
    HTML is returned back to the client, the jscript function would then insert
    the HTML into the div tag using the syntax I gave above.

    This eliminates the problem of having your select boxes reset. Since you
    remain on the same page, you cannot use the browsers "back" button to get
    back to a previous state. I actually use the innerHTML method alot to control
    the UI. For instance, after an employee is selected from the Employee list,
    I'd use Remote Scripting to fetch the employee record (the COM object could
    return a fully formatted HTML table containing the employee data, for instance),
    which I would then insert that HTML code into a div tag that sits empty at
    the bottom of the original page until this call is made.

    You can easily write a jscript function to reset the screen (it would just
    overwrite the innerHTML property of each div tag to some initial value, like
    empty "").

    It's an entirely different approach, but something to ponder.
    I hope this sparked some ideas for you.

    Gary

    "Pat Patullo" <ppatullo@800gosuper.com> wrote:
    >
    >Have two list boxes "Department" and "Employees" on the main page. When

    selecting
    >a particular department, the employees list box gets updated accordingly.
    >After submitting the form and the information of the employee is displayed
    >on the resulting page, I click on the <BACK> button and find that the values
    >in the employee box gets reset.
    >
    >I used the sample code from Boris Feldman "Fill a Select List with Javascript"
    >found at "http://www.inquiry.com/techtips/js_pro/10min/10min1298/10min1298.asp"
    >
    >Can someone please show me how to code this properly so that the list boxes
    >and selections don't get reset when returning back to the main page ?



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center