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>

编辑：

所以最好的方法是添加：$（'#response'）。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;
        }
    }

将foreach数据传递给模态

1 个答案: