1 2 Previous Next 15 Replies Latest reply on Mar 19, 2012 5:30 AM by Fimano

    Conditional value list - the CWP way

    Fimano

      We have a company providing 'study abroad' information.

      Latest client / server versions. Server OS is OS X 10.6, own server, hosted at provider.

      Students can now search the database for available programs, based on

      - level (mandatory)

      - main category (field of study)

      - sub-category <== this is what I have to implement...

      - country

      - university.

       

      The currently running solution is embedded in an iframe:

      Find dit studium | edu

       

      In the prototype, I did in FileMaker Pro, you would select a main category, then the relevant sub options would appear.

      Not so easy in CWP...

      My skills are great when it comes to FileMaker, not too bad in html, very basic in php, barely existing in css, jquery, ajax...

       

      Example: when selecting Education, the choices should be:

      -Curriculum and Education Studies

      and
      - Teacher Education,
      preferable with the 'sub' select appearing upon choosing a main category.
      Hope this makes sense.
      Thanks,
      Jens
        • 1. Re: Conditional value list - the CWP way
          beverly

          well, to appear "seamless as in native FM", ajax would be the way to go. the web is not a persistent connection, so each change to a fields value, needs to trigger the next list. ajax allows the page "bits" to be changed without refreshing the entire page.

           

          Beverly

          • 2. Re: Conditional value list - the CWP way
            mbraendle

            Have a look at YUI's TreeView AJAX library: http://developer.yahoo.com/yui/treeview/ , especially at the "Dynamically Loading Node Data" example. When a subcategory is loaded, it will be cached by the browser, so the next time the client closes and opens it, no queries have to be sent to the server.

            • 3. Re: Conditional value list - the CWP way
              beverly

              On occasion, IF there aren't many values (50-) and not many lists (3-4), an old-fashioned javascript array works well. Populate it once with all values and trigger with onchange().

               

              -- sent from my iPhone4 --

              Beverly Voth

              --

              • 4. Re: Conditional value list - the CWP way
                steve.winter

                As both Bverly and Martin have pointed out, to do do this n an FMP-like way for most users, you're going to need to use JavaScript...

                 

                If the list is short, then as Beverly said, you can create a JavaScript array on page load, and use that to populate the second drop down... If the list is longer, the you'll need to add AJAX requests back to the server to ths mix..

                 

                So, to provide more targeted assistance, how many possible options are there for main category, and, in total, how many options for the sub category...?

                 

                Cheers

                Steve

                • 5. Re: Conditional value list - the CWP way
                  steve.winter

                  Sorry Beverly, managed to type your name incorrectly in the above reply, I could blame the iPad, but really it was me not paying enought attention before hitting send... Apologies...!

                  • 6. Re: Conditional value list - the CWP way
                    Fimano

                    Thanks,

                    the number of values can be seen in the link that I provided.

                    There is the mandatory selection of level (I check in my php code that one of 5 levels has been selected).

                    Regardless of level, you can select:

                    - WHERE you want to study:

                    -- country

                    -- university

                    - WHAT you want to study

                    -- main field

                    -- sub field.

                     

                    As you can see, there are 8 countries to choose from,

                    30 universities to choose from (not surprisingly, from the above countries, but we don't do anything about that),

                    15 main fields (or areas of study).

                    As you can't see, there are 91 sub fields, with a maximum of 13 values within one main field (Engineering and Technology).

                     

                    From this, I guess it would make sense to load it all at once but hide values pertaining to the non-selected main fields.

                     

                    As you can see / guess, I use it to generate a search performed when pressing the submit (Søg) button.

                    Using the GET method, the form submits and reloads the same page, keeping the search criteria vivible to the user.

                    The URL after submit looks like this:

                    http://studie.edu-danmark.dk/soeg.php?level=1&main=7&country=484&uni=

                    (depending on values selected, of course).

                    Because my page is wrapped within an iFrame, the user does not see the query string, but I wouldn't mind if they did.

                     

                    Hope this clarifies matters.

                    As I stated, my knowledge of JS ~ 0, so please be gentle...

                     

                    Thanks again,

                    Jens

                    • 7. Re: Conditional value list - the CWP way
                      mbraendle

                      I think these lists are so short (a total of about 40 values) that one does not need to load them asynchronously and cache them. So a simpe onchange attribute and a JavaScript event handler on the select tag to reload the page with all associated values would do.

                       

                      A different approach to something very similar can be seen in our textbook portal. Here we operate on much larger lists. This makes heavy use of YUIs DataSource and DataTable with AJAX calls to enable the user to drill down to the desired result. If you are interested in a code example, please mail me off-list.

                      1 of 1 people found this helpful
                      • 8. Re: Conditional value list - the CWP way
                        Fimano

                        Thanks very much. Still struggling with the simple JavaScript...

                        And then asking myself how to return a 2-level array that has the names and id numbers for both main and sub.

                        I am using the getValueListTwoFields() command from the FileMaker php library.

                        An example of something that does just this would surely be helpful.

                        • 9. Re: Conditional value list - the CWP way
                          mbraendle

                          Rather query the table which is the basis for the value list than the value list itself (i.e. "forget about value lists"). Which of course requires that your relationship diagram is properly set up.

                           

                          E.g. countries  1 -- n universities.

                           

                          E.g. selection of a country in corresponding drop down menu triggers a find in the university table with foreign key = country key, which returns the two fields primary key for university and the university name (plus the foreign key field).

                          • 10. Re: Conditional value list - the CWP way
                            Fimano
                            131Agriculture
                            132Animal Sciences
                            162Fishery
                            163Forestry
                            166Horticulture
                            216Veterinary Sciences
                            136Architecture
                            140Building/Construction
                            154Design
                            215Urban Planning
                            130Accounting
                            141Business Communication
                            218Business/Commerce
                            161Finance and Economics
                            168Human Resource Management
                            171International Business
                            179Logistics
                            180Management
                            184Marketing and Sales
                            186MBA
                            133Animation
                            146Communication
                            160Film, Television and Digital Media
                            174Journalism
                            191Multimedia design
                            152Dance
                            164Graphic and Design Studies
                            192Music
                            198Performing Arts
                            201Photography
                            214Theatre/Acting
                            217Visual Arts and Crafts
                            151Curriculum and Education Studies
                            212Teacher Education
                            137Aviation and Aerospace Engineering
                            139Biomedical Engineering
                            142Chemical Engineering
                            144Civil Engineering
                            157Electrical and Electronic Engineering
                            158Environmental Engineering
                            181Manufacturing Engineering
                            182Marine and Ocean Engineering
                            187Mechanical Engineering
                            188Mechatronics
                            193Nanotechnology
                            209Software Engineering
                            213Telecommunication Engineering
                            167Hospitality and Tourism
                            210Sports and Recreation Management
                            135Archaeology
                            150Cultural Studies
                            165History
                            219Humanities
                            175Language and Linguistics
                            177Literature
                            189Media Studies
                            200Philosophy
                            207Religious Studies
                            147Computer Science
                            148Computer Systems Engineering
                            169Information Systems
                            170Information Technology
                            149Criminology
                            172International Law
                            176Law
                            153Dental Health
                            190Medicine and Health Sciences
                            194Nursing
                            195Nutrition and Dietics
                            196Occupational Therapy
                            197Optical Sciences
                            199Pharmacology
                            203Physiotherapy
                            206Public Health
                            211Sports/Excercise science
                            138Biological Sciences
                            143Chemical Sciences
                            155Earth Sciences
                            159Environmental Sciences
                            183Marine Sciences
                            185Mathematical Sciences
                            220Natural Sciences, other
                            202Physical Sciences
                            145Cognitive Sciences
                            205Psychology
                            134Anthropology
                            156Economics
                            173International Relations
                            204Political Sciences
                            221Social Science
                            208Sociology

                             

                            OK, the above table are all the sub fields (id and name), grouped by main field (name/id of main field not showing).

                            If the user selects Social Science (last option in main), the sub-selections should be the last 6 items in the list (Anthropology through Sociology).

                             

                            I can't grasp how to get all the values at once and then manipulate via JS.

                            So I would like to try to make the onChange on main execute a find in FileMaker which would return the 6 sub options.

                            • 11. Re: Conditional value list - the CWP way
                              Fimano

                              OK, now I have made some progress:

                              New utility file, called getsubs:

                              It does a find in the table of the main fields and finds one record. This record has a related value list, which then gets displayed:

                              getsubs.php?main=15

                              displays Anthropology through Sociology,

                              and I would like to return this result to the main page, whenever the onChange event is triggered.

                              So I am "only" missing the last part.

                              Thanks.

                              • 12. Re: Conditional value list - the CWP way
                                Fimano

                                Still struggling with the syntax.

                                 

                                In the head part of my soeg.php file, I have this script:

                                 

                                <script type="text/javascript">

                                var subMsg = new Array();

                                subMsg[1] = "getsubs.php?main=1";

                                subMsg[2] = "getsubs.php?main=2";

                                subMsg[3] = "getsubs.php?main=3";

                                $(document).ready(function(){

                                $("#main_select").change(function()

                                {

                                var subMsg_index

                                subMsg_index = $("#main_select").val();

                                $("#subMsg_display").empty();

                                if (subMsg_index > 0)

                                $("#subMsg_display").append(subMsg[subMsg_index]);

                                });

                                });

                                </script>

                                 

                                Resulting in the display of the relative url as a literal string. If only I could get the result of that url, which would return the select element for the sub, that is returned correctly from getsubs.php

                                 

                                Hope this makes sense, when read in context with my above posts.

                                • 13. Re: Conditional value list - the CWP way
                                  Fimano

                                  OK, now I am about to get it...

                                   

                                  The td element next to the sub field simply gets an id attribute:

                                  <td id="subMsg_display">

                                  Then the script in the head part manages to change that html element whenever the main selection is changed.
                                  It looks like this:
                                  <script type="text/javascript">
                                  $(document).ready(function(){
                                  $("#main_select").change(function()
                                  {
                                  var subMsg_index
                                  subMsg_index = $("#main_select").val();
                                  $("#subMsg_display").empty();
                                  if (subMsg_index > 0)
                                  $("#subMsg_display").load("getsubs.php?main="+subMsg_index);
                                  });
                                  });
                                  The approach with the helper php file worked out fine; if called without parameter (query string), it indicates that no selection was made (only relevant when debugging). When called with the index number of main, the page returns the select element that goes into the td element.
                                  It took a while to work out that in JS the + sign is used to concatenate.
                                  Only missing step now is to make the form keeps its selection after it has been submitted. I have managed that before, so I should be fine.
                                  Thanks for your input.

                                  • 14. Re: Conditional value list - the CWP way
                                    kalle_samuelsson

                                    Ji Jens, how it this going for you?

                                     

                                    When it comes to dynamic valuelists on the web or even some typeahead/autocomplete functions I like to invole PHPs implementation for SQLite. It simple, superfast and requiers no installation more the the normal PHP-engine that comes with FileMaker Server.

                                     

                                    There are a million ways to create/update the SQLite database with data from FileMaker. Parhaps in your case a FileMaker Serverside Scheduled event would be the simplest...?

                                     

                                    The reason to involve SQLite is ofcourse to spare a few sessions from FileMaker Servers WPE.

                                     

                                    How is your Javascripting coming along? Did you fix it?

                                     

                                    Two things I would recommend you to take a look at is:

                                     

                                    #1: Bootstrap CSS & Javascript library. Look at the forms part and how the handle Select-elements.

                                    http://twitter.github.com/bootstrap/base-css.html#forms

                                     

                                    #2: Chosen, Jquery Plugin. A very coolt plugin to Jquery that makes select elements much more useful.

                                    http://harvesthq.github.com/chosen/

                                     

                                    When working with jquery, Callback's is everything! Understand callbacks and everthing will become so much simpler! If you still have problems with this, let me know here or on skype! See you at DevCon Scandianiva =)

                                     

                                    cheers

                                    1 of 1 people found this helpful
                                    1 2 Previous Next