2017-01-19 13 views
0

私はAddMoreDrugsToBillingメソッドを使用して動的に選択ボックスを作成しています。また、selectboxのonclickイベントでshowDrugsを呼び出すことで、オプションを設定します。問題は、selectboxをselect2(検索可能なselectボックス)にすると、selectボックスのonclickイベントが呼び出されなくなり、値がselectボックスにロードされないということです。動的に作成されたselectboxをselect2として作成し、値を入力する方法は?select2とバインディング値を使用して動的に作成された選択ボックス

$(document).ready(function() { 
    debugger; 
    $(".selectDrugs").select2(); 
}) 

$(function() {    
     getDrugs();    
     AddMoreDrugsToBilling();    
}); 

function AddMoreDrugsToBilling() { 
     //debugger;    
    if ($("#tbl_Drugs tbody").length > 0) { 
     $("<tr id=" + tblDrugsCount + "><td><select class='selectDrugs' width='250px' id='txt_Drugs" + (tblDrugsCount) + "' onchange='onChangeDrugText(this," + tblDrugsCount + ");' onclick='showDrugs(" + tblDrugsCount + ");' /></td><td><select id='txt_Batches" + (tblDrugsCount) + "' onchange='onChangeBatchText(this," + tblDrugsCount + ");' /></td><td><label id='lbl_ExpiryDate" + (tblDrugsCount) + "' /></td><td><label id='lbl_UnitPrice" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_AvlQty" + (tblDrugsCount) + "' type='text'/></td><td><input class='form-control input-100px' onkeyup='CheckMaxQuantity(" + (tblDrugsCount) + ");' id='txt_Qty" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_Amount" + (tblDrugsCount) + "' ></label></td><td><img src='../Images/delete.gif' id='img_delete" + (tblDrugsCount) + "' title='Delete' onclick='DeleteDrugItemrow(this);'/></td></tr>").appendTo("#tbl_Drugs tbody"); 
    } 
    else { 
     $("<tbody><tr id=" + tblDrugsCount + "><td><select class='selectDrugs' width='250px' id='txt_Drugs" + (tblDrugsCount) + "' onchange='onChangeDrugText(this," + tblDrugsCount + ");' onclick='showDrugs(" + tblDrugsCount + ");' /></td><td><select id='txt_Batches" + (tblDrugsCount) + "' onchange='onChangeBatchText(this," + tblDrugsCount + ");' /></td><td><label id='lbl_ExpiryDate" + (tblDrugsCount) + "' /></td><td><label id='lbl_UnitPrice" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_AvlQty" + (tblDrugsCount) + "' type='text'/></td><td><input class='form-control input-100px' onkeyup='CheckMaxQuantity(" + (tblDrugsCount) + ");' id='txt_Qty" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_Amount" + (tblDrugsCount) + "' ></label></td> <td><img src='../Images/delete.gif' id='img_delete" + (tblDrugsCount) + "' title='Delete' onclick='DeleteDrugItemrow(this);'/></td></tr></tbody>").appendTo("#tbl_Drugs"); 
    }    
    tblDrugsCount++;    
} 

var drugsData = []; 
    function getDrugs() { 
     // debugger; 

     jQuery.ajax({ 
      type: 'POST', 
      contentType: 'application/json;charset=utf-8', 
      data: {}, 
      url: 'NewPharmacyOrder.aspx/FillDrugs', 
      success: function(data) { 
       //debugger; 
       var resultDrugItems = data.d; 
       for (i = 0; i < resultDrugItems.length; i++) { 
        var item1 = resultDrugItems[i]; 
        drugsData.push({ "DrugName": item1.DrugName, "DrugId": item1.DrugId}); 
       } 
      } 
     });   

    } 

function showDrugs(id) { 
     debugger; 

     var txtDrugsList = $("#txt_Drugs" + id); 

     var txtDrugsListCtrl = document.getElementById("txt_Drugs" + id); 
     //alert(txtDrugsListCtrl.length); 
     if (txtDrugsListCtrl.length == 0) { 
      //if ($(txtDrugsList).length == 1) { 
      //   if($("#txt_Drugs"+id) option).length) 
      txtDrugsList.empty(); 
      $("#txt_Drugs" + id).get(0).options[0] = new Option("select drug", "-1"); 

      $.each(drugsData, function(index, item) { 
       // debugger; 
       var option1 = new Option(item.DrugName, item.DrugId); 
       //option1.setAttribute('data-availablebatches', item.AvailableBatches); 
       txtDrugsList.append(option1); 
      }); 
      // } 
     } 

    } 

答えて

0

これを試してみてください;)

あなたはgetDrugs();呼び出しがデータを引っ張ってくると、ここにあなたが非同期的に送信されたAJAX要求を作っているので、制御が起きていないAddMoreDrugsToBilling();に行くことを考えています。

  • Async:False =コードを一時停止しました。 (他のコードはこれを完了するためにを待つです)。
  • Async:True =コード続きです。 (何も一時停止していないされます。他のコードは、を待っているではありません。)

このような単純な。

$(function(){ 
    debugger; 
    $(".selectDrugs").select2(); 
    getDrugs(); 
}); 

function AddMoreDrugsToBilling(){ 
    //debugger;    
    if($("#tbl_Drugs tbody").length > 0){ 
    $("<tr id=" + tblDrugsCount + "><td><select class='selectDrugs' width='250px' id='txt_Drugs" + (tblDrugsCount) + "' onchange='onChangeDrugText(this," + tblDrugsCount + ");' onclick='showDrugs(" + tblDrugsCount + ");' /></td><td><select id='txt_Batches" + (tblDrugsCount) + "' onchange='onChangeBatchText(this," + tblDrugsCount + ");' /></td><td><label id='lbl_ExpiryDate" + (tblDrugsCount) + "' /></td><td><label id='lbl_UnitPrice" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_AvlQty" + (tblDrugsCount) + "' type='text'/></td><td><input class='form-control input-100px' onkeyup='CheckMaxQuantity(" + (tblDrugsCount) + ");' id='txt_Qty" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_Amount" + (tblDrugsCount) + "' ></label></td><td><img src='../Images/delete.gif' id='img_delete" + (tblDrugsCount) + "' title='Delete' onclick='DeleteDrugItemrow(this);'/></td></tr>").appendTo("#tbl_Drugs tbody"); 
    }else{ 
    $("<tbody><tr id=" + tblDrugsCount + "><td><select class='selectDrugs' width='250px' id='txt_Drugs" + (tblDrugsCount) + "' onchange='onChangeDrugText(this," + tblDrugsCount + ");' onclick='showDrugs(" + tblDrugsCount + ");' /></td><td><select id='txt_Batches" + (tblDrugsCount) + "' onchange='onChangeBatchText(this," + tblDrugsCount + ");' /></td><td><label id='lbl_ExpiryDate" + (tblDrugsCount) + "' /></td><td><label id='lbl_UnitPrice" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_AvlQty" + (tblDrugsCount) + "' type='text'/></td><td><input class='form-control input-100px' onkeyup='CheckMaxQuantity(" + (tblDrugsCount) + ");' id='txt_Qty" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_Amount" + (tblDrugsCount) + "' ></label></td> <td><img src='../Images/delete.gif' id='img_delete" + (tblDrugsCount) + "' title='Delete' onclick='DeleteDrugItemrow(this);'/></td></tr></tbody>").appendTo("#tbl_Drugs"); 
    } 
    tblDrugsCount++; 
} 

var drugsData = []; 
function getDrugs(){ 
    // debugger; 
    jQuery.ajax({ 
    type: 'POST', 
    contentType: 'application/json;charset=utf-8', 
    data: {}, 
    url: 'NewPharmacyOrder.aspx/FillDrugs', 
    success: function(data){ 
     //debugger; 
     var resultDrugItems = data.d; 
     for(i = 0; i < resultDrugItems.length; i++){ 
     var item1 = resultDrugItems[i]; 
     drugsData.push({"DrugName": item1.DrugName, 
      "DrugId": item1.DrugId}); 
     } 
     AddMoreDrugsToBilling(); /* here you can call this to appened data */ 
    } 
    }); 
} 

function showDrugs(id){ 
    debugger; 

    var txtDrugsList = $("#txt_Drugs" + id); 
    var txtDrugsListCtrl = document.getElementById("txt_Drugs" + id); 
    //alert(txtDrugsListCtrl.length); 
    if(txtDrugsListCtrl.length == 0){ 
    //if ($(txtDrugsList).length == 1) { 
    //   if($("#txt_Drugs"+id) option).length) 
    txtDrugsList.empty(); 
    $("#txt_Drugs" + id).get(0).options[0] = new Option("select drug", "-1"); 

    $.each(drugsData, function(index, item){ 
     // debugger; 
     var option1 = new Option(item.DrugName, item.DrugId); 
     //option1.setAttribute('data-availablebatches', item.AvailableBatches); 
     txtDrugsList.append(option1); 
    }); 
    // } 
    } 
} 

だから以下getDrugs();

後のデータは、あなたは、単にそれを呼び出すのではなく、successコールバックへの関数呼び出しAddMoreDrugsToBilling();を移動することができます読み込まれていることを確認するには、更新されたコードです