not getting response in success function of ajax - php

Question

hello i want to display data of business2's data according to business1's dropdown list but on change() of business1 i got data in response but how to print it in second dropdown list using id. i didn't get response in success function. How to print options of dropdown list using Id.
I got response in mozila's firefox's console but i don't know how to return it in success and then how to print in second dropdown list.
<!-- ajax code starts here -->
<script>
$(document).on('change', 'select.Business1', function(){
var business1 = $('select.Business1 option:selected').val();
alert(business1);
var value = $(this).val();
$.ajax({
type:"POST",
data: { business1:business1 },
url: '<?php echo site_url('client_area/select_business_sub_cat'); ?>',
sucess : function (data){
alert(1);
var abc = $('#business2').html(data);
}
});
});
</script>
<!-- ajax code ends here -->
Model function
public function select_business_sub_cat()
{
$business1 = $this->input->post('business1');
$result_sub_cat1 = $this->db->query("select category.id,subcategory.* From category LEFT JOIN subcategory ON category.id = subcategory.category_id where category.id = '$business1'");
$row_cat1 = $result_sub_cat1->result();
$data = array(
'id' => $row_cat1['0']->id,
'name' => $row_cat1['0']->name
);
echo "<option value='" . $row_cat1['0']->id . "'>" . $row_cat1['0']->name . "</option>";
// return $this->output->set_output($data);
}
View --
<div class="form-group">
<label>Business 1</label>
<select name="txtBusiness1" id="" style="height: 30px;width: 100%;" class="Business1">
<option value=""> Select Business </option>
<?php
$result_cat1 = $this->db->query("select * from category");
$row_cat1 = $result_cat1->result();
?>
<?php foreach($row_cat1 as $item){ ?>
<option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>Business 2</label>
<select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">
<option value=""> Select Business2 </option>
</select>

Answer 1

You have a type in your ajax call:
success : function (data) {
It's success not sucess

Answer 2

2 things may creating issue:
1) add double quotes in url
2) make it success instead of sucess
$.ajax({
type:"POST",
data: { business1:business1 },
url: '<?php echo site_url("client_area/select_business_sub_cat"); ?>', // add double quotes in url
success : function (data){ // make it success instead of sucess
alert(1);
var abc = $('#business2').html(data);
}
});

Answer 3

Change sucesss to success. You are using CI framework then use CI parameterized query, don't use static query it's hackable.
Give unique id to both div and select
It's better to follow MVC if you are use CI. Put your query in model with ci parameterized query.
<div class="form-group" id = 'divtxtBusiness1'>
<label>Business 1</label>
<select name="txtBusiness1" id="txtBusiness1" style="height: 30px;width: 100%;" class="Business1">
........
</select>
</div>
<div class="form-group" id = "div_Business_2">
<label>Business 2</label>
<select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">
<option value=""> Select Business2 </option>
</select>
</div>
<script>
//$(document).on('change', 'select.Business1', function(){
// var business1 = $('select.Business1 option:selected').val();
$(document).on('change', '#txtBusiness1', function(){
var business1 = $('#txtBusiness1').val();
//alert(business1);
//var value = $(this).val();
$.ajax({
type:"POST",
data: { business1:business1 },
url: '<?php echo site_url("client_area/select_business_sub_cat"); ?>',
success : function (data){
//alert(1);
$('#div_Business_2 #business2').remove();
$('#div_Business_2').append(data);
}
});
});
</script>
Controller :
public function select_business_sub_cat()
{
$business1 = $this->input->post('business1');
$result_sub_cat1 = $this->xyzmodel->xyzmodelfunction($business1)
$str = '<select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">';
for($i = 0 ; $i< count($result_sub_cat1) ; $i++)
{
$str .= '<option value="'.$result_sub_cat1['id'].'"> '.$result_sub_cat1['name'].' </option>';
}
$str .= '</select>';
echo $str;
// return $this->output->set_output($data);
}
Model :
don't use static query it's hackable.
class Xyzmodel extends CI_Model
{
......
public function xyzmodelfunction($business1)
{
$this->db->select(category.id,subcategory.*);
$this->db->from('category');
$this->db->join("subcategory", "category.id = subcategory.category_id", 'LEFT');
$this->db->where('category.id', $business1);
$result = $this->db->get();
return $result->result_array();
}
........
}