如何通过id获取Modal Box的记录? (笨)

时间:2017-03-22 17:48:19

标签: php mysql codeigniter bootstrap-modal

如何通过message_id获取有关模态框的完整消息?

有一个名为" Open Complete Message的按钮。"当我点击那个按钮时,Modal Box会提供演示内容,任何简单的教程?那可以说明我如何让它变得动态?

我是新手,如果你们让我知道任何非复杂的方式,我们将不胜感激。

三江源!

1 个答案:

答案 0 :(得分:1)

这里将会有四个不同的东西:按钮,模态,jQuery和CodeIgniter控制器/模型函数。从理论上讲,你会想做类似下面的事情。在实践中,您可能需要相应地调整您的jquery和php。

THE BUTTON

该按钮将使用 data-id 属性,以便您可以存储您提到的message_id。您可能会使用动态PHP填充它。

<button type="button" id="messageButton" class="btn btn-success" title="Open Complete Message" data-id="123">Open Complete Message</button>

THE MODAL

这里解释不多。单击该按钮将触发此模式(通过下面的jQuery)。理论上,模态默认为空。模态中的消息/信息将由jQuery / PHP功能填充。

<div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="messageLabel"></h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

THE JQUERY

$('#messageButton').on('click', function() {

    var theMessageID = $(this).attr("data-id");
    var theURL = '/messages/getmessage/';  //adjust according to your site/setup

    $.post(url,
        {
            MessageID: theMessageID,
        },
        function (data, status) {
            if (status == 'success') {

                 // loop through data
                $.each(data, function() {

                    $('#messageLabel').text(this[1]);  // message title
                    $('#messageModal .modal-body').html(this[2]);  // the actual message

                });

                $('#messageModal').modal('show');

            } else {
                alert('No message available');
            }
        }
    });//end post
});

控制器

这假设您有一个名为Messages with getmessages function的控制器,以及一个名为get_message的函数的Messages模型。

public function getmessage()
{
    // double checking
    if ( $this->input->post('MessageID') && is_numeric($this->input->post('MessageID')) ) {

        $this->load->model('Messages_model');
        $theMessage = $this->Messages_model->get_message($this->input->post('MessageID'));

        header('Content-Type: application/json');
        echo json_encode( $theMessage );
    }
}

希望这有助于事业。但是,请发布您尝试过的内容。