CODEWITHSUNDEEP
phpajaxcodeigniter
Cronas De Se
Cronas De Se

Reputation: 331

AJAX not displaying result

I'm trying to populate a dropdown from the values of another dropdown so here is my ajax code.

$(document).ready(function() {
    $('#category').change(function () {
    var category = $('#category :selected').val(); // <-- change this line
    console.log(category);
    $.ajax({
        type: "POST",
        url: "<?php echo base_url('Ajax_test_controller/populateSubcategory'); ?>",
        data: category,
        dataType: 'json',
        success: function(data) {
            console.log(data);
            $(data).each(function(){
                $("#subcategory").append($('<option>', {
                    value: this.id,
                    text: this.subcategory,
                }));
            })
        },
        error: function(errorw) {
            alert("hi");
        }
        });
    });
});

This is my controller

public function populateSubcategory(){
    $category_id = $this->input->post('category');
    $data = $this->ajax_test_model->getSubCategory($category_id);
    echo json_encode($data);        
}

This is my model

function getSubCategory($category_id){
    $this->db->select('id, subcategory');
    $this->db->from('subcategory');
    $this->db->where('category_id', $category_id);
    $this->db->order_by("subcategory", "asc");
    $query = $this->db->get();
    return $query->result();
}

This is my view

<div>
    <div class="form-group">
        <label class="control-label">Category : </label>
            <select name="category" id="category">
                <option value="0">Select Category</option>
                <?php
                    if(is_array($category) || is_object($category)){
                        foreach($category as $category_row){
                            echo '<option value="'. $category_row->id .'">'. $category_row->category .'</option>';
                        }
                    }

                ?>
            </select>
        <label class="control-label">Subcategory : </label>
        <select name="subcategory" id="subcategory">

        </select>
    </div>
</div>

I don't know if there is a mistake on my syntax but whenever I try to change my model to

function getSubCategory($category_id){
    $cat = 1;
    $this->db->select('id, subcategory');
    $this->db->from('subcategory');
    $this->db->where('category_id', $cat);
    $this->db->order_by("subcategory", "asc");
    $query = $this->db->get();
    return $query->result();
}

I get the results that I want with this model. But this is just to check if I am getting anything from my query.

My guess is that the category_id is not passed to my model. But when I checked the value of category_id, it is equal to 1.

And I don't see any problem. Thanks for the inputs on how to solve this problem. Thanks.

Upvotes: 0

Views: 255

Answers (1)

adarshdec23
adarshdec23

Reputation: 231

From the JQuery docs, while using POST

The data option can contain either a query string of the form key1=value1&key2=value2, or an object of the form {key1: 'value1', key2: 'value2'}. If the latter form is used, the data is converted into a query string using jQuery.param() before it is sent. This processing can be circumvented by setting processData to false. The processing might be undesirable if you wish to send an XML object to the server; in this case, change the contentType option from application/x-www-form-urlencoded to a more appropriate MIME type.

In your Ajax request try this: 

    var category = $('#category :selected').val();

...
...
    type: "POST",
    url: "<?php echo base_url('Ajax_test_controller/populateSubcategory'); ?>",
    data: {
    category:category
    },
    //dataType: 'json' No real reason to use JSON here

Upvotes: 1

Related Questions