[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">
<?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"' );
?>
</div>
<div class="form-row">
<?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"' );
?>
</div>
<div class="form-row">
<?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 );
?>
</div>
<input type="hidden" name="place_t" value="1" />
</fieldset>
<div class="form-row">
<div id="submit_box">
<?php
// SUBMIT BUTTON **************************************************************
$input_data = array(
'name' => 'form_submit',
'id' => 'submit_button',
'value' => 'Create Village'
);
echo form_submit($input_data);
?>
</div>
</div>
</div>
</form>
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
Quote: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.