prototype.js question

[jj0914]

currently i am building a website that has a province/state drop down list, how this list work is that when I select canada/USA, this province/state list show up with proper province or state in the list, if i choose other country, nothing the list is hidden. In order to use it, javascript has to be enabled.

Right now I am trying to get this work without javascript enabled, i heard that i can use prototype.js to make it happen, but i am not familiar with this framework, can anyone give me help. i post the code below:

<script type="text/javascript" src="[% c.uri_for("/static/js/prototype.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/effects.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/controls.js") %]"></script>

<script type="text/javascript">
function countryChosen (country) {
country = $(country);
var subcountries = document.getElementsByClassName('subcountry');
for (i = 0; i < subcountries.length; i++) {
Element.hide(subcountries);
subcountries.getElementsByTagName("select")[0].disabled = true;
}
var subcountry = $("country_"+country.value+"_subcountries");
if (subcountry) {
Element.show(subcountry);
subcountryChosen(subcountry);
subcountry.getElementsByTagName("select")[0].disabled = false;
}
else {
subcountryChosen(null);
}
}

function subcountryChosen (subcountry) {
subcountry = $(subcountry);
}

Event.observe( window, 'load',
function () {
Event.observe( 'country', 'click', function () { countryChosen('country'); } );
Event.observe( 'country', 'keypress', function () { countryChosen('country'); } );
countryChosen( 'country' );
}
);

</script>


<div class="country" style="">
<label for="country">[% loc('Country') %] :</label>
<select name ="country" id= "country">
<option value="[% loc('') %]"></option>
[%
FOREACH country IN countries
%]
<option value="[% country.country_id %]"> [% country.name %]</option>
[%
END
%]
</select>
</div>


[%-CALL countries.reset; %]
[% FOREACH country IN countries %]
[% IF( subcountries = country.subcountries(lang = c.language) ); %]
<div class="subcountry" style="display: none; float: none;" id="country_[% country.country_id %]_subcountries">
<br>
<label for="subcountry">[% loc('Province/State') %]
[% FOREACH category IN country.sub_country_categories %]
[% category %]
[% UNLESS loop.last ; %]/ [% END %]
[% END %] :
</label>
<select onclick="subcountryChosen(this);" name="subcountry">
<option value=""></option>
[%
FOREACH subcountry IN subcountries
%]
<option value = "[% subcountry.subcountry_id | html %]"> [% subcountry.name | html %]</option>
[%
END
%]
</select>
</div>
[% END %]
[% END %]



Thank you

 

[kaht]

Prototype is nothing more than a javascript framework. That said, if javascript is disabled I don't see how prototype is going to alleviate that, considering it's powered by javascript....

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[jj0914]

Hi kaht

I guess I wasn't explain well, if i turn off my javascript, i want to be able to see the "Province/State" list, because right now, if JS is turned off, I can't see the list. Is there way to do that? Thank you

 

[kaht]

Not with javascript. If you turn javascript off, nothing you write in javascript will work, no exceptions. Prototype is a javascript framework, and for that reason when javascript is disabled prototype is disabled as well.

The only way to have a dynamic list like that with javascript disabled is to put a little refresh button down by the dropdown and have them click that to reload the page when the option in the dropdown is changed.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[jj0914]

but in the previous version of my app, it has two list: province list and state list, these two can be shown even when I disable the javascript. I think that's what I want with mine "province/state list"

 

[jj0914]

if you go to

http://www.nald.ca/guestbook/guestbook.htm

you will know what I am talking about, the province list and state list are shown even without javascript enabled.
that's what i am looking for in my app for "province/state list

 

[monksnake]

It's just hardcoded in there.

<.