Search - Select City based on Region - With OSClass 3.5

[Foxi]

Hi,

There are quite some solution for selecting City based on Region (State) for the main page Search .
For me am not able to solve with those solution coz it is quite old one of 2013..
Am not very expert on coding ... and still learning.. Please help the code is below for both header & for the function.

am using #osclasswizards theme.

For Header.php

Code: [Select]


              <div class="col-md-3">
                <div class="cell selector">
                 
                  <?php osclasswizards_regions_select('sRegion', 'sRegion', __('Select a region', 'osclasswizards')) ; ?>
                 
                <>
              <>


              <div class="col-md-3">
                <div class="cell selector">

                  <?php osclasswizards_cities_select('sCity', null, __('Select a city', 'osclasswizards')) ; ?>
     
                <>
              <>



Function.php

Code: [Select]


/**
* select regions
*
*/

function osclasswizards_regions_select($name, $id, $label)
{
   $aRegions = Region::newInstance()->listAll();
   if(count($aRegions) > 0 ) {
      $html  = '<select name="'.$name.'" id="'.$id.'">';
      $html .= '<option value="">'.$label.'</option>';
      foreach($aRegions as $region) {
         $html .= '<option value="'. $region['s_name'].'">'. $region['s_name'].'</option>';
      }
      $html .= '</select>';
   }

   echo $html;
}

/**
* select cities
*
*/

function osclasswizards_cities_select($name, $id, $label)
{
   $html  = '<select name="'.$name.'" id="'.$id.'">';
   $html .= '<option value="">'.$label.'</option>';
   if(osc_count_list_cities() > 0 ) {
      while(osc_has_list_cities()) {
         $html .= '<option value="'. osc_list_city_name().'">'. osc_list_city_name().'</option>';
      }
   }
   $html .= '</select>';

   echo $html;
}

Thanks in advance for the support

[fre2mansur]

Paste this function on your function.php

Code: [Select]

function location(){
$aRegions = Region::newInstance()->listAll();
                 if(count($aRegions) >= 0 ) { ?>
             
                <select id="regionId" name="sRegion" class="form-control">
                    <option value=""><?php _e("Select a region..."); ?></option>
                    <?php foreach($aRegions as $region) { ?>
                    <option id="idregioni"  value="<?php echo $region['pk_i_id']; ?>"<?php if(Params::getParam('sRegion') == $region['pk_i_id']) { ?>selected<?php } ?>><?php echo $region['s_name']; ?></option>
                    <?php } ?>
                </select>
               
                <?php } ?>
                 <br />
                 
                <?php $aCities = City::newInstance()->getByRegion($cityId);
if (count($aCities) >= 0 ) {?>
               
                <select name="sCity" id="cityId" class="form-control">
                    <option value=""><?php _e("Select a city..."); ?></option>
                    <?php foreach($aCities as $city) { ?>     
                    <option value="<?php echo $city['pk_i_id']; ?>"<?php if(Params::getParam('sCity') == $city['pk_i_id']) { ?>selected<?php } ?>><?php echo $city['s_name'] ; ?></option>
                    <?php } ?>
                </select>
             
                <?php } ?>
   


<script>
$(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 class="form-control" name="regionId" id="regionId" ></select>');
$("#region").remove();

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

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

} else {

$("#regionId").before('<input class="form-control" placeholder="<?php _e("Enter region..."); ?>"type="text" name="region" id="region" />');
$("#regionId").remove();

$("#cityId").before('<input class="form-control" placeholder="<?php _e("Enter city..."); ?>" 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" class="form-control" id="regionId" ><option value=""><?php _e("Select a region..."); ?></option></select>');
$("#region").remove();

$("#city").before('<select name="cityId" class="form-control" 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" class="form-control" 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" class="form-control" 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 class="form-control" 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($("#countryIds").length != 0) {
if( $("#countryIds").attr('type').match(/select-one/) ) {
if( $("#countryIds").attr('value') == "")  {
$("#regionId").attr('disabled',true);
}
}
}
});
</script>
<?php } ?>

then paste this code on whare you want

Code: [Select]

<?php echo location();?>

[Foxi]

Hello fre2mansur

Thanks for the reply.

Looks a '}' was missing at closing of function (Above the script starts).
But when I use this code with and without '}' it is not working, Not even loading the page ! 

Is there any other way by passing the selected 'Region' to City search ?

Thanks once again...

[fre2mansur]

that is working code can you show me your site?

[Foxi]

Hi,
The site is not up. Am still customizing the site.
The attached screen is with Region (State) - I have disabled city field temporarily .

What I did was copied your code & pasted in function.php and copied <?php echo location();?>  this in header.php insted of region function call as in below code..

Is that correct ?

[fre2mansur]

yes. you got any errors?

[itcafeonline]

City does not come up. Select any Region, But City Just Show as "Select you city"

[Foxi]

GET
http://adTestpage.co/ [HTTP/1.0 500 Internal Server Error 11ms]

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

This is the error with above code suggested ..

[Foxi]

Hello @fre2mansur.

Actually your code works in another way..
I Copied  below code in Header.php without the script & is working
Do we need this long script ?
In Firefox while page loading I noticed the region & City field height became more for small time (may be 1 sec).. any idea ?

Code: [Select]

              <div class="col-md-2">
                <div class="cell selector">
                <?php $aRegions = Region::newInstance()->listAll();
                 if(count($aRegions) >= 0 ) { ?>
                  <select id="regionId" name="sRegion" class="form-control">
                      <option value=""><?php _e("Select a State..."); ?></option>
                      <?php foreach($aRegions as $region) { ?>
                      <option id="idregioni"  value="<?php echo $region['pk_i_id']; ?>"<?php if(Params::getParam('sRegion') == $region['pk_i_id']) { ?>selected<?php } ?>><?php echo $region['s_name']; ?></option>
                      <?php } ?>
                  </select>           
                <?php } ?>       
                </div>
              </div>


              <div class="col-md-2">
                <div class="cell selector">               
                <?php $aCities = City::newInstance()->getByRegion($cityId);
                  if (count($aCities) >= 0 ) {?> 
                    <select name="sCity" id="cityId" class="form-control">
                        <option value=""><?php _e("Select a city..."); ?></option>
                        <?php foreach($aCities as $city) { ?>     
                        <option value="<?php echo $city['pk_i_id']; ?>"<?php if(Params::getParam('sCity') == $city['pk_i_id']) { ?>selected<?php } ?>><?php echo $city['s_name'] ; ?></option>
                        <?php } ?>
                    </select>         
                <?php } ?>
                </div>
              </div>

[cartagena68]

Try this code, the city field is hidden until you select the region

Code: [Select]

<script>
$("#sRegion").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 != '') {
$("#sCity").show();
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: 'json',
                    success: function(data){
                        var length = data.length;
                        if(length > 0) {
                            result  = '<option selected value=""><?php _e('Select a city...', 'cartagena'); ?></option>';
                            for(key in data) {
                                result  = '<option value="'   data[key].pk_i_id   '">'   data[key].s_name   '</option>';
                            }
                            $("#city").before('<select name="sRegion" id="sRegion" ></select>');
                            $("#city").remove();
                        } else {
                            result  = '<option value=""><?php _e('No results', 'cartagena') ?></option>';
                            $("#sCity").before('<input type="text" name="region" id="region" />');
                            $("#sCity").remove();
                        }
                        $("#sCity").html(result);
                    }
                 });
             } else {
               $("#sCity").hide();
             }
        });
        if( $("#sRegion").attr('value') == "")  {
$("#sCity").hide();
        } 
 </script>
<div class="col-md-2">
                <div class="cell selector">
                <?php $aRegions = Region::newInstance()->listAll();
                 if(count($aRegions) >= 0 ) { ?>
                  <select id="sRegion" name="sRegion" class="form-control">
                      <option value=""><?php _e("Select a State..."); ?></option>
                      <?php foreach($aRegions as $region) { ?>
                      <option value="<?php echo $region['pk_i_id']; ?>"><?php echo $region['s_name']; ?></option>
                      <?php } ?>
                  </select>           
                <?php } ?>       
                </div>
              </div>
              <div class="col-md-2">
                <div class="cell selector">               
                <select name="sCity" id="sCity" class="form-control">
                       </select>
                </div>
              </div>

[Foxi]

Thanaks @cartagena68

The City field is empty even after selecting Region.

But do we need those script  ?.. As I mentioned before it works fine now .. only in firefox the the height of the field is double the height for a split second while loading the page.

[itcafeonline]

Hints please?

[Foxi]

The below code works for me.
may be the theme is taking care of the scrips which I have not inserted in my header.php file.

Code: [Select]


              <div class="col-md-2">
                <div class="cell selector">
                <?php $aRegions = Region::newInstance()->listAll();
                 if(count($aRegions) >= 0 ) { ?>
                  <select id="regionId" name="sRegion" class="form-control">
                      <option value=""><?php _e("Select a State..."); ?></option>
                      <?php foreach($aRegions as $region) { ?>
                      <option id="idregioni"  value="<?php echo $region['pk_i_id']; ?>"<?php if(Params::getParam('sRegion') == $region['pk_i_id']) { ?>selected<?php } ?>><?php echo $region['s_name']; ?></option>
                      <?php } ?>
                  </select>           
                <?php } ?>       
                </div>
              </div>


              <div class="col-md-2">
                <div class="cell selector">               
                <?php $aCities = City::newInstance()->getByRegion($cityId);
                  if (count($aCities) >= 0 ) {?> 
                    <select name="sCity" id="cityId" class="form-control">
                        <option value=""><?php _e("Select a city..."); ?></option>
                        <?php foreach($aCities as $city) { ?>     
                        <option value="<?php echo $city['pk_i_id']; ?>"<?php if(Params::getParam('sCity') == $city['pk_i_id']) { ?>selected<?php } ?>><?php echo $city['s_name'] ; ?></option>
                        <?php } ?>
                    </select>         
                <?php } ?>
                </div>
              </div>


[itcafeonline]

@Foxi --- You are using OSClassWizard theme? Does not seem to work in bender thou

[damansingh]

Hi,

Your above code did work for me. Now when I select state, only then it shows City depending on the state I selected. However, it has changed the formatting of the box too. Attaching a screenshot.

Also, need to sort States.

Any help on above two issues?