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.

[eluser]Prashanth[/eluser]
Controller: controllers/administration.php

Code:

public function create_place( $type = '' )
{
  // Make sure an admin or manager is logged in. (showing how to log in by group)
  if( $this->require_group('employees') )
  {
   // Load resources
   $this->load->library('csrf');
  
   $view_data['roles'] = $this->authentication->roles;

   if( ! empty( $type ) )
   {
    // Get level associated with type (role)
    $view_data['level'] = $this->authentication->levels['manager'];
    $view_data['type'] = $type;

    // Confirm the type of user is permitted
    if( $this->auth_level < $view_data['level'] )
    {
     die();
    }

    // Check if a valid form submission has been made
    if( $this->csrf->token_match )
    {
     // Create the user
     $this->load->model('place_model');
     $this->place_model->create_place( $type );
    }
    
    if($type != 'district')
    {
     $this->load->model('place_model');
     $view_data['dist'] = $this->place_model->get_places(3);
     if( $this->csrf->token_match )
     {
      if( $this->input->post('place_d') )
      {
       $view_data['taluks'] = $this->place_model->get_taluks_in_dist();
      }
     }
    
    }
    
    // Load the appropriate place creation form
    
   $view_data['place_creation_form'] = $this->load->view( 'administration/create_place/create_' . $type, ( isset( $view_data ) ) ? $view_data : '', TRUE );
   }
  
   $data = array(
   'javascripts' => array(
      'js/auto_populate/auto-populate-place.js'
     ),
    'content' => $this->load->view( 'administration/create_place', ( isset( $view_data ) ) ? $view_data : '', TRUE ),
   );
  
  

   $this->load->view( $this->template, $data );

  }

}

Model: models/place_model.php

Code:

public function get_places($var)
{
  $query = $this->db->select('place_id,name')
   ->where('place_type',$var)
   ->order_by('name')
   ->get( config_item('place_table') );

  if( $query->num_rows() > 0 )
  {
   return $query->result();
  }

  return FALSE;
}

public function get_taluks_in_dist()
{
  $dist = $this->input->post('place_d');

  $this->db->select('place_id,name');

  $this->db->where('parent_id',$dist );

  $query = $this->db->get( config_item('place_table') );

  if( $query->num_rows() > 0 )
  {
   return $query->result_array();
  }

  return FALSE;
}

Another View: views/administration/create_place.php

Code:

echo '<h1>' . ( isset( $type ) ? ucfirst( $type ) . ' Creation' : 'Place Creation' ) . '</h1>';

if( isset( $validation_passed, $place_created ) )
{
echo '
  <div class="feedback confirmation">
   <p class="feedback_header">
    The new ' . $type . ' has been successfully created.
   </p>
  </div>
';
}
else if( isset( $validation_errors ) )
{
echo '
  <div class="feedback error_message">
   <p class="feedback_header">
    ' . ucfirst( $type ) . ' Creation Contained The Following Errors:
   </p>
   <ul>
    ' . $validation_errors . '
   </ul>
   <p>
    ' . strtoupper( $type ) . ' NOT CREATED
   </p>
  </div>
';
}

if( isset( $level, $type ) )
{
echo $place_creation_form;
}
else
{
echo '
  <p>Please choose a place type to create:</p>
  <ul class="std-list">
';

/*foreach( $roles as $k => $v )
{
  if( $k < $auth_level )
  { */
   echo '<li>' . secure_anchor( 'administration/create_place/district', 'district' ) . '</li>';
   echo '<li>' . secure_anchor( 'administration/create_place/taluk', 'taluk' ) . '</li>';
   echo '<li>' . secure_anchor( 'administration/create_place/village', 'village' ) . '</li>';
  /*}
}*/

echo '</ul>';
}

[eluser]TheFuzzy0ne[/eluser]
Try using Firebug with Firefox. It will allow you to see what's been sent from the server, so you can find your problem. I suspect your PHP might be showing an error, which should be present in the returned data from the server.