Bhavin
Bhavin

Reputation: 2158

not getting response in success function of ajax

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>                        

Upvotes: 0

Views: 951

Answers (3)

Deep Hakani
Deep Hakani

Reputation: 198

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();
    }
    ........
}

Upvotes: 1

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

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);
              }
});

Upvotes: 1

Mivaweb
Mivaweb

Reputation: 5712

You have a type in your ajax call:

success : function (data) {

It's success not sucess

Upvotes: 3

Related Questions