I'm using PHP Codeigniter, jQuery 2.0.3.
I have a form contains text boxes, and html table. Two of the columns in the html table are casaded dropdown.
The cascaded dropdown, let's say, dropdown A and dropdown B, by default the dropdown A will list out 10 options, it is an item category. While dropdown B list out nothing. When A is changed, B will populate some option related to the dropdown A (its category), and it's done in
$(document).on("change","select[name^='ast_group']",function()
below.
When I choose a value from checkbox and click a button on that page, it will run a JS function that draw data from MySQL via ajax and put it in my form > input element, and also the HTML table. (But the database only have a value of dropdown B, not dropdown A).
The first JS function run is dialog_purchase_request_pull_data(data_purchase_request); The ajax request inside this function then call JS function insert_detail(result) upon its success.
Inside the insert_detail function, a for loop call another function add_row(tableID,data_ajax); Inside this add_row function I call ajax to get the value of dropdown A.
I get the value of dropdown A already, but I miss something so that I can't put it directly. On this line:
$("#ast_group"+name_cnt).val(obj[0].group_parent_id).change();
I have changed the option of dropdown A, and trigger 'change' event so that dropdown B will populate the related options.
This is where I can't find where to put : $("#ast_sub_group"+name_cnt).val(data_ajax.item_group);
So that it will update the dropdown B option after 'change' event has been triggered.
This is my JS:
<script>
//populate sub group if group changed
$(document).ready(function(){
$(document).on("change","select[name^='ast_group']",function(){
var name_str = $(this).attr('id');
var name_len = name_str.length;
var name_cnt = name_str.substring(name_len-1,name_len);
$.ajax({
url:"../asset/ajax_get_sub_group/"+$(this).val(),
success: function(result){
var detail_result = JSON.parse(result);
$("select[id^='ast_sub_group"+name_cnt+"']").find('option').remove();
$("select[id^='ast_sub_group"+name_cnt+"']").append("<option value='-1'>Select..</option>");
for (var i =0; i <detail_result.length;i++){
$("select[id^='ast_sub_group"+name_cnt+"']").append("<option value='"+detail_result[i].group_id+"'>"+detail_result[i].group_name+"</option>");
}
}
});
});
});
</script>
<script>
function add_row(tableID,data_ajax){
var name_str = $('#'+tableID+' > tbody > tr:last > td:eq(1) select').attr('id');
if(typeof(name_str)=="undefined"){
name_str = "ast_group0";
}
var name_len = name_str.length;
var name_cnt = parseInt(name_str.substring("ast_group".length,name_len)) + 1;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
//select init
var ast_group = '<?php echo sw_CreateSelect('ast_group',$ddl_asset_group,'group_id','group_name',NULL,array('initialvalue'=>'-1','initialdisplay'=>'Select..'));?>';
var ast_group_buffer = $(ast_group);ast_group_buffer.attr('name','ast_group[]');ast_group_buffer.attr('id','ast_group'+name_cnt);
var ast_sub_group = '<?php echo sw_CreateSelect('ast_sub_group',$ddl_asset_sub_group,'group_id','group_name',NULL,array('initialvalue'=>'-1','initialdisplay'=>'Select..'));?>';
var ast_sub_group_buffer = $(ast_sub_group);ast_sub_group_buffer.attr('name','ast_sub_group[]');ast_sub_group_buffer.attr('id','ast_sub_group'+name_cnt);
var del_link = '<i class="fa fa-ban del_row"></i> ';
var newRow =
"<tr height='30px'>"+
"<td align='center'>"+del_link+"<span>"+rowCount+"</span>"+"</td>"+
"<td>"+ast_group_buffer.get(0).outerHTML+"</td>"+
"<td>"+ast_sub_group_buffer.get(0).outerHTML+"</td>"+
"<td><input type='text' name='ast_name[]' id='ast_name"+name_cnt+"' class='form-control' value='"+data_ajax.item_name+"'></td>"+
"<td><input type='number' name='ast_qty[]' id='ast_qty"+name_cnt+"' class='form-control' value='"+data_ajax.item_qty+"'></td>"+
"<td><input type='text' name='ast_price[]' id='ast_price"+name_cnt+"' class='form-control' value='"+data_ajax.item_price+"'></td>"+
"<td><input type='text' name='sub_total[]' id='sub_total"+name_cnt+"' class='form-control' value='"+data_ajax.item_total+"'readonly></td>"+
"</tr>";
//select option
if($('#'+tableID+' > tbody > tr').length == 0){
$('#'+tableID+' > tbody ').append(newRow);
}else{
$('#'+tableID+' > tbody > tr:last').after(newRow);
}
var ajax_result = [];
$.ajax({
url:"<?php echo base_url('asset/ajax_get_parent_group');?>",
data: {ajax_group_id:data_ajax.item_group},
dataType: "json"/*,
success: function(result){
//return result;
//alert(result[0].group_parent_id);
//$("#ast_group"+name_cnt).val(result[0].group_parent_id).change();
}*/
}).done(function (obj){
alert('group change');
$("#ast_group"+name_cnt).val(obj[0].group_parent_id).change();
$("#ast_sub_group"+name_cnt).val(data_ajax.item_group);
/*}).done(function (obj){
alert('wait group change for sub group');
$("#ast_sub_group"+name_cnt).val(data_ajax.item_group);*/
});
}
function dialog_purchase_request_pull_data(data_purchase_request){
$("#doc_ref").val(data_purchase_request['doc_num']);
$("#request_for").val(data_purchase_request['request_for']);
$("#request_dept").val(data_purchase_request['request_dept']);
$("#doc_note").val(data_purchase_request['doc_note']);
var doc_id = data_purchase_request['doc_id'];
var data_ajax_raw = $.ajax({
url:"<?php echo base_url('purchase/ajax_purchase_request');?>",
data: {purreq:doc_id},
dataType: "json",
success: function(result){
insert_detail(result);
}
});
}
function insert_detail(data){
var tbl = document.getElementById("table_detail");
var tbl_lastrow = tbl.rows.length -1;
document.getElementById("table_detail").deleteRow(tbl_lastrow); //delete last row
var data_ajax = Object();
for (var datum in data){
data_ajax.item_name = data[datum].item_name;
data_ajax.item_qty = data[datum].item_qty;
data_ajax.item_price = data[datum].item_price;
data_ajax.item_total = data[datum].item_total;
data_ajax.item_group = data[datum].item_group;
add_row('table_detail',data_ajax);
}
/*$("#ast_group1").val(1).change();
$("#ast_sub_group1").val(24);
$("#ast_group2").val(4).change();
$("#ast_sub_group2").val(101);*/
addRow("table_detail"); //add empty row
}
</script>
I appreciate your help. Thanks. JMS
