Question

嗨，朋友，我只是想从脚本中将变量传递给我的模态。我正在使用CodeIgniter作为框架，这使我能够使用其内置库生成表。当我按下表上的查看按钮时，它会获得相应的ID，并返回到控制器以获取表内容并将表内容返回给脚本。现在，我在名为“data[‘viewTable’]”的脚本中有了数据，在我的名为body的模式ID中，有了函数调用$this->table->generate($tabledata)。我只是想使用脚本中的数据来代替变量$ tabledata，因为它变成$this->table->generate(data[‘viewTable’])的问题，如何从脚本中获取此数据。我已经在Google上搜索了相关问题，但是得到的内容却改变了ID指定的模式的全部内容。您可能会建议我在脚本内生成一个表格，并使用innerHTML更改模式，但我尝试过，但仍然行不通。这是我的代码的局部视图

<div id="view_modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title">View schedules</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="body">
                <?php
              //how do I get the variable in the script to be used in the place of $viewTable
                echo $this->table->generate($viewTable);
                ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="saveview btn btn-primary">Save</button>
                <button type="button" class="closeview btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

关于我拥有的脚本

$(document).on('click', '.view', function () {
        var id = $(this).data('id');
        var formdata = '&action=viewschedule&ajax=1&id=' + id;
        $.ajax({
            async: false,
            type: "POST",
            data: formdata,
            dataType: "json",
            success: function (data) {
                //Here i got data from the database and I want to pass to modal id 'body'
                $('#view_modal').show();
            }
        });
    });

Answer 1

根据您更新的问题，您只需定位#body并更新html。使用已使用的jQuery的方法如下

$('#body').html(data.viewTable);

解决方案

$(document).on('click', '.view', function () {
    // Shortcut for the demo, delete this part
    var data = {viewTable: '<table><tr><td>Hello</td></tr></table>'}
    $('#body').html(data.viewTable);
    $('#view_modal').show();
    
    // Your code, already updated to work.
    var id = $(this).data('id');
    var formdata = '&action=viewschedule&ajax=1&id=' + id;
    $.ajax({
        async: false,
        type: "POST",
        data: formdata,
        dataType: "json",
        success: function (data) {
            $('#body').html(data.viewTable);
            $('#view_modal').show();
        }
    });
});

#view_modal {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="view">View</button>
<div id="view_modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="title">View schedules</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="body"></div>
            <div class="modal-footer">
                <button type="button" class="saveview btn btn-primary">Save</button>
                <button type="button" class="closeview btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

如何将变量从js传递给模态

1 个答案:

解决方案