Cities dropdown based on Region Select

[geo78]

Im looking for someone that can change the following code so it can bring cities only from selected region.

<?php $aRegions = Region :: newInstance()->listAll();?>
              <?php if (count($aRegions) > 0) {?>
              <select name="sRegion" id="sRegion">
                 <option value="">Choose region</option>
                 <?php foreach ($aRegions as $region) {?>
                 <option  value="<?php echo $region['s_name'];?>"><?php echo $region['s_name'];?></option>
            <?php } ?>
         </select>
         <?php } ?>
   <?php $aCities = City::newInstance()->newInstance()->listAll(); ?>
      <?php if(count($aCities) > 0 ) { ?>
         <select name="sCity" id="sCity" >
            <option value="">Choose city</option>
            <?php foreach($aCities as $City) { ?>
            <option value="<?php echo $City['s_name'] ; ?>"><?php echo $City['s_name'] ; ?></option>
                 <?php }?>
              </select>
           <?php }?>

[Gilden]

You mean you want it to be updated when you change the region, right?
It can be done changing the location_javascript function in ItemForm (it must be done with ajax).

I did it for a couple of websites, but don't have the code right here.

[geo78]

You mean you want it to be updated when you change the region, right?
It can be done changing the location_javascript function in ItemForm (it must be done with ajax).

I did it for a couple of websites, but don't have the code right here.

Im not talking about the dropdowns in user registration if thats what you ask. Im talking about the region and city dropdown in search.php and inc.search.php

[Gilden]

I think it can be done more or less the same way. You have to retrieve the cities via ajax and create a new select element with javascript.
I guess you want it to update whenever you change the region select (right?).

[geo78]

Correct 

The main problem is that i dont have ajax,javascript experience and i already spend 3 days with no success 

[Gilden]

Take a look at the function ItemForm::location_javacript, located in oc-includes/osclass/frm/Item.form.class.php; it should help you.
If you call the function in your header, it should solve your problems (I think!)

[geo78]

Take a look at the function ItemForm::location_javacript, located in oc-includes/osclass/frm/Item.form.class.php; it should help you.
If you call the function in your header, it should solve your problems (I think!)

Thanks for the information, i will have a look tonight and report back

[geo78]

I checked the Item.form.class.php and it has the code for country/region/city which means that you have to use all 3 dropdowns in search. I have only one country so its useless. Anyway i copied the code

Code: [Select]

<script type="text/javascript">
    $(document).ready(function(){
        $("#countryId").live("change",function(){
            var pk_c_code = $(this).val();
            <?php if($path=="admin") { ?>
                var url = '<?php echo osc_admin_base_url(true)."?page=ajax&action=regions&countryId="; ?>' + pk_c_code;
            <?php } else { ?>
                var url = '<?php echo osc_base_url(true)."?page=ajax&action=regions&countryId="; ?>' + pk_c_code;
            <?php }; ?>
            var result = '';

            if(pk_c_code != '') {

                $("#regionId").attr('disabled',false);
                $("#cityId").attr('disabled',true);

                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: 'json',
                    success: function(data){
                        var length = data.length;

                        if(length > 0) {

                            result += '<option value=""><?php _e("Select a region..."); ?></option>';
                            for(key in data) {
                                result += '<option value="' + data[key].pk_i_id + '">' + data[key].s_name + '</option>';
                            }

                            $("#region").before('<select name="regionId" id="regionId" ></select>');
                            $("#region").remove();

                            $("#city").before('<select name="cityId" id="cityId" ></select>');
                            $("#city").remove();

                            $("#regionId").val("");

                        } else {

                            $("#regionId").before('<input type="text" name="region" id="region" />');
                            $("#regionId").remove();

                            $("#cityId").before('<input type="text" name="city" id="city" />');
                            $("#cityId").remove();

                        }

                        $("#regionId").html(result);
                        $("#cityId").html('<option selected value=""><?php _e("Select a city..."); ?></option>');
                    }
                 });

             } else {

                 // add empty select
                 $("#region").before('<select name="regionId" id="regionId" ><option value=""><?php _e("Select a region..."); ?></option></select>');
                 $("#region").remove();

                 $("#city").before('<select name="cityId" id="cityId" ><option value=""><?php _e("Select a city..."); ?></option></select>');
                 $("#city").remove();

                 if( $("#regionId").length > 0 ){
                     $("#regionId").html('<option value=""><?php _e("Select a region..."); ?></option>');
                 } else {
                     $("#region").before('<select name="regionId" id="regionId" ><option value=""><?php _e("Select a region..."); ?></option></select>');
                     $("#region").remove();
                 }
                 if( $("#cityId").length > 0 ){
                     $("#cityId").html('<option value=""><?php _e("Select a city..."); ?></option>');
                 } else {
                     $("#city").before('<select name="cityId" id="cityId" ><option value=""><?php _e("Select a city..."); ?></option></select>');
                     $("#city").remove();
                 }
                 $("#regionId").attr('disabled',true);
                 $("#cityId").attr('disabled',true);
             }
        });

        $("#regionId").live("change",function(){
            var pk_c_code = $(this).val();
            <?php if($path=="admin") { ?>
                var url = '<?php echo osc_admin_base_url(true)."?page=ajax&action=cities&regionId="; ?>' + pk_c_code;
            <?php } else { ?>
                var url = '<?php echo osc_base_url(true)."?page=ajax&action=cities&regionId="; ?>' + pk_c_code;
            <?php }; ?>

            var result = '';

            if(pk_c_code != '') {

                $("#cityId").attr('disabled',false);
                $.ajax({
                    type: "POST",
                    url: url,
                    dataType: 'json',
                    success: function(data){
                        var length = data.length;
                        if(length > 0) {
                            result += '<option selected value=""><?php _e("Select a city..."); ?></option>';
                            for(key in data) {
                                result += '<option value="' + data[key].pk_i_id + '">' + data[key].s_name + '</option>';
                            }

                            $("#city").before('<select name="cityId" id="cityId" ></select>');
                            $("#city").remove();
                        } else {
                            result += '<option value=""><?php _e('No results') ?></option>';
                            $("#cityId").before('<input type="text" name="city" id="city" />');
                            $("#cityId").remove();
                        }
                        $("#cityId").html(result);
                    }
                 });
             } else {
                $("#cityId").attr('disabled',true);
             }
        });

        if( $("#regionId").attr('value') == "") {
            $("#cityId").attr('disabled',true);
        }

        if($("#countryId").length != 0) {
            if( $("#countryId").prop('type').match(/select-one/) ) {
                if( $("#countryId").attr('value') == "") {
                    $("#regionId").attr('disabled',true);
                }
            }
        }
in inc.search.php and also i copied 

Code: [Select]

<label for="country"><?php _e('Country', 'bcute') ; ?></label>
<?php UserForm::country_select(osc_get_countries()) ; ?>
<br />

<label for="region"><?php _e('Region', 'bcute') ; ?> *</label>
<?php UserForm::region_select(array()) ; ?>
<br />

<label for="city"><?php _e('City', 'bcute') ; ?> *</label>
<?php UserForm::city_select(array()) ; ?>
<br />
from required fields plugin in inc.search.php.

Now i have to select first country (useless) then region and then it shows only cities from region but when i press search the values of region and city are not included in the search criteria.

[Gilden]

You can remove the javascript code for the country and replace the country select with a hidden input with your country's value

[lucky_strike]

What theme did u use? Chechk twitter theme . It has what u need!

[geo78]

What theme did u use? Chechk twitter theme . It has what u need!

Where are region and city dropdowns in http://demo.osclass.org/general/?theme=twitter?

[geo78]

I dont know if this will work

Code: [Select]

<script>
 $("#sRegion").live('change',function(){
    var pk_c_code = $(this).val();
   
    if(pk_c_code != '') {
 
  removeAllOptions(document.forma.sCity);
    addOption(document.forma.sCity, "", "Select", "");
 
    <?php
        $q55=mysql_query("SELECT %st_city.s_name AS onoma1, %st_city.s_name AS onoma2 FROM %st_city, %st_region WHERE %st_region.pk_i_id = %st_city.fk_i_region_id AND %st_region.s_name = 'pk_c_code' ORDER BY %st_city.s_name ASC"); 
        echo mysql_error();
        while($nt55=mysql_fetch_array($q55)){
                     echo "addOption(document.forma.sCity,'$nt55[onoma1]', '$nt55[onoma2]');";
 
            } // end of while loop
    ?>
}


               
            else {
                $("#sCity").attr('disabled',true);
              }
       

       document.write(pk_c_code);
   
    });
</script>

[lucky_strike]

item-post.php .

[cartagena68]

Hi,
i have something similar what you are looking for in this site http://olsexn.com/
but the problem is that is highly personalized (i have only category, state and city) and i'm using "select 2" script.

The javascript you post is ok, but you need to change the form in order to work with the javascript.

[geo78]

Hi,
i have something similar what you are looking for in this site http://olsexn.com/
but the problem is that is highly personalized (i have only category, state and city) and i'm using "select 2" script.

The javascript you post is ok, but you need to change the form in order to work with the javascript.

Yes your site is a great example. 

Btw your city is not reset if you change region. You have to select again city

Do you have in mind any good tutorial for the select 2 script?

Also the script i posted needs db connection