douyanzhou1450 2014-07-25 11:01
浏览 46
已采纳

如何在.done()ajax中的'change'事件后运行jquery?

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>&nbsp;&nbsp;';
    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

  • 写回答

2条回答 默认 最新

  • duanjiao5723 2014-07-25 12:06
    关注

    This has does not directly address the question, but I believe it has more value as an answer than as a simple comment.

    Your setup seems overly complicated and not optimal. You can greatly reduce complexity by using reusable components, such as select2 for your lists and, perhaps, implementing the Ajax search functionality or setting list's B data on list A change.

    For Ajax search, just disable the list B until something is selected in list A, and configure list B with the proper Ajax settings (i.e. URL arguments) with the selected value from list A.

    Or you can simply set list B's values from list A change event.

    What you are trying to do is something that has been done many times before, but I think your approach might not be the best way for this.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 evo评估时曲线出现问题
  • ¥15 eNSP拓扑图配置实验
  • ¥20 有没有兄弟会替换fmod studio的.bank文件内的音效?
  • ¥20 如何解决访问网址被屏蔽的情况
  • ¥15 本地运行的vue2项目,使用内网穿透,前端界面一直转圈圈
  • ¥20 powerbuilder datawindow控件导出Excel数据,可不可以不自动覆盖原数据,而是在后面新插入入数据。
  • ¥100 无轴承永磁同步电机控制
  • ¥15 eps里添加本地倾斜模型
  • ¥15 telegram 问题
  • ¥15 nrf52810-c三个a 程序