Cascading dropdown list in Codeigniter not working - php

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.

Answer 1

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.

Answer 2

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

Answer 3

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