Arkona Arkona - 5 months ago 37
Javascript Question

Dependent Dropdown and Input not getting populated (Codeigniter, Ajax, jQuery)

I will try the cascading dependent select box and input in Codeigniter with Ajax. The first step works quite well. The Securities can be easily loaded, when selecting an Account. The problem starts with the second step. So, when I try after the Security-selection to set the appropriate changeable Inputs, the Security-select will getting blocked and then nothing works. Don't understand what the problem is.
Please help me, the nasty blockage to dissolve. Thanks.

Ajax:

$(document).ready(function(){
var _form = $("#trans_form").serializeArray();
$('#amount_section').hide();
$('#quantity_section').hide();
$('#accountDrop').on('change',function(){
$("#securityDrop > option").remove();
var accountID = $(this).val();
if(accountID == '#') {return false;}
$.ajax({
data: _form,
type: "POST",
url: global_base_url + "custody/get_securities_dropdown/" + accountID,
success: function(securities) {
$.each(securities,function(id,value) {
var opt = $('<option />');
opt.val(id);
opt.text(value);
$('#securityDrop').append(opt);
});
}
});
});

$('#securityDrop').on('change',function(){
$('#amount_section').hide();
$('#quantity_section').hide();
var securityID = $(this).val();
if(securityID == '#') {return false;}
$.ajax({
data: _form,
type: "POST",
url: global_base_url + "custody/get_security_unit_ajax/" + securityID,
success: function(securUnit) {
if (securUnit == "UNIT") {
$('#quantity_section').show(300);
};
else if (securUnit == "FAMT") {
$('#amount_section').show(300);
};
}
});
});


});

Controller:

public function get_securities_dropdown($account_id){
$securities = $this->custody_model->get_security_by_account($account_id);
header('Content-Type: application/x-json; charset=utf-8');
echo json_encode($securities);
}

public function get_security_unit_ajax($security_id){
$securUnit = $this->custody_model->get_security_unit($security_id);
header('Content-Type: application/x-json; charset=utf-8');
echo json_encode($securUnit);
}


Model:

public function get_accounts_dropdown(){
$accounts = $this->db->select("ID as id, Account_Desc as descr")
->order_by("descr", "ASC")
->get($this->table2)->result();
$accounts_arr;
$accounts_arr['#'] = '-- Please select Account --';
foreach ($accounts as $account) {
$accounts_arr[$account->id] = $account->descr;
}
return $accounts_arr;
}

public function get_security_by_account($account_id){
if(!is_null($account_id)){
$securities = $this->db->where("a.ID_Account", $account_id)
->select("b.ID as id, b.Security_Desc as descr")
->join($this->table5 . " as b", "b.ID = a.ID_Security")
->order_by("descr", "ASC")
->get($this->table6 . " as a");
if($securities->num_rows() > 0){
$securities_arr;
foreach ($securities->result() as $security) {
$securities_arr[$security->id] = $security->descr;
}
return $securities_arr;
}
}
return;
}


View:

<?php echo form_open_multipart(site_url("custody/add_transaction_pro"), array("id" => "trans_form")) ?>
<div>
<label for="accountDrop">Account</label>
<div>
<?php echo form_dropdown('accountDrop', $account_arr, '#', 'id="accountDrop"'); ?>
</div>
</div>
<div id="security_section">
<label for="security_select">Security</label>
<div>
<select name="securityDrop" class="required" id="securityDrop">
<option value="#">-- Please select Security --</option>
</select>
</div>
</div>
<div id="quantity_section">
<label for="quantity">Quantity</label>
<div id="quantityInput">
<input type="text" id="quantity" name="quantity">
</div>
</div>
<div id="amount_section">
<label for="settl_amount">Amount</label>
<div id="amountInput">
<input type="text" id="settl_amount" name="settl_amount">
</div>
</div>

Answer

I have solved it. The error was quite simple, the unnecessary semicolons in the ajax part. The syntax is if() { } else if{ }