0

I have created dynamic dependent dropdown list where I am selecting and option and sending request to the controller to fetch the data from database. I need to display the selected option name in the URL once the data will be fetched from the database. I am unable to do this and getting the same page url.

View:

<script type="text/javascript">
            $(document).ready(function(){
                /* Populate data to state dropdown */
                $('#country').on('change',function(){
                    var countryID = $(this).val();
                     var countryName=  $('#country option:selected').html();
                            //  alert(countryName);
                    if(countryID){
                        $.ajax({
                            type:'POST',
                            url:'<?php echo base_url('bank/getDistrict'); ?>/'+countryName,
                            data:'country_id='+countryID,
                            success:function(data){
                                $('#state').html('<option value="">Select District</option>'); 
                                var dataObj = jQuery.parseJSON(data);
                                if(dataObj){
                                    $(dataObj).each(function(){
                                        var option = $('<option />');
                                        option.attr('value', this.id).text(this.district_name);           
                                        $('#state').append(option);
                                    });
                                }else{
                                    $('#state').html('<option value="">District not available</option>');
                                }
                            }
                        }); 
                    }else{
                        $('#state').html('<option value="">Select state first</option>');
                        $('#city').html('<option value="">Select district first</option>'); 
                    }
                });

Controller: 

public function getDistrict(){
    $states = array();
    $country_id = $this->input->post('country_id');
    if($country_id){
        $con['conditions'] = array('state_id'=>$country_id);
        $states = $this->Bank_model->getDistrictRows($con);
    }
    echo json_encode($states);
}

Model: 

function getDistrictRows($params = array()){
    $this->db->select('s.id, s.district_name');
    $this->db->from($this->districtTbl.' as s');

    //fetch data by conditions
    if(array_key_exists("conditions",$params)){
        foreach ($params['conditions'] as $key => $value) {
            if(strpos($key,'.') !== false){
                $this->db->where($key,$value);
            }else{
                $this->db->where('s.'.$key,$value);
            }
        }
    }

    $query = $this->db->get();
    $result = ($query->num_rows() > 0)?$query->result_array():FALSE;

    //return fetched data
    return $result;
}

My current URL is: http://localhost/real_estate/bank

After the request I am still getting the same URL. It's not appending the name of the selected option. I want my URL like this: http://localhost/real_estate/bank/delhi

If I am choosing delhi from the select option

Anjali
  • 11
  • 1
  • 4
  • So you are having an issue with this line: `var countryName= $('#country option:selected').html();`? – Alex Oct 09 '18 at 17:35
  • Possible duplicate of [Get selected text from a drop-down list (select box) using jQuery](https://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery) – Alex Oct 09 '18 at 17:35
  • @Alex no ...It is just the way to store the name of selected option. var countryName is storing delhi when I am selecting. I just need to append this in the url in the end after bank – Anjali Oct 09 '18 at 17:39
  • you are already doing it here: `'/'+countryName` so the only issue must be countryName isn't receiving correctly so use `.text()` .... don't really get why you want to do this anyways as you don't seem to be using the countryname in your controller – Alex Oct 09 '18 at 17:41
  • oh wait, you want to physically change the url of the current page? then you have to redirect to that page after the option is selected with a `window.location.href = 'somecontroller'`. ajax doesn't do that; and now it really doesn't make sense as to why you are using ajax – Alex Oct 09 '18 at 17:46
  • yes I want to change the current page url. You can take the help of this site. https://bankifsccode.com/ABHYUDAYA_CO-OP_BANK_LTD . I want my url like this once we select an option – Anjali Oct 09 '18 at 17:59
  • Well then you need to redirect to that page. ajax as I've said cannot change the url of the page. You stated that once you got the data from ajax you want to change the url... your only option is to redirect to change the url. Hence ajax probably shouldn't even have been used in the first place. – Alex Oct 09 '18 at 18:18
  • Do i need to remove ajax method completely and try something else or I can redirect from here?? – Anjali Oct 09 '18 at 18:51
  • the ajax data serves no purpose as it will be gone when you redirect to the new page. you are better off using generic php to populate the selectbox – Alex Oct 09 '18 at 23:48
  • I was incorrect. Sorry. You can actually change the url (feature I wasn't aware of and still think is bad for the user) https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page/824356#824356 – Alex Oct 24 '18 at 06:06

0 Answers0