ループを続ける前にボタンクリックイベントを待ちます。

Question

各オプションの横にボタンが付いたポップアップモーダルにオプションを追加するコードループがあります。

検索ループで、検索で複数の項目が返される場合は、モーダルを表示し、ユーザーが選択する部分を選択する必要があります。

私はループを一時停止し、ユーザーがアイテムを選択するのを待ってから、続行します。

MY LOOP

$.each(rows, function (index, item) { 
    SearchItems(item.split('\t')[0], item.split('\t')[1]); 
}); 

検索項目FUNCTION

function SearchItems(searchedPart, quantity) { 

    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "OrderFormServices.asmx/GetItemInfoAdmin", 
     data: "{'itemname':'" + searchedPart + "','quantity':'" + (quantity || 1) + "', 'guid':'" + custGuid + "' }", 
     dataType: "json", 
     success: function (result) { 

      result = result.d; 

      if (result.length > 1) { 

       var htmlString = ""; 
       $.each(result, function(index, item) { 
        item.PartNumber = (item.PartNumber != "") ? item.PartNumber : item.ItemName; 
        htmlString += "<tr><td>" 
         + "<input type=\"hidden\" name=\"ItemID\" value=\"" + item.ItemID + "\">" 
         + "<input type=\"hidden\" name=\"ItemCode\" value=\"" + item.ItemCode + "\">" 
         + "<input type=\"hidden\" name=\"Price\" value=\"" + item.Price + "\">" 
         + "<input type=\"hidden\" name=\"Quantity\" value=\"" + item.Quantity + "\">" 
         + "<input type=\"hidden\" name=\"CustomerReference\" value=\"" + searchedPart + "\">" 
         + "<input type=\"hidden\" name=\"PackQuantity\" value=\"" + item.PackQuantity + "\">" 
         + "<input type=\"hidden\" name=\"FreeStock\" value=\"" + item.FreeStock + "\">" 
         + item.PartNumber + "</td><td>" 
         + item.ManufacturerName + "</td><td>" 
         + item.ItemName + "</td><td>" 
         + item.ItemDescription + "</td><td><input type='button' name=\"selectPopup\" onclick=\"ChoosePopup($(this).closest('tr'));\" class='btn btn-primary btn-xs' value='Select'></td></tr>"; 
       }); 
       $("#tbodyPopupContent").html(htmlString); 
       $("#PopUpNormalProduct").modal(); 
       modalfix(); 
       $("#divPopupWindow").parent("").addClass("quicksearchpopup"); 

////////////////////////////////////////////////////////////////////////// 
//////////////// WAIT FOR BUTTON CLICK AND PERFORM CODE/////////////////// 
////////////////////////////////////////////////////////////////////////// 

       $("#partNumber").prop("disabled", false); 

      } else if (result.length < 1) { 
       $("#partNumber").prop("disabled", false); 
       $('#partNumber').focus(); 
      } 
      else { 
       /////// 
      } 
     } 
    }); 
} 

ポップアップ項目ボタンChoosePopup()機能を発射。

function ChoosePopup(row) { 

    var $hidden_fields = row.find("input:hidden"); 
    var $tds = row.find("td"); 

    var newItem = { 
     ItemID: parseFloat($hidden_fields.eq(0).val()), 
     ItemCode: $hidden_fields.eq(1).val(), 
     ItemDescription: $tds.eq(3).text(), 
     ItemName: $tds.eq(2).text(), 
     Price: parseFloat($hidden_fields.eq(2).val()), 
     Quantity: parseFloat($hidden_fields.eq(3).val()), 
     CustomerReference: $hidden_fields.eq(4).val(), 
     PackQuantity: parseFloat($hidden_fields.eq(5).val()), 
     FreeStock: parseFloat($hidden_fields.eq(6).val()) 
    }; 

    AddNewRow(newItem, true); 
    $("#PopUpNormalProduct").modal("hide"); 
} 

どのようにしてループを続行する前に、完了するために、このChoosePopup()機能を待つことができますか？

Answer 1

私はあなたが問題に近づいていることを再考すべきだと思います。コールバックを使用してChoosePopup関数を起動して、ユーザーの入力に基づいて残りの作業を行う必要があります。

行配列をSearchItems関数に渡すと、行の残りの項目を反復処理するようにコールバックを設定できます。

重複したコードを必要としない例です。

const items = [1, 2, 3, 4, 5] 
 

 
//main function which writes buttons from an array 
 
function makeButtons(array) { 
 
    //copy the array so we can keep track of which items are left to process after click event 
 
    var unProcItems = array.slice() 
 
    $.each(array, function(index, item) { 
 

 
    var exit = false 
 
     //remove the item from the processed array 
 
    unProcItems.splice(unProcItems.indexOf(item), 1) 
 

 
    //make our button 
 
    var button = document.createElement('button') 
 
    button.innerHTML = `Button ${item}` 
 

 
    //if something then hook up a click event with callback 
 
    if (item == 3) { 
 
     button.onclick = function(event) { 
 
     //call our makeButtons function in the callback passing in the unprocessed items array 
 
     makeButtons(unProcItems) 
 

 
     //remove the click event so it can't be fired again 
 
     event.target.onclick = null 
 
     } 
 
     exit = true 
 
    } 
 
    document.getElementById('content').append(button) 
 

 
    //exit the loop if our flag was set 
 
    if (exit) 
 
     return false; 
 

 
    }) 
 
} 
 

 
makeButtons(items);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 

 
</div>

Answer 2

グローバル変数を定義し、ポップアップが要求する内容に基づいて、残りのコードをChoosePopup（）関数に移動します。