title: codeigniter dropdown with ajax and jquery console returns "NetworkError: 404 Not Found via firebug console
body: <p>Please help a loafer. Am trying to populate a dropdown that is dependent on the first. The first is for state, when it is changed, the city should be populated. I have followed various tutorials online(some from stakeoverflow) and am stuck. I have very little knowledge of ajax and jquery. On top of that, am new to codeigniter. Below are my codes</p>
  
  <p>Model for state</p>
  
  <pre><code>public function get_list(){
  
      $this-&gt;db-&gt;from($this-&gt;table);
      $result = $this-&gt;db-&gt;get();
      $return = array();
      if($result-&gt;num_rows() &gt; 0) {
          foreach($result-&gt;result_array() as $row) {
              $return[$row['sid']] = $row['state'];
          }
      }
  
      return $return;
  
  }
  </code></pre>
  
  <p>Model for city</p>
  
  <pre><code>public function get_cities($state = null){
  
           $this-&gt;db-&gt;select('ctid, city');
  
           if($state != NULL){
              $this-&gt;db-&gt;where('state_id', $state);
           }
  
               $query = $this-&gt;db-&gt;get($this-&gt;table);
  
               $cities = array();
  
           if($query-&gt;result()){
               foreach ($query-&gt;result() as $cit) {
               $cities[$cit-&gt;ctid] = $cit-&gt;city;
           }
              return $cities;
           }else{
              return FALSE;
           }
  }
  </code></pre>
  
  <p>My controller</p>
  
  <pre><code>public function index()
  {
  
      $data['state_option'] = $this-&gt;State_model-&gt;get_list();
      $this-&gt;load-&gt;view('_parts/header');
      $this-&gt;load-&gt;view('index', $data);
      $this-&gt;load-&gt;view('_parts/footer');
  }
  public function dependent_dropdown($state)
  {
  
       header('Content-Type: application/x-json; charset=utf-8');
       echo(json_encode($this-&gt;city_model-&gt;get_cities($state)));
  }
  </code></pre>
  
  <p>my jquery/ajax</p>
  
  <pre><code>$(document).ready(function(){
        $('#state').change(function(){
          // $("#city").html("&lt;option&gt;Loading...&lt;/option&gt;");
          $('#city &gt; option').remove();
          var state = $('#state').val();
          if (state != "") {
            $.ajax({
              type: "POST",
              data:'state',
              url: "&lt;?php echo site_url('site/dependent_dropdown'); ?&gt;"+state,
              success: function(data){
              $.each(data, function(i, data){
              $('#city').append("&lt;option value='"+data.city+"'&gt;"+data.city+"&lt;/option&gt;");
                });
               }
  
            });
        }
        else{
          $('#city').html('&lt;option&gt;--Select City--&lt;/option&gt;');
        }
        });
     });
  </code></pre>
  
  <p>my view (state dropdown)</p>
  
  <pre><code>&lt;select id="state" name="state" class="form-control" required&gt;
                  &lt;option value="" selected&gt;--Select State--&lt;/option&gt;
          &lt;?php foreach ($state_option as $state) { ?&gt;
            &lt;option value="&lt;?php echo $state ?&gt;"&gt;&lt;?php echo $state; ?&gt;&lt;/option&gt;
          &lt;?php } ?&gt;
              &lt;/select&gt;
  </code></pre>
  
  <p>(city dropdown)</p>
  
  <pre><code>&lt;select id="city" name="city" class="form-control" required&gt;
                          &lt;option value="" selected&gt;--Select City--&lt;/option&gt;
  
                &lt;/select&gt;
  </code></pre>