Dynamically change smarty include file using Javascript

Question

I have two tabs in my smarty file. In tab1 I have a dropdown menu it contains list of cities. I have list of templates based on city it contains details about the city. in Second tab i should show the relevant city template based on the dropdown selection.

For example: Dropdown:

<select name='city' id='city' class="medium" style="float:left" onchange="setCityTpl(this);">
<option value=''></option>
{html_options options=$city_filter selected=$city.name}
</select>

If I select City 1 in dropdown menu

I should set the tpl name in the smarty include file as city1.tpl

<div id="tab2" class="tab-content" style="display: none; visibility: hidden; padding-top:0px">
{include file=city1.tpl}
</div>

if I select City 2 in dropdown menu

I should set the tpl name in the smarty include file as city2.tpl

<div id="tab2" class="tab-content" style="display: none; visibility: hidden; padding-top:0px">
{include file=city2.tpl}
</div>

Answer 1

You can load url from javascript. So I think if user selects City1 from Dropdown1, your JS will load city1.tpl and City2 will load city2.tpl

Or you can do the follow: the js script call an url ( selected-city.php ) with a POST/GET value with "city1" or "city2". The selected-city.php retrieves the selected-city.tpl with a parameter named selected (which taken from POST/GET) and your tpl:

<div id....>
{include file=${selected}.tpl}
</div ...>

Answer 2

smarty is a php-based template engine, which means that it runs on the server side , while javascript runs on the client side (the user's browser). So, before the user actually sees your page, the smarty templates have finished processing and any inclusions are already done.

To achieve what you want, one way would be to include all files and hide the respective html elements (with display:none for example). Then, based on the user's selection, you would show the elements you wish (the second drop down in your case