Advertisement:

Author Topic: Cities dropdown based on Region Select  (Read 34454 times)

geo78

  • Full Member
  • ***
  • Posts: 100
Cities dropdown based on Region Select
« on: April 01, 2013, 01:04:19 am »
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

  • Sr. Member
  • ****
  • Posts: 464
  • Availability: 30%
Re: Cities dropdown based on Region Select
« Reply #1 on: April 01, 2013, 01:09:28 am »
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

  • Full Member
  • ***
  • Posts: 100
Re: Cities dropdown based on Region Select
« Reply #2 on: April 01, 2013, 01:16:13 am »
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

  • Sr. Member
  • ****
  • Posts: 464
  • Availability: 30%
Re: Cities dropdown based on Region Select
« Reply #3 on: April 01, 2013, 01:18:09 am »
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

  • Full Member
  • ***
  • Posts: 100
Re: Cities dropdown based on Region Select
« Reply #4 on: April 01, 2013, 01:52:01 am »
Correct  ;D

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

Gilden

  • Sr. Member
  • ****
  • Posts: 464
  • Availability: 30%
Re: Cities dropdown based on Region Select
« Reply #5 on: April 01, 2013, 08:11:30 pm »
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

  • Full Member
  • ***
  • Posts: 100
Re: Cities dropdown based on Region Select
« Reply #6 on: April 01, 2013, 09:14:52 pm »
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

  • Full Member
  • ***
  • Posts: 100
Re: Cities dropdown based on Region Select
« Reply #7 on: April 02, 2013, 04:42:40 am »
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

  • Sr. Member
  • ****
  • Posts: 464
  • Availability: 30%
Re: Cities dropdown based on Region Select
« Reply #8 on: April 02, 2013, 05:19:43 pm »
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

  • Guest
Re: Cities dropdown based on Region Select
« Reply #9 on: April 02, 2013, 06:13:01 pm »
What theme did u use? Chechk twitter theme . It has what u need!

geo78

  • Full Member
  • ***
  • Posts: 100
Re: Cities dropdown based on Region Select
« Reply #10 on: April 02, 2013, 06:16:02 pm »
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

  • Full Member
  • ***
  • Posts: 100
Re: Cities dropdown based on Region Select
« Reply #11 on: April 02, 2013, 09:07:20 pm »
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

  • Guest
Re: Cities dropdown based on Region Select
« Reply #12 on: April 02, 2013, 09:46:23 pm »
item-post.php .
« Last Edit: April 02, 2013, 09:48:34 pm by lucky_strike »

cartagena68

  • issues
  • Hero Member
  • *
  • Posts: 1175
Re: Cities dropdown based on Region Select
« Reply #13 on: April 02, 2013, 10:17:24 pm »
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

  • Full Member
  • ***
  • Posts: 100
Re: Cities dropdown based on Region Select
« Reply #14 on: April 03, 2013, 12:09:36 am »
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.  ;D

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  :-\