Dependent selection parent, child, child of child

[Maverick]

Hi guys,

I am trying to make a dependent selection for list of cities (dependent on country and continent. So first you select the continent, then country and the city which redirects you to the city page

What I have in my processwire

Mainsitename

-------Continent

------------Europe

------------------France

-------------------------Paris

-------------------------Marseille

------------North America

------------------USA

-------------------------New York

-------------------------Boston

------------Asia

------------------Thailand

-------------------------Bangkok

-------------------------Hat Yai

 

I used so far this ajax plugin to make it all "chained"

http://www.appelsiini.net/projects/chained

In the template where I have the selection menu this is the code I'm using:

<div class="form-group" >

<select class="form-control" id="continent" name="continent">
  <option value="">Continent</option>
 <option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="Asia">Asia</option>

</select>
<select class="form-control" id="country" name="country">
  <option value="">Country</option>
<option value="France" class="Europe">France</option>
<option value="USA" class="North America">USA</option>
<option value="Thailand" class="Asia">Thailand</option>
</select>
<select class="form-control" id="city">
  <option value="">City</option>
 <?php 
 
$root = $pages->get("/continent/europe/france/"); $children = $root->children(); foreach($children as $child) { echo "<option value='{$child->url}' class='france'>{$child->title}</option value>"; }; 
$root = $pages->get("/continent/europe/usa/"); $children = $root->children(); foreach($children as $child) { echo "<option value='{$child->url}' class='usa'>{$child->title}</option value>"; };
$root = $pages->get("/continent/europe/thailand/"); $children = $root->children(); foreach($children as $child) { echo "<option value='{$child->url}' class='thailand'>{$child->title}</option value>"; };

?>
</select>
</div>

And it works all right, I can select the continent, then a country and then one of the available city of this country and it redirects me to the city page for example /continent/france/paris

However, my concern is that if the lists gets bigger, this approach will make the site slow (not sure though), my question is, what would be a better approach to achieve this? or should this be ok?

 

[horst]

Don't know how often the data will change, but it would be a possible solution to cache your template markup and rebuild it on storing new data. This would ommit the code execution everytime, without the first request after new data was stored.

[Maverick]

Thanks for the suggestion

Would this be something like this, just read about the markupcache in another thread:

$cache = $modules->get("MarkupCache"); 

if(!$data = $cache->get("france_options")) { foreach($pages->find("parent=/continent/europe/france/") as $france) { $data .= "<option value='{$france->url}' class='france'>{$france->title}</option>";} $cache->save($data);} echo $data;
if(!$data = $cache->get("usa_options")) { foreach($pages->find("parent=/continent/north-america/usa/") as $usa) { $data .= "<option value='{$usa->url}' class='1usa'>{$usa->title}</option>";} $cache->save($data);} echo $data;

and so on for every country...

Yesterday I was trying to run this chained selection with 193 countries holding about 300 cities (without markupcache), the page was loading 7/8 seconds

So far, I realize my approach is very much inefficient (php/processwire newbie)

The last selection seem to be the biggest "bottleneck" since I echo all possible country options (cities) at once, so that explains the high load time I believe

Not sure how it's possible to render the right cities at the right time (only the cities that are child of a specific parent who has been selected in the second selection step).