从ajax响应中创建一个组合框

时间:2016-06-12 23:20:40

标签: javascript jquery ajax

所以,我有一个按钮。当我点击它时,它会通过ajax方法检索ids。在生成ids时,我正在使用另一个ajax来使用id作为参数来获取一些数据。它基本上是ajax响应中的ajax。

JS:

$("#btn_add").click(function() {
    var val_txt = $('#i_minta').find('option:selected').val().replace(/\s{2,}/g, ' ').trim();
    var val = val_txt.split("|");

    var val_no = val[0];
    var val_tgl = val[1];
    var val_kc = val[2];

    $.ajax({
        type: "POST",
        url: "<?php echo site_url('con_atk/get_minta'); ?>",
        cache: false,
        dataType: "json",
        data: {
            x: val_no /*this is the parameter to get the ID List*/
        },
        success: function(response) {
            var no = 1;
            var col_no, col_brg, col_pnh, col_mnt, col_hrg, col_tot, tableData;

            $.each(response, function(index, data) {

                var txt_harga = [];
                var select_txt = "<select id=combo_harga class='form-control'></select>";

                $.ajax({
                    type: "POST",
                    url: "<?php echo site_url('con_atk/get_harga'); ?>",
                    cache: false,
                    dataType: "json",
                    data: {
                        y: data.KodeBarang /* this is the ID to get another data */
                    },
                    success: function(outputs) {

                        $.each(outputs, function(i, value) {
                            //$('#combo_harga').append($('<option></option>').val(index).html(value.harga));
                            //txt_harga.push('<option value="'+ value.stok +'">'+ value.harga +'</option>');
                            txt_harga[i] = "<option value='" + value.stok + "'>" + value.harga + "</option>";
                        });
                        $('#combo_harga').append(txt_harga.join(''));
                    }
                });

                var rowCount = $("#t_output tbody tr").length;
                var in_kode = "<input type='hidden' id='i_kb' name='detail[" + rowCount + "][in_kb]' value='" + data.KodeBarang + "' />";
                var in_pmnh = "<input type='text' id='i_pnh' name='detail[" + rowCount + "][in_pnh]' onCopy='return false' onDrag='return false' onDrop='return false' onPaste='return false' autocomplete='off' onkeypress='return isNumber(event)' />";

                col_no = "<tr><td style='text-align:right; vertical-align:middle'>" + no++ + "</td>";
                col_brg = "<td style='text-align:left; vertical-align:middle'>" + data.KodeBarang + " " + in_kode + "<br />" + data.NamaBarang + "</td>";
                col_pnh = "<td class='mid'>" + in_pmnh + "</td>";

                col_mnt = "<td class='mid'><input type='text' id='o_pmnt' value='" + data.jumlah_minta + "' style='font-weight:bold; width:70%; text-align:right; background-color:#DE5862 !important' readonly /></td>";

                col_hrg = "<td style='text-align:right; vertical-align:middle'>" + select_txt + "</td>";
                col_tot = "<td style='text-align:right; vertical-align:middle'>xxx</td></tr>";
                tableData += col_no + col_brg + col_pnh + col_mnt + col_hrg + col_tot;

                $('#t_output tbody tr').remove();

                $('#t_output tbody').append(tableData);
            });
        }
    });
});

最终结果是一个表,每一行都有一个组合框,每个id都有一个值。像这样:

no     id      somecolumn    somecolumn        harga                                        somecolumn
1      A          xxx           xxx          value_of_A_1                                      xxx                              
2      B          xxx           xxx          value_of_B_1,value_of_B_2                         xxx
3      C          xxx           xxx          value_of_C_1,value_of_C_2,value_of_C_3            xxx

组合框应位于harga列内。

感谢您的帮助:)

1 个答案:

答案 0 :(得分:0)

希望它会成功。(这是我的旧代码。不要担心代码格式)

var as = $(this).val();                 var val = as;

            as = as.replace(/\s/g, '');
            if (this.checked) {
                var a = "_" + as;
                var viewName = { viewName: a }
                var billingFieldId = '#A' + as + '_BillingCycleId';
                var vatFieldid = '#A' + as + '_VatcalculationProcessId';
                var serviceType = '#A' + as + '_ServiceType';

               $.ajax({
                        url: '@Url.Action("GetPartialView", "Customers")',
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(viewName),
                type: 'POST',
                dataType: 'html'
            }).success(function (result) {
                $('#' + as).html(result);
                if (billningCycle != null && vatCalculation != null) {
                    $.ajax({
                        url: '@Url.Action("GetCommonValue", "Customers")',
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify(viewName),
                        type: 'POST',
                        dataType: 'json',
                        success: function (data) {
                            $.each(data.BillingCycles, function (index, value) {
                                $(billingFieldId).append($('<option />', {
                                    value: value.Id,
                                    text: value.Name
                                }));

                            });

                            $.each(data.Vats, function (index, value) {
                                $(vatFieldid).append($('<option />', {
                                    value: value.Id,
                                    text: value.Name
                                }));
                            });