Community Auth : jQuery auto-populate drop down menu HTTP Error: 200

[eluser]Prashanth[/eluser]
Hello everybody,

Am trying to clone the auto-populate example available in the Community Auth authentication system.

Based on selecting an option in one of the drop-down menu, the contents of the next drop-down menu is to be loaded.

Table : places

Code:

place_id | place_type | parent_id | name
1 | 3 | 0 | Bangalore Urban
2 | 3 | 0 | Bangalore Rural
3 | 3 | 0 | Mysore
4 | 3 | 0 | Tumkur
5 | 2 | 1 | KR Puram
6 | 2 | 2 | Nelamangala

place_id is the primary key, auto increment

View:
views/administration/create_user/create_village.php

Code:

<?php echo form_open( '', array( 'class' => 'std-form', 'style' => 'margin-top:24px;' ) ); ?>
<div class="form-column-left">
  <fieldset>
   <legend>Village Information:</legend>
  
   <div class="form-row">

    &lt;?php
     // DISTRICT NAME LABEL AND INPUT ***********************************
     echo form_label('District Name','place_d',array('class'=>'form_label'));

     echo input_requirement('*');

     // Default option
     $dist_types[''] = '-- Select --';

     // Options from query
     //print_r($place);
    
     foreach( $dist as $row )
     {
      $dist_types[$row->place_id] = $row->name;
     }

     echo form_dropdown( 'place_d', $dist_types, set_value('place_d'), 'id="place_d" class="form_select"' );

    ?&gt;

   </div>
   <div class="form-row">

    &lt;?php
     // TALUK LABEL AND INPUT ***********************************
     echo form_label('Taluk Name','place_p',array('class'=>'form_label'));

     echo input_requirement('*');

     // If POST, there may be taluks
     if( isset( $taluks ) )
     {
      // Default option
      $dist_taluks[] = '-- Select --';

      // Options from query
      foreach( $taluks as $row )
      {
       $dist_taluks[$row['place_id']] = $row['name'];
      }
     }
     else
     {
      // Default option if not POST request
      $dist_taluks[] = '-- Select Taluk --';
     }

     echo form_dropdown( 'place_p', $dist_taluks, set_value('place_p'), 'id="place_p" class="form_select"' );

    ?&gt;

   </div>
   <div class="form-row">

    &lt;?php
     // Village Name LABEL AND INPUT ***********************************
     echo form_label('Village Name','place_name',array('class'=>'form_label'));

     echo input_requirement('*');

     $input_data = array(
      'name'  => 'place_name',
      'id'  => 'place_name',
      'class'  => 'form_input',
      'value'  => set_value('place_name'),
      'maxlength' => '50',
     );

     echo form_input( $input_data );

    ?&gt;  
   </div>
  
   &lt;input type="hidden" name="place_t" value="1" /&gt;
  </fieldset>
  <div class="form-row">
   <div id="submit_box">

    &lt;?php
     // SUBMIT BUTTON **************************************************************
     $input_data = array(
      'name'  => 'form_submit',
      'id'  => 'submit_button',
      'value'  => 'Create Village'
     );
     echo form_submit($input_data);
    ?&gt;

   </div>
  </div>
</div>
&lt;/form&gt;

JS File
auto-populate-place.js

Code:

/*
/*
* Community Auth - auto-populate.js
* @ requires jQuery
*
* Copyright (c) 2011 - 2013, Robert B Gottier. (http://brianswebdesign.com/)
*
* Licensed under the BSD licence:
* http://http://www.opensource.org/licenses/BSD-3-Clause
*/
$(document).ready(function(){

// Whenever one of the form dropdowns is changed
$('#place_d').change(function(){
  // When type is changed, reset make
  if( $(this).attr('id') == 'place_d' ){
   $('#place_p option').attr('selected', false);
  }
  // Get the CI CSRF token name
  ci_csrf_token_name = $('#ci_csrf_token_name').val();
  // Set post vars
  var post_vars = {
   'place_d':  $('#place_d option:selected').val(),
   'token': $('input[name="token"]').val()
  };
  post_vars[ci_csrf_token_name] = $('input[name="' + ci_csrf_token_name + '"]').val();
  // POST
  $.ajax({
   type: 'post',
   cache: false,
   url: $('#ajax_url').val(),
   data: post_vars,
   dataType: 'json',
   success: function(response, textStatus, jqXHR){
    if(response.status == 'success'){
     // Update the dropdowns and tokens
     $('#place_p').html(response.place_p);
     $('input[name="token"]').val(response.token);
     $('input[name="' + ci_csrf_token_name + '"]').val( response.ci_csrf_token );
    }else{
     alert(response.message);
    }
   },
   error: function(jqXHR, textStatus, errorThrown){
    alert('Error: Server Connectivity Error.\nHTTP Error: ' + jqXHR.status + ' ' + errorThrown);
   }
  });
});

});

when I change the drop-down selection of place_d in the views, jQuery gives an error

Error: Server Connectivity Error.
HTTP Error: 200 SyntaxError: JSON.parse: unexpected character

Have spent hours on this finding no solution. Please help.

Thanks in advance.