Cascading dropdown list in Codeigniter not working

Question

In one of my View, i have a modal popup containing 2 dropdown lists (ddlPublications & ddlEditions).On page load, ddlPublications will be populated while ddlEditions will remain empty.However, ddlEditions will be populated on the onchange event of ddlPublications.

View

<div class="modal-body" style="height: 100%;">
    <div class="col-md-12">
        <div class="form-group">
            <label>Publication</label>
            <select id="ddlPublication" name="ddlPublication" class="form-control" onchange="load_editions(this.value)">
                <option value="0">--select--</option>
                <?php
                    foreach ($pub_data as $key => $pdata) {
                ?>
                    <option value="<?php echo $pdata['pub_id'];?>"> <?php echo $pdata['pub_title'];?> </option>
                <?php
                    }
                ?>
            </select>
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group">
            <label>Edition</label>
            <div id="edn_div_data">
                <select id="ddlEdition" name="ddlEdition" class="form-control">
                    <option value="0">--Select--</option>
                </select>
            </div>
        </div>
    </div>
</div>

<script>
    function load_editions(pub_id){
        alert(pub_id);
        var p_id = pub_id;
        $.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>pmachine/pages/get_editions/"+pub_id,
            dataType: 'json',
            success: function(result){
                $("#edn_div_data").html(result);
            },
            error: function(result) {
                $("#edn_div_data").html("Sorry, something went wrong");
            }
        });
    }
</script>

CONTROLLER

public function get_editions($pubid)
{
    $data['edn_data'] = $this->Process_pages_model->pop_editions($pubid);
    echo json_encode($data);
}

Problem

ddlEditions is not getting populated.It shows the message 'Sorry, something went wrong'.Please suggest what's wrong with my code.

Whats your http response code? – Kisaragi Jul 12 '17 at 20:16 — Kisaragi, Jul 12 '17 at 20:16
What do you see in developers console? – u_mulder Jul 12 '17 at 20:24 — u_mulder, Jul 12 '17 at 20:24

score 0 · Answer 1 · answered Jul 12 '17 at 20:26

try to change your ajax pist function and your controller like this:

$data['edn_data'] = $this-> Process_pages_model->pop_editions($_POST['pubid']);

Ajax call

     $.ajax({
         type: "POST",
         url: "<?php echo base_url(); ?>pmachine/pages/get_editions/" 
         data: {pubid: pub_id},
         dataType: "json",  
         cache:false,
            success: function(result){
                $("#edn_div_data").html(result);
            },
            error: function(result) {
                $("#edn_div_data").html("Sorry, something went wrong");
            }
        });

score 0 · Accepted Answer · answered Jul 12 '17 at 20:53

It's hard to tell what the issue could be here because I see several places it could be failing. First of all, make sure you have debugging on. You can use the built in profiler https://www.codeigniter.com/userguide3/general/profiling.html or I believe you can use xdebug with a little manual setup. Now let's debug.

Start by replacing url in your ajax request with an actual url. So replace

<?php echo base_url(); ?>pmachine/pages/get_editions/ with the actual url, something like

localhost/pmachine/pages/get_editions/
Try creating a simple ajax example to make sure you have a good handle on it. Here is a question about basic php/ajax examples that you can use for reference:

Basic PHP and AJAX
Try echoing $data['edn_data'] rather than just $data.
Echo a string rather than $data to make sure you're even getting a response.
print_r($this-> Process_pages_model->pop_editions($_POST['pubid'])); to make sure you're getting the info from the database. If you're not getting anything, make sure you're connecting to your database with a basic connection test:
```
// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";
```
print_r($_POST['pubid']); to make sure you're getting your post data
Try returning the data without encoding it as JSON and remove the dataType:json from your ajax request.

score 0 · Answer 3 · answered Jul 13 '17 at 05:21

Your ajax success function replace the whole 'edn_div_data', which I doubt you rebuild the DOM within the result.

Try to console.log the result, and assume the result is:

{"edn_data":[{"edn_id":"1","edn_title":"Edition 1"},{"edn_id":"2","edn_title":"Edition 2"},{"edn_id":"3","edn_title":"Edition 3"}]}

and replace your ajax success function become like:

success: function(result){
    for (var i = 0; i <= result.edn_data.length - 1; i++) {
        $("#ddlEdition").append("<option value='"+result.edn_data[i].edn_id+"'>"+result.edn_data[i].edn_title+"</option>");
    }
},

Cascading dropdown list in Codeigniter not working

View

CONTROLLER

Problem

3 Answers3