Cascading drop-down restructuring

Discussion in 'Javascript' started by OccasionalFlyer, Feb 7, 2011.

  1. I maintain JavaScript for my university that is used in an online
    admissions application. It's complicated by the software environment
    but the basic structure of the JavaScript, its main job is this:
    When the apllication's first page comes up, a drop-down is populated
    with all the current programs (like a major sort of)
    A student chooses a program
    The JavaScript populates a list of plans (like concentrations within a
    major)
    The user chooses a plan from the drop-down
    The JavaScript populates drop-downs for location and for term (like
    semester).

    Currently, there is a hierarchical relation between these:
    For every program, there are n plans (values in an option block)
    For every plan, there is an option block for location
    For some plans, there is an option block for an emphasis (more
    specific than a concentration)
    For every plan, there is an option block for terms

    I have a request to make it possible to link locations and terms,
    which are currently independent. This would mean that
    if I choose a program, I get a list of plans
    If I choose a plan, I get a list of locations
    If I choose a location, I get a list of terms
    Right now term and location are not connected in any way, except that
    they belong to the same plan.

    So I have to restructure the JavaScript but the complexity this
    introduces sounds like adding another 10,000 lines to the 3,000 lines
    that already exist. Any suggestions on the least complex way to do
    this? Right now, each option block of course uses a value, like the
    plan. I'm thinking that what I might need to somehow create a
    "composite" value of plan + location in order to choose which term
    block to use, for example. However, I have no idea how to do that.
    I'm looking for ideas so that this isn't he only thing I do for the
    next six months. Thanks.

    Ken
    OccasionalFlyer, Feb 7, 2011
    #1
    1. Advertising

  2. OccasionalFlyer wrote:

    > […]
    > A student chooses a program
    > The JavaScript populates a list of plans (like concentrations within a
    > major)
    > The user chooses a plan from the drop-down
    > The JavaScript populates drop-downs for location and for term (like
    > semester).
    >
    > Currently, there is a hierarchical relation between these:
    > For every program, there are n plans (values in an option block)
    > For every plan, there is an option block for location
    > For some plans, there is an option block for an emphasis (more
    > specific than a concentration)
    > For every plan, there is an option block for terms
    >
    > I have a request to make it possible to link locations and terms,
    > which are currently independent. This would mean that
    > if I choose a program, I get a list of plans
    > If I choose a plan, I get a list of locations
    > If I choose a location, I get a list of terms
    > Right now term and location are not connected in any way, except that
    > they belong to the same plan.
    >
    > So I have to restructure the JavaScript but the complexity this
    > introduces sounds like adding another 10,000 lines to the 3,000 lines
    > that already exist.


    I would submit that if you need 3'000 lines to do this already, you are
    doing something very wrong (YMMV). Compare the iframe of
    <http://www.fernfachhochschule.ch/ffhs/studieren/stundenplaene/stundenplan>
    which does something very similar to what you want. Granted, it is not XHR,
    but it did not take me more than ca. 300 lines for generating the basic form
    (server-side). (XHR isn't that much of rocket science either.)

    > Any suggestions on the least complex way to do
    > this? Right now, each option block of course uses a value, like the
    > plan. I'm thinking that what I might need to somehow create a
    > "composite" value of plan + location in order to choose which term
    > block to use, for example. However, I have no idea how to do that.
    > I'm looking for ideas so that this isn't he only thing I do for the
    > next six months. Thanks.


    Sounds like something better solvable with a database query instead (which I
    did), and XHR, if available (form submit as fallback). However, if you
    absolutely must do this client-side, or if you want to cache results (to
    avoid the roundtrip), you can filter an Array of Objects, and populate the
    SELECT elements from the result.


    HTH

    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Feb 7, 2011
    #2
    1. Advertising

  3. On Feb 7, 2:39 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > OccasionalFlyer wrote:
    > > […]
    > > A student chooses a program
    > > The JavaScript populates a list of plans (like concentrations within a
    > > major)
    > > The user chooses a plan from the drop-down
    > > The JavaScript populates drop-downs for location and for term (like
    > > semester).

    >
    > > Currently, there is a hierarchical relation between these:
    > > For every program, there are n plans (values in an option block)
    > > For every plan, there is an option block for location
    > > For some plans, there is an option block for an emphasis (more
    > > specific than a concentration)
    > > For every plan, there is an option block for terms

    >
    > > I have a request to make it possible to link locations and terms,
    > > which are currently independent.  This would mean that
    > > if I choose a program, I get a list of plans
    > > If I choose a plan, I get a list of locations
    > > If I choose a location, I get a list of terms
    > > Right now term and location are not connected in any way, except that
    > > they belong to the same plan.

    >
    > > So I have to restructure the JavaScript but the complexity this
    > > introduces sounds like adding another 10,000 lines to the 3,000 lines
    > > that already exist.

    >
    > I would submit that if you need 3'000 lines to do this already, you are
    > doing something very wrong (YMMV).  Compare the iframe of
    > <http://www.fernfachhochschule.ch/ffhs/studieren/stundenplaene/stunden...>
    > which does something very similar to what you want.  Granted, it is notXHR,
    > but it did not take me more than ca. 300 lines for generating the basic form
    > (server-side).  (XHR isn't that much of rocket science either.)
    >
    > > Any suggestions on the least complex way to do
    > > this? Right now, each option block of course uses a value, like the
    > > plan.  I'm thinking that what I might need to somehow create a
    > > "composite" value of plan + location in order to choose which term
    > > block to use, for example.  However, I have no idea how to do that.
    > > I'm looking for ideas so that this isn't he only thing I do for the
    > > next six months.  Thanks.

    >
    > Sounds like something better solvable with a database query instead (which I
    > did), and XHR, if available (form submit as fallback).  However, if you
    > absolutely must do this client-side, or if you want to cache results (to
    > avoid the roundtrip), you can filter an Array of Objects, and populate the
    > SELECT elements from the result.
    >

    I can't get the data from a different server than the one the form is
    on (and I didn't think that JS could do database access anyway??), so
    I have to do it client-side. Would you plesae elaborate a little more
    on the Array of objects approach? Thanks.

    Ken
    OccasionalFlyer, Feb 8, 2011
    #3
  4. OccasionalFlyer

    Evertjan. Guest

    OccasionalFlyer wrote on 08 feb 2011 in comp.lang.javascript:

    > I can't get the data from a different server than the one the form is
    > on (and I didn't think that JS could do database access anyway??), so
    > I have to do it client-side.


    What a strange conclusion.

    Why would you access a database clientside BECAUSE Javascript could not
    access such [quod non]?

    Javascript can perfectly well query a serverside database, when used as a
    serverside language. I do this lots of times.

    What does it matter wich server the data are on, as long as you SQL-query
    the data on that server?

    Serverside XMLHTTP at the domain in question can easily request the result
    from that other domain's server and send it to the client as an AJAX
    response.

    Serverside XMLHTTP-requests does not suffer the drawbacks of a clientside
    same domain policy of a browser.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Feb 8, 2011
    #4
  5. Am 2011-02-08 01:54, schrieb OccasionalFlyer:
    > On Feb 7, 2:39 pm, Thomas 'PointedEars' Lahn<>
    > wrote:


    >> Sounds like something better solvable with a database query instead (which I
    >> did), and XHR, if available (form submit as fallback). However, if you
    >> absolutely must do this client-side, or if you want to cache results (to
    >> avoid the roundtrip), you can filter an Array of Objects, and populate the
    >> SELECT elements from the result.
    >>

    > I can't get the data from a different server than the one the form is
    > on (and I didn't think that JS could do database access anyway??), so
    > I have to do it client-side.


    JS doesn't access the server-side database. JS sends a plain POST or GET
    request to the server, where a server-side script does the query and
    delivers the result with the response. The response is plain text -
    normally in an appropriate format, that is easy to parse for JS. Whilst
    it is called *XML*HttpRequest, nowadays the format of choice is JSON.

    Googling for "AJAX", "XMLHttpRequest", "JSON" will give you plenty to read.

    As a start try
    https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest
    (BTW: You are looking for *asynchronous* requests)

    Use a tool like Firbug to track requests and responses.

    http://vxweb.net/tree#example3

    retrieves "branches" via XHR (and caches them) - nice for tracking
    requests and responses in JSON format.

    Gregor


    --
    http://vxweb.net
    Gregor Kofler, Feb 8, 2011
    #5
  6. OccasionalFlyer wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> OccasionalFlyer wrote:
    >> > […]
    >> > Any suggestions on the least complex way to do this? Right now, each
    >> > option block of course uses a value, like the plan. I'm thinking that
    >> > what I might need to somehow create a "composite" value of plan +
    >> > location in order to choose which term block to use, for example.
    >> > However, I have no idea how to do that. I'm looking for ideas so that
    >> > this isn't he only thing I do for the next six months. Thanks.

    >>
    >> Sounds like something better solvable with a database query instead
    >> (which I did), and XHR, if available (form submit as fallback). However,
    >> if you absolutely must do this client-side, or if you want to cache
    >> results (to avoid the roundtrip), you can filter an Array of Objects, and
    >> populate the SELECT elements from the result.
    >>

    > I can't get the data from a different server than the one the form is
    > on (and I didn't think that JS could do database access anyway??), so
    > I have to do it client-side. Would you plesae elaborate a little more
    > on the Array of objects approach? Thanks.


    Gregor has probably clarified most of your misconceptions. As for that
    "Array of Objects" (letter case intended!), use

    new Array(
    new MyObject(…),
    new MyObject(…),
    …
    )

    which nowadays is written shorter as

    [
    {propertyName: value, …},
    {propertyName: value, …},
    …
    ]

    with the additional benefit that the Object initializer/literal can make
    user-defined constructors (here: `MyObject') unnecessary. This is also
    JSON-compatible, which is based on that syntax.

    I am sure you can figure out how to filter such an Array so that the
    resulting Array only contains the Objects that match your conditions,
    and to use that to populate the SELECT elements.


    PointedEars
    --
    Use any version of Microsoft Frontpage to create your site.
    (This won't prevent people from viewing your source, but no one
    will want to steal it.)
    -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
    Thomas 'PointedEars' Lahn, Feb 8, 2011
    #6
  7. On Feb 8, 12:58 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > OccasionalFlyerwrote:
    > > Thomas 'PointedEars' Lahn wrote:
    > >>OccasionalFlyerwrote:
    > >> > […]
    > >> > Any suggestions on the least complex way to do this? Right now, each
    > >> > option block of course uses a value, like the plan.  I'm thinking that
    > >> > what I might need to somehow create a "composite" value of plan +
    > >> > location in order to choose which term block to use, for example.
    > >> > However, I have no idea how to do that. I'm looking for ideas so that
    > >> > this isn't he only thing I do for the next six months.  Thanks.

    >
    > >> Sounds like something better solvable with a database query instead
    > >> (which I did), and XHR, if available (form submit as fallback).  However,
    > >> if you absolutely must do this client-side, or if you want to cache
    > >> results (to avoid the roundtrip), you can filter an Array of Objects, and
    > >> populate the SELECT elements from the result.

    >
    > > I can't get the data from a different server than the one the form is
    > > on (and I didn't think that JS could do database access anyway??), so
    > > I have to do it client-side.  Would you please elaborate a little more
    > > on the Array of objects approach?  Thanks.


    There are complexities here that go well beyond the simple matter of
    writing a server-side script, such as the database being under the
    control of PeopleSoft. Then there's the reality that I would not be
    allowed to have a server-side script. I would have to follow Oracle's
    recommendation of using application messaging to pass data back and
    forth, and that's too much work for this. This needs to run clinet-
    side only. I didn't design things that way. I just have to live with
    it.

    So, with the array model, each Array Object is a discrete value
    and I have to search the array and look for objects that meet certain
    criteria, right? Thanks.




    > Gregor has probably clarified most of your misconceptions.  As for that
    > "Array of Objects" (letter case intended!), use
    >
    >   new Array(
    >     new MyObject(…),
    >     new MyObject(…),
    >     …
    >   )
    >
    > which nowadays is written shorter as
    >
    >   [
    >     {propertyName: value, …},
    >     {propertyName: value, …},
    >     …
    >   ]
    >
    > with the additional benefit that the Object initializer/literal can make
    > user-defined constructors (here: `MyObject') unnecessary.  This is also
    > JSON-compatible, which is based on that syntax.
    >
    > I am sure you can figure out how to filter such an Array so that the
    > resulting Array only contains the Objects that match your conditions,
    > and to use that to populate the SELECT elements.
    >
    > PointedEars
    > --
    > Use any version of Microsoft Frontpage to create your site.
    > (This won't prevent people from viewing your source, but no one
    > will want to steal it.)
    >   -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)
    OccasionalFlyer, Feb 22, 2011
    #7
  8. OccasionalFlyer wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> OccasionalFlyerwrote:
    >> > I can't get the data from a different server than the one the form is
    >> > on (and I didn't think that JS could do database access anyway??), so
    >> > I have to do it client-side. Would you please elaborate a little more
    >> > on the Array of objects approach? Thanks.

    >
    > There are complexities here that go well beyond the simple matter of
    > writing a server-side script, such as the database being under the
    > control of PeopleSoft. Then there's the reality that I would not be
    > allowed to have a server-side script. I would have to follow Oracle's
    > recommendation of using application messaging to pass data back and
    > forth, and that's too much work for this. This needs to run clinet-
    > side only. I didn't design things that way. I just have to live with
    > it.


    I could not care less about all this.

    > So, with the array model, each Array Object is a discrete value


    Define: discrete value

    > and I have to search the array


    No, but you can.

    > and look for objects that meet certain criteria, right?


    Right.

    > Thanks.


    Your posting has nothing to do with my followup (you have not even quoted
    it!), and the rest of your quoting style is awful, too.

    > [Top post]


    Please learn to post.

    <http://jibbering.com/faq/#posting>


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Feb 22, 2011
    #8
  9. OccasionalFlyer

    RobG Guest

    On Feb 23, 7:26 am, OccasionalFlyer <> wrote:
    > On Feb 8, 12:58 pm, Thomas 'PointedEars' Lahn <>
    > wrote:
    >
    >
    >
    > > OccasionalFlyerwrote:
    > > > Thomas 'PointedEars' Lahn wrote:
    > > >>OccasionalFlyerwrote:
    > > >> > […]
    > > >> > Any suggestions on the least complex way to do this? Right now, each
    > > >> > option block of course uses a value, like the plan.  I'm thinking that
    > > >> > what I might need to somehow create a "composite" value of plan +
    > > >> > location in order to choose which term block to use, for example.
    > > >> > However, I have no idea how to do that. I'm looking for ideas so that
    > > >> > this isn't he only thing I do for the next six months.  Thanks.


    If you can provide a small data set, you might get some useful help.
    Presumably you already have a data structure?

    [...]
    > There are complexities here that go well beyond the simple matter of
    > writing a server-side script, such as the database being under the
    > control of PeopleSoft.  Then there's the reality that I would not be
    > allowed to have a server-side script.  I would have to follow Oracle's
    > recommendation of using application messaging to pass data back and
    > forth, and that's too much work for this.  This needs to run clinet-
    > side only.  I didn't design things that way.  I just have to live with
    > it.


    Depending on client siede javascript is not a great idea, much better
    to have it done server side. But if that's all you have...

    If you can't link to the database where the data are maintained, your
    maintenance has just increased greatly. Whatever structure you decide
    on, someone will have to learn how to maintain it and keep it in sync
    with the database. So you must document it well.

    > So, with the array model, each Array Object is a discrete value
    > and I have to search the array and look for objects that meet certain
    > criteria, right? Thanks.


    More or less. You can build one or more indexes to the array to make
    searches faster if there are more than a thousand or so elements in
    the array. A simple index based on the first letter of the term to be
    searched for that is built when the data object is loaded can make a
    difference.


    --
    Rob
    RobG, Feb 23, 2011
    #9
  10. RobG wrote:

    > OccasionalFlyer wrote:
    >> So, with the array model, each Array Object is a discrete value
    >> and I have to search the array and look for objects that meet certain
    >> criteria, right? Thanks.

    >
    > More or less. You can build one or more indexes to the array to make
    > searches faster if there are more than a thousand or so elements in
    > the array. A simple index based on the first letter of the term to be
    > searched for that is built when the data object is loaded can make a
    > difference.


    Generally a good idea; but if you read the OP more carefully, they have, so
    far, a different use-case that does not demand auto-completion; and they do
    not have only one select control, but three.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Feb 23, 2011
    #10
  11. On Feb 8, 12:58 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > OccasionalFlyerwrote:
    > > Thomas 'PointedEars' Lahn wrote:
    > >>OccasionalFlyerwrote:
    > >> > […]
    > >> > Any suggestions on the least complex way to do this? Right now, each
    > >> > option block of course uses a value, like the plan.  I'm thinking that
    > >> > what I might need to somehow create a "composite" value of plan +
    > >> > location in order to choose which term block to use, for example.
    > >> > However, I have no idea how to do that. I'm looking for ideas so that
    > >> > this isn't he only thing I do for the next six months.  Thanks.

    >
    > >> Sounds like something better solvable with a database query instead
    > >> (which I did), and XHR, if available (form submit as fallback).  However,
    > >> if you absolutely must do this client-side, or if you want to cache
    > >> results (to avoid the roundtrip), you can filter an Array of Objects, and
    > >> populate the SELECT elements from the result.

    >
    > > I can't get the data from a different server than the one the form is
    > > on (and I didn't think that JS could do database access anyway??), so
    > > I have to do it client-side.  Would you plesae elaborate a little more
    > > on the Array of objects approach?  Thanks.

    >
    > Gregor has probably clarified most of your misconceptions.  As for that
    > "Array of Objects" (letter case intended!), use
    >
    >   new Array(
    >     new MyObject(…),
    >     new MyObject(…),
    >     …
    >   )
    >
    > which nowadays is written shorter as
    >
    >   [
    >     {propertyName: value, …},
    >     {propertyName: value, …},
    >     …
    >   ]
    >
    > with the additional benefit that the Object initializer/literal can make
    > user-defined constructors (here: `MyObject') unnecessary.  This is also
    > JSON-compatible, which is based on that syntax.
    >
    > I am sure you can figure out how to filter such an Array so that the
    > resulting Array only contains the Objects that match your conditions,
    > and to use that to populate the SELECT elements.
    >
    > PointedEars
    >

    Okay, here's your post. I might say firwt that at least in the
    JavaScript book I have, there is no direct call in JavaScript to go to
    a database. The examples in Wilton's Beginning JavaScript use ADOs
    and that's not going to fly on LINUX servers. Things may have changed
    in JS since that book but I don't see APIs to do direct database
    access. That is neither here nor there in my case because I"m simply
    not allowed to do that for any application.

    That said, here is an example of what I have in my JavaScript so far
    and I'm having a little difficulty envisioning what you are suggesting
    (being relatively "green" at JavaScript). I'm not pasting in the
    logic as such, as the file is around 4000 lines long.

    Selecting an Academic Program 'NURSG' causes a select to be populated
    with the following Academic Plans:
    {
    value: "NURSG",
    options: [
    { value: "GNUR04", caption: "MSN: School Nursing & School Nurse
    Services Credential" },
    { value: "GNUR06", caption: "MSN: Adult CNS & ANP" },
    { value: "GNUR08", caption: "MSN: Adult Nurse Practitioner" },
    { value: "GNUR17", caption: "MSN: Family Nurse Practitioner &
    School Nurse Services Credential" },
    { value: "GNUR23", caption: "MSN: Parent/Child CNS & PNP" },
    { value: "GNUR29", caption: "MSN: Parish Nursing & Health
    Ministries" },
    { value: "GNUR31", caption: "MSN: Pediatric Nurse Practitioner" },
    { value: "GNUR33", caption: "MSN: Pediatric Nurse Practitioner &
    School Nurse Services Credential" },
    { value: "GNUR38", caption: "MSN: Psychiatric Mental Health Nurse
    Practitioner" },
    { value: "GNUR35", caption: "MSN: Adult Nursing " },
    { value: "GNUR36", caption: "MSN: Family Nurse Practitioner " },
    { value: "GNUR37", caption: "MSN: Parent/Child Nursing " },
    { value: "GNEL01", caption: "Entry-Level Master's (ELM)-MSN" },
    { value: "GNEL02", caption: "ELM-MSN: School Nursing & School
    Nurse Services Credential" },
    { value: "GNEL03", caption: "ELM-MSN: Family Nurse Practitioner
    " },
    { value: "GNEL04", caption: "ELM-MSN: Adult CNS & ANP" },
    { value: "GNEL05", caption: "ELM-MSN: Adult Nurse Practitioner" },
    { value: "GNEL06", caption: "ELM-MSN: Adult Nursing " },
    { value: "GNEL07", caption: "ELM-MSN: Family Nurse Practitioner &
    School Nurse Services Credential" },
    { value: "GNEL08", caption: "ELM-MSN: Parent/Child CNS & PNP" },
    { value: "GNEL09", caption: "ELM-MSN: Parent/Child Nursing " },
    { value: "GNEL10", caption: "ELM-MSN: Parish Nursing & Health
    Ministries" },
    { value: "GNEL11", caption: "ELM-MSN: Pediatric Nurse
    Practitioner" },
    { value: "GNEL12", caption: "ELM-MSN: Pediatric Nurse Practitioner
    & School Nurse Services Credential" },
    { value: "GNEL13", caption: "ELM-MSN: Psychiatric Mental Health
    Nurse Practictioner" }
    ]
    },
    If the user chooses the value that goes with 'GNEL11'
    two drop-downs are populated:
    Term:
    {
    value: "GNEL10",
    options: [
    { value: "2117", caption: "Fall, 2011" },
    { value: "2127", caption: "Fall, 2012" },
    { value: "2137", caption: "Fall, 2013" },
    { value: "2147", caption: "Fall, 2014" }
    ]
    },

    and
    Location (usually multiple values)
    {
    value: "GNEL11",
    options: [
    loc["sd"],
    loc["az"]
    ]
    },

    What I need to be able to do is to have the term drop-down populated
    as now but unlike now, have locations tied to specific terms, e.g.,
    '2137' for 'GNEL11' to populate a list of locations. There might be
    multiple locations for one term. So the list of locations would be
    resolved as

    Program + Plan + Term = list of locations in a select

    So can you give me a bit more specific direction please?
    OccasionalFlyer, Feb 23, 2011
    #11
  12. OccasionalFlyer

    RobG Guest

    On Feb 24, 7:50 am, OccasionalFlyer <> wrote:
    > On Feb 8, 12:58 pm, Thomas 'PointedEars' Lahn <>
    > wrote:
    >
    > > OccasionalFlyerwrote:
    > > > Thomas 'PointedEars' Lahn wrote:
    > > >>OccasionalFlyerwrote:
    > > >> > […]
    > > >> > Any suggestions on the least complex way to do this? Right now, each
    > > >> > option block of course uses a value, like the plan.  I'm thinking that
    > > >> > what I might need to somehow create a "composite" value of plan +
    > > >> > location in order to choose which term block to use, for example.
    > > >> > However, I have no idea how to do that. I'm looking for ideas so that
    > > >> > this isn't he only thing I do for the next six months.  Thanks.

    >
    > > >> Sounds like something better solvable with a database query instead
    > > >> (which I did), and XHR, if available (form submit as fallback).  However,
    > > >> if you absolutely must do this client-side, or if you want to cache
    > > >> results (to avoid the roundtrip), you can filter an Array of Objects, and
    > > >> populate the SELECT elements from the result.

    >
    > > > I can't get the data from a different server than the one the form is
    > > > on (and I didn't think that JS could do database access anyway??), so
    > > > I have to do it client-side.  Would you plesae elaborate a little more
    > > > on the Array of objects approach?  Thanks.

    >
    > > Gregor has probably clarified most of your misconceptions.  As for that
    > > "Array of Objects" (letter case intended!), use

    >
    > >   new Array(
    > >     new MyObject(…),
    > >     new MyObject(…),
    > >     …
    > >   )

    >
    > > which nowadays is written shorter as

    >
    > >   [
    > >     {propertyName: value, …},
    > >     {propertyName: value, …},
    > >     …
    > >   ]

    >
    > > with the additional benefit that the Object initializer/literal can make
    > > user-defined constructors (here: `MyObject') unnecessary.  This is also
    > > JSON-compatible, which is based on that syntax.

    >
    > > I am sure you can figure out how to filter such an Array so that the
    > > resulting Array only contains the Objects that match your conditions,
    > > and to use that to populate the SELECT elements.

    >
    > > PointedEars

    >
    > Okay, here's your post.  I might say firwt that at least in the
    > JavaScript book I have, there is no direct call in JavaScript to go to
    > a database.  The examples in Wilton's Beginning JavaScript use ADOs
    > and that's not going to fly on LINUX servers.  Things may have changed
    > in JS since that book but I don't see APIs to do direct database
    > access.  That is neither here nor there in my case because I"m simply
    > not allowed to do that for any application.


    See Gregor and Thomas' earlier posts for how to communicate with a
    server-side database. Javascirpt can't do it directly, it must be
    provided with a mechanism by the host environment. In a browser, there
    is form post/get, XHR, script element, iFrame, and so on that send a
    request to a server that completes the request and returns some data.


    > That said, here is an example of what I have in my JavaScript so far
    > and I'm having a little difficulty envisioning what you are suggesting
    > (being relatively "green" at JavaScript).  I'm not pasting in the
    > logic as such, as the file is around 4000 lines long.
    >
    > Selecting an Academic Program 'NURSG' causes a select to be populated
    > with the following Academic Plans:


    It would be better to create a small test data set that fits into
    lines wrapped at about 70 characters. Allowing auto-wrapping makes
    life more difficult for those trying to read your code.

    I've reformatted enough of it for it to make sense to me (I think).

    > {
    >   value: "NURSG",
    >   options: [
    >     { value: "GNUR04",
    > caption: "MSN: School Nursing & School Nurse Services Credential" },
    >     { value: "GNUR06",
    > caption: "MSN: Adult CNS & ANP" },
    >     { value: "GNUR08",

    [...]
    >     { value: "GNEL08",
    > caption: "ELM-MSN: Parent/Child CNS & PNP" },
    >     { value: "GNEL09",
    > caption: "ELM-MSN: Parent/Child Nursing " },
    >     { value: "GNEL10",
    > caption: "ELM-MSN: Parish Nursing & Health Ministries" },
    >     { value: "GNEL11",
    > caption: "ELM-MSN: Pediatric Nurse Practitioner" },
    >     { value: "GNEL12",

    [...]
    >   ]
    > },


    I'll guess that this is an array of objects, so you have something
    like:

    var programs = [
    {value: 'program name',
    options: [
    {value: 'plan code', option: 'plan name'},
    {value: 'plan code', option: 'plan name'},
    ...
    ]
    },
    ...
    ];

    For each program there is an array of plan codes and names.

    > If the user chooses the value that goes with 'GNEL11'


    When the user selects a plan...


    > two drop-downs are populated:
    > Term:
    > {
    >    value: "GNEL10",


    Did you mean GNEL11?

    >    options: [
    >      { value: "2117", caption: "Fall, 2011" },
    >      { value: "2127", caption: "Fall, 2012" },
    >      { value: "2137", caption: "Fall, 2013" },
    >      { value: "2147", caption: "Fall, 2014" }
    >    ]
    > },
    >
    > and
    > Location (usually multiple values)
    >  {
    >    value: "GNEL11",
    >    options: [
    >      loc["sd"],
    >      loc["az"]
    >    ]
    >  },


    So when an plan is selected, users are given list of terms and
    locations for that plan. Presumably the plan is offered at each
    location during each term, so I can do GNEL11 at sd or az during terms
    fall 2011 to 2014.

    >
    > What I need to be able to do is to have the term drop-down populated
    > as now but unlike now, have locations tied to specific terms, e.g.,
    > '2137' for 'GNEL11' to populate a list of locations. There might be
    > multiple locations for one term.  So the list of locations would be
    > resolved as
    >
    > Program + Plan + Term = list of locations in a select


    So instead of selecting a plan and getting both term and location, you
    want them to select the plan, then the term, then be presented with a
    list of locations?

    So if I select:

    GNEL11 + Fall 2012

    I might see both az and sd, but if I select Fall 2013 I might only see
    az.

    Given the data above, you can only go from term -> plan -> location so
    you get the locations for GNEL11 (as that is the only common key
    between term and location) which is exactly what you have now.

    I think your issue is that plans aren't offered at all the linked
    locations during all the linked terms. But the data above doesn't have
    that information so you can't present it.


    --
    Rob
    RobG, Feb 23, 2011
    #12
  13. OccasionalFlyer wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> OccasionalFlyerwrote:
    >> > Thomas 'PointedEars' Lahn wrote:
    >> >> OccasionalFlyerwrote:
    >> >> > […]
    >> >> > Any suggestions on the least complex way to do this? Right now, each
    >> >> > option block of course uses a value, like the plan. I'm thinking
    >> >> > that what I might need to somehow create a "composite" value of plan
    >> >> > + location in order to choose which term block to use, for example.
    >> >> > However, I have no idea how to do that. I'm looking for ideas so
    >> >> > that this isn't he only thing I do for the next six months. Thanks.

    >>
    >> >> Sounds like something better solvable with a database query instead
    >> >> (which I did), and XHR, if available (form submit as fallback).
    >> >> However, if you absolutely must do this client-side, or if you want to
    >> >> cache results (to avoid the roundtrip), you can filter an Array of
    >> >> Objects, and populate the SELECT elements from the result.

    >>
    >> > I can't get the data from a different server than the one the form is
    >> > on (and I didn't think that JS could do database access anyway??), so
    >> > I have to do it client-side. Would you plesae elaborate a little more
    >> > on the Array of objects approach? Thanks.

    >>
    >> Gregor has probably clarified most of your misconceptions. As for that
    >> "Array of Objects" (letter case intended!), use
    >>
    >> new Array(
    >> new MyObject(…),
    >> new MyObject(…),
    >> …
    >> )
    >>
    >> which nowadays is written shorter as
    >>
    >> [
    >> {propertyName: value, …},
    >> {propertyName: value, …},
    >> …
    >> ]
    >>
    >> with the additional benefit that the Object initializer/literal can make
    >> user-defined constructors (here: `MyObject') unnecessary. This is also
    >> JSON-compatible, which is based on that syntax.
    >>
    >> I am sure you can figure out how to filter such an Array so that the
    >> resulting Array only contains the Objects that match your conditions,
    >> and to use that to populate the SELECT elements.

    >
    > Okay, here's your post.


    I beg your pardon? Certainly I am not in need of your postings (in fact, at
    the time of writing, I wish I would be without them.)

    I will only ask you only one more time to post in a readable manner. If you
    do not know what that means, imagine yourself to be a person with a full-
    time job, very little free time, and potentially hundreds of postings to
    read each day. You would not expect to receive seemingly random replies,
    but a followup that shows that your postings had been read and thought
    about. And you would (have to) filter out ruthlessly all postings that,
    after you remarked on their not recommended nature several times, continued
    to show that bad form. <http://www.catb.org/~esr/faqs/smart-questions.html>

    And please stop quoting signatures.

    > I might say firwt that at least in the JavaScript book I have, there is no
    > direct call in JavaScript to go to a database.


    That depends on how one defines a "direct call". However, it has not been
    suggested that you use JavaScript (or another ECMAScript implementation) to
    issue the database query.

    > The examples in Wilton's Beginning JavaScript use ADOs
    > and that's not going to fly on LINUX servers.


    (Linux is _not_ an acronym.) If I am not very much mistaken, this is the
    first time that you say anything about your runtime environment. Remember
    that we are not omniscient and that this is not a guessing game. If you
    wish us to help you, you need to help us helping you, by providing
    sufficient information (which includes what *you* have tried to solve the
    problem).

    > Things may have changed in JS since that book but I don't see APIs to do
    > direct database access.


    You can access a database directly with client-side scripting, a client-side
    one (like SQLite, in Gecko-based browsers). But your script needs to be
    running in a privileged environment, and there must be a language binding in
    the database access API. The former is seldom the case on the web.

    > That is neither here nor there in my case because I"m simply
    > not allowed to do that for any application.


    Again, nobody suggested that you do. You appear to have a serious reading
    problem, and I do not see any serious attempts on *your* part to solve
    *your* software development problem, which casts into doubt whether you are
    worth spending the free-time for further answers.

    > That said, here is an example of what I have in my JavaScript so far
    > and I'm having a little difficulty envisioning what you are suggesting
    > (being relatively "green" at JavaScript).


    Judging from your postings it is very likely indeed that this assignment is
    way over your head. Why not try to build simpler things first?

    > I'm not pasting in the logic as such, as the file is around 4000 lines
    > long.


    (Should I be grateful now?)

    > Selecting an Academic Program 'NURSG' causes a select to be populated
    > with the following Academic Plans: […]


    Is this a description of what happens now? If yes, how exactly is that
    done? If no, what is it supposed to be? (A specification for me to write
    to for you for free?)

    > What I need to be able to do is to have the term drop-down populated
    > as now but unlike now, have locations tied to specific terms, e.g.,
    > '2137' for 'GNEL11' to populate a list of locations. There might be
    > multiple locations for one term. So the list of locations would be
    > resolved as
    >
    > Program + Plan + Term = list of locations in a select


    For that to be possible client-side, you need the server side to present the
    information to the client in usable form. XHR has been mentioned. If the
    server-side application does not provide the means, which sure looks so to
    me, you cannot do it that way, plain and simple.

    > So can you give me a bit more specific direction please?


    No, because you are being too unspecific yourself; you appear to be very
    excited, and, as a result, confused. Calm down, and try again using your
    brain. Playing stupid does not work with me.


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Feb 24, 2011
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    745
    Ben Strackany
    Jan 7, 2005
  2. Replies:
    0
    Views:
    416
  3. weiwei
    Replies:
    0
    Views:
    1,002
    weiwei
    Jan 5, 2007
  4. Replies:
    0
    Views:
    466
  5. Michel Couche

    Cascading radiobutton group/drop down list

    Michel Couche, Apr 28, 2007, in forum: Javascript
    Replies:
    1
    Views:
    164
    shimmyshack
    Apr 29, 2007
Loading...

Share This Page