douyin2435 2018-12-16 10:38
浏览 54
已采纳

如何将变量从js传递给模态[关闭]

Hi friends I just wanted to pass a variable to my modal from the script. I am using CodeIgniter as frame work which enables me to generate table with its built-in library. When I press the view button on my table it gets the corresponding id, gets back to controller to grab the table content and returns the table content to the script. Now I have the data in the script called “data[‘viewTable’]” and in my modal id called body have the function call $this->table->generate($tabledata). I just wanted to use the data I have in the script to be in the place of variable $tabledata as it becomes $this->table->generate(data[‘viewTable’]) the question how do I get this data from the script. I have searched for related problems on google but what I got changes the whole content of the modal specified by id. U may suggest me to generate a table inside the script and change the modal by using innerHTML but I tried and still it doesn’t work. Here is partial view of my code

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

An on the script I have

$(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();
            }
        });
    });
  • 写回答

1条回答 默认 最新

  • drl2051 2018-12-16 11:53
    关注

    Based on your updated question, you need to just target your #body and updated the html. Here's how you'd do that with the jQuery you're already using

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

    Solution

    $(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>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 如何用Thoony写ESP32温湿度检测无源蜂鸣器报警代码?
  • ¥20 部件内部的CT图像数据集
  • ¥15 Visual studio调用动态库
  • ¥15 双目摄像头标定后的校准文件
  • ¥15 powerbi矩阵增加度量值后出现对应关系错乱
  • ¥30 频率分析法分析绘制奈奎斯特图、波特图
  • ¥15 弹出来一万个系统找不到指定的文件框框,怎么解决
  • ¥15 ADS生成的微带线为什么是蓝色空心的
  • ¥15 求一下解题思路,完全不懂
  • ¥15 tensorflow