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

}

一切正常，但是，现在我需要一些文本输入，然后才能单击此按钮(调用被执行)

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

但我不知道如何解决这个问题。我可以将模态放在 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>

编辑:

所以最好的方法是添加: $('#responsive').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;
        }
    }