title: jQuery AJAX not Working to Update City By Province
body: <p>As the title may suggest, I have been using jQuery AJAX to try and pull a list of Cities from a database when a Province is selected.</p>
  
  <p>I am using the following code:</p>
  
  <pre><code>$('#province').change(function()
  {
      var province = $(this).val();
  
      /*$.get("&lt;?php echo site_url('cottage/cities'); ?&gt;?province="+province, function(data) 
      {
          console.log(data);
          for (i=0;i&lt;=data.length;i++)
          {
              //$('#citydiv').append(data['city']+'&lt;br/&gt;');
              //$('#city').append('&lt;option value="'+data[i]['city']+'"&gt;'+data[i]['city']+'&lt;/option&gt;');
          }
      }); */
      $.ajax({
      url: "&lt;?php echo site_url('cottage/cities'); ?&gt;?province="+province,
      method: 'GET',
      dataType: 'json',
      success: onDataReceived
      }); 
      function onDataReceived(series) 
  {
      console.log(series);
  
  }   
  });
  </code></pre>
  
  <p>And I also have a Province and City drop down associated with them.
  The problem is that I keep getting "undefined" returned, as it doesn't like the way my data is sent.</p>
  
  <p>The data looks like:</p>
  
  <pre><code>[{"city_id":"1107","city":"Young's Point","province":"Ontario","lat":"44.490345","lon":"-78.236008"},{"city_id":"1108","city":"Zurich","province":"Ontario","lat":"43.421185","lon":"-81.624832"}]
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>