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

Question

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();
            }
        });
    });

Answer 1

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>