将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调用(我有一个简短的代码：

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;
}
}

所有的工作都很好，但是，现在我需要一些文本输入，然后点击这个按钮(调用被执行)

所以现在我想要一个链接，打开一个带有输入字段的模态。填充后，它会将数据发送到相同的方法(如$activevar)，但随后会使用一个额外的参数来保存输入。

但我不知道该怎么处理。我可以把模态放在foreach中，这样每一行都会用正确的数据创建一个新的模态，但这似乎是垃圾。

那么，我如何制作一个按钮来打开一个模态，并将这些变量发送到这个模态，这样我就可以将其进一步发送到ChangeRestStatus方法。

(我使用了一些模态模板。它是用bootstrap制作的)这里是：

<!-- 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>

编辑：

因此，最好的方法是添加：$('#responsived').modal()；在方法中。问题是，当用户单击"确定"，然后获取数据并进一步使用该方法时，我需要它来从模态中获取输入。

Answer 1

好吧，我让它工作了，不知道这是不是一个好的解决方案，但它工作了。

• 添加了一个if-else语句来检查按钮是否具有某个类。如果它有一个绿色类，那么就需要一个带有文本输入的模态。否则不需要模态。这是代码(反馈会很好)
• 当需要模态时，有一个点击功能可以检查是否点击了提交

实际的代码要大得多，但大多带有外观。所以我把它去掉了。。只是为了展示解决方案

//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;
}
}