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.
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.
-- sent from my iPhone4 --
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...?
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...!
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:
- 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:
(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...
1 of 1 people found this helpful
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.
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.
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).
131 Agriculture 132 Animal Sciences 162 Fishery 163 Forestry 166 Horticulture 216 Veterinary Sciences 136 Architecture 140 Building/Construction 154 Design 215 Urban Planning 130 Accounting 141 Business Communication 218 Business/Commerce 161 Finance and Economics 168 Human Resource Management 171 International Business 179 Logistics 180 Management 184 Marketing and Sales 186 MBA 133 Animation 146 Communication 160 Film, Television and Digital Media 174 Journalism 191 Multimedia design 152 Dance 164 Graphic and Design Studies 192 Music 198 Performing Arts 201 Photography 214 Theatre/Acting 217 Visual Arts and Crafts 151 Curriculum and Education Studies 212 Teacher Education 137 Aviation and Aerospace Engineering 139 Biomedical Engineering 142 Chemical Engineering 144 Civil Engineering 157 Electrical and Electronic Engineering 158 Environmental Engineering 181 Manufacturing Engineering 182 Marine and Ocean Engineering 187 Mechanical Engineering 188 Mechatronics 193 Nanotechnology 209 Software Engineering 213 Telecommunication Engineering 167 Hospitality and Tourism 210 Sports and Recreation Management 135 Archaeology 150 Cultural Studies 165 History 219 Humanities 175 Language and Linguistics 177 Literature 189 Media Studies 200 Philosophy 207 Religious Studies 147 Computer Science 148 Computer Systems Engineering 169 Information Systems 170 Information Technology 149 Criminology 172 International Law 176 Law 153 Dental Health 190 Medicine and Health Sciences 194 Nursing 195 Nutrition and Dietics 196 Occupational Therapy 197 Optical Sciences 199 Pharmacology 203 Physiotherapy 206 Public Health 211 Sports/Excercise science 138 Biological Sciences 143 Chemical Sciences 155 Earth Sciences 159 Environmental Sciences 183 Marine Sciences 185 Mathematical Sciences 220 Natural Sciences, other 202 Physical Sciences 145 Cognitive Sciences 205 Psychology 134 Anthropology 156 Economics 173 International Relations 204 Political Sciences 221 Social Science 208 Sociology
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.
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:
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.
Still struggling with the syntax.
In the head part of my soeg.php file, I have this script:
var subMsg = new Array();
subMsg = "getsubs.php?main=1";
subMsg = "getsubs.php?main=2";
subMsg = "getsubs.php?main=3";
subMsg_index = $("#main_select").val();
if (subMsg_index > 0)
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.
OK, now I am about to get it...
The td element next to the sub field simply gets an id attribute:
1 of 1 people found this helpful
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.
Two things I would recommend you to take a look at is:
#2: Chosen, Jquery Plugin. A very coolt plugin to Jquery that makes select elements much more useful.
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 =)