2016-06-12 8 views
0

私はボタンを持っています。私がクリックすると、ajaxメソッドでidsを取得します。 idsが生成されている間、別のajaxを使用してIDのパラメータとしてデータを取得しています。それは基本的にAjaxレスポンスの中の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列内にある必要があります。

はあなたの助けをありがとう:)

+0

問題の可能性のある重複:http://stackoverflow.com/questions/5918144/how-can-i-use-json-data-to-populate-the-options-of-a-select-boxもしそうでなければ、それは良い出発点です。 jsonからPHPページの戻り値として値を分割したいと思うでしょう。 –

+0

まあ、今私はデータを得た。しかし、それは私が望むもののようではありません。私は私の完全なajaxとjqueryを投稿すべきですか?それはかなり複雑ですが。 – Vahn

+0

これは、最小、完全、および検証可能なサンプル要件を満たします。 –

答えて

0

は、それは成功はあなたを願っています。(それは私の古いコードです。コードのフォーマットについては心配しないでください)

VAR .val $(this)を(=など) ; 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 
           })); 
          }); 
+0

まあ、私のコードです。私はすでにデータを持っています。最初のドロップダウンとその値が結合されている場合にのみ表示されます。私が期待したのは、パラメータに基づいて各値をドロップダウンすることです。とにかくありがとう – Vahn