將foreach數據傳入模態

Question

我有一個顯示數據的foreach。每個項目都具有在線和離線狀態。與ajax我讓用戶激活和停用使用：

$active = '<a id="status'.$restaurant->restaurant_id.'" class="btn btn-bricky" href="#" onclick="return changeRestStatus(\''.$restaurant->restaurant_id.'\',\'changeActive\');"><i id="status'.$restaurant->restaurant_id.'icon" class="fa fa-times fa fa-white"></i></a>'; 

這是一個按鈕，觸發一個Javascript方法。在這種方法中有一個Ajax調用（我有shortend代碼：

的Javascript：

function changeRestStatus(restaurantID,type) { 
    if (type == 'changeActive') { 

     //ChangeStatus 
     $.post("adminAjaxFile.php", 
     { 
      'restaurantID':restaurantID, 
      'action':type 
     }, 
     function(response){ 
      if(response == "activated"){ 

       //change the button... 
       $("#status"+ restaurantID).removeClass('btn-bricky'); 
      $("#status"+ restaurantID).addClass('btn-green'); 
       $("#status"+ restaurantID +"icon").removeClass('fa fa-times fa fa-white'); 
      $("#status"+ restaurantID +"icon").addClass('glyphicon glyphicon-ok-sign'); 
       return false; 

      } 
      if(response == "deactivated"){ 

       //change the button... 
       $("#status"+ restaurantID).removeClass('btn-green'); 
      $("#status"+ restaurantID).addClass('btn-bricky'); 
       $("#status"+ restaurantID +"icon").removeClass('glyphicon glyphicon-ok-sign'); 
      $("#status"+ restaurantID +"icon").addClass('fa fa-times fa fa-white'); 

       return false; 

      } 
      else if (response == "noaccess") { 
       //show error 
       return false; 

      } 
      else { 
       alert(response); 
       return false; 
      } 
     }); 
     return false; 
    } 

} 

一切運作良好，但是，現在我需要一些文本輸入單擊此按鈕之前（執行調用）

所以現在我想打開一個輸入字段模式的鏈接。在此之後被填充它發送數據到同樣的方法（如$活躍VAR），但是與包含輸入一個額外的參數。

但我不知道如何解決這個問題，我可以把模態我對於每一行，每一行都有一個新的模式用適當的數據創建，但這看起來很垃圾。

因此，如何製作打開模式並將這些變量發送到此模式的按鈕，以便我可以進一步將其發送到ChangeRestStatus方法。

（使用一些模板進行模態IM ..其自舉發）在這裏，它是：

<!-- MODAL --> 
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
      &times; 
     </button> 
     <h4 class="modal-title">Responsive</h4> 
    </div> 
    <div class="modal-body"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <h4>Some Input</h4> 
       <p> 
        <input class="form-control" type="text"> 
       </p> 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" data-dismiss="modal" class="btn btn-light-grey"> 
      Cancel 
     </button> 
     <button type="button" class="btn btn-blue"> 
      OK 
     </button> 
    </div> 
</div> 
<!-- END: MODAL --> 

<!-- Link that triggers modal --> 
<a href="#responsive" data-toggle="modal" class="demo btn btn-blue"> 
    Open modal 
</a> 

編輯：

所以最好的辦法是增加：$（ '＃響應' ）.modal（）;進入該方法。問題是，我需要它從模態獲得輸入，當用戶單擊確定，然後採取數據，並進一步與該方法。

Answer 1

嗯，我得到它的工作，不知道它是一個很好的解決方案，但它的工作原理。

• 添加了if if語句來檢查按鈕是否具有某個類。如果它有一個綠色類，那麼需要一個帶有文本輸入的模式。否則不需要模態。這裏是代碼（反饋將是很好）
• 當需要模態，那裏有一個檢查，如果提交被點擊

實際的代碼要大得多，但大多是看的東西點擊功能。所以我刪除了..只是爲了顯示解決方案

//CHANGE ONLINE OFFLINE 
    function changeOnlineStatus(restaurantID,type) { 

    if (type == 'changeOnlineGetInput') { 
     //Check if status is online -> Modal (reason) needed 
     if ($("#statusOnlineOffline"+ restaurantID).hasClass('btn-green')) { 
      //Modal 
      $('#responsive').modal(); 
      $('#confirmOnline').click(function (e) { 
      e.preventDefault(); 

        //AJAX START 
        var type = 'changeOnline'; 
        var reason = $('#reason').val(); 
        $.post("adminAjaxFile.php", 
        { 
         'reason':reason, 
         'restaurantID':restaurantID, 
         'action':type 
        }, 
        function(response){ 
         if(response == "online"){ 

          //change the button... 
          $("#statusOnlineOffline"+ restaurantID).removeClass('btn-bricky'); 
         $("#statusOnlineOffline"+ restaurantID).addClass('btn-green'); 
          $("#statusOnlineOffline"+ restaurantID +"icon").removeClass('fa fa-times fa fa-white'); 
         $("#statusOnlineOffline"+ restaurantID +"icon").addClass('glyphicon glyphicon-ok-sign'); 
          return false; 

         } 
         if(response == "offline"){ 

          //change the button... 
          $("#statusOnlineOffline"+ restaurantID).removeClass('btn-green'); 
         $("#statusOnlineOffline"+ restaurantID).addClass('btn-bricky'); 
          $("#statusOnlineOffline"+ restaurantID +"icon").removeClass('glyphicon glyphicon-ok-sign'); 
         $("#statusOnlineOffline"+ restaurantID +"icon").addClass('fa fa-times fa fa-white'); 
          return false; 

         } 
         else if (response == "noaccess") { 
          //do something 
          return false; 

         } 
         else { 
          alert(response); 
          return false; 
         } 
        }); 
        //return false; 

       //Hide modal 
       $('#responsive').modal('hide'); 
       return false; 
       }); 
     } 
     //No modal needed just put online 
     else { 
        var type = 'changeOnline'; 
        $.post("adminAjaxFile.php", 
        { 
         'restaurantID':restaurantID, 
         'action':type 
        }, 
        function(response){ 
         if(response == "online"){ 

          //change the button... 
          $("#statusOnlineOffline"+ restaurantID).removeClass('btn-bricky'); 
         $("#statusOnlineOffline"+ restaurantID).addClass('btn-green'); 
          $("#statusOnlineOffline"+ restaurantID +"icon").removeClass('fa fa-times fa fa-white'); 
         $("#statusOnlineOffline"+ restaurantID +"icon").addClass('glyphicon glyphicon-ok-sign'); 
          return false; 

         } 
         if(response == "offline"){ 
          //do something 
          return false; 

         } 
         else if (response == "noaccess") { 
          //do something 
          return false; 

         } 
         else { 
          alert(response); 
          return false; 
         } 
        }); 
        //return false; 
       return false; 
     } 
    }