jquery - 如何使用 jQuery 传递表值以在 Bootstrap Modal 中形成输入值？

Question

编辑:我终于设法用 .val() 传递值，但是，只有在我将输入字段名称和 ID 更改为相同后，它才起作用。

我不明白如何用表中的值填充我的 Bootstrap 模式表单输入字段 - 我正在尝试创建编辑功能。因此，当按下编辑按钮时，它会打开带有表单和当前项目已填充字段的模式窗口。

我使用了console.log()，因此值被传递给js。我唯一不确定的是如何传递项目 id。

但是，我真的不知道如何用这些值填充输入字段。我尝试了 $('#frm_name').text(name) - 没有任何反应，表单打开时字段为空，$('#frm_name').append(name) - 没有任何反应，表单打开时字段为空，并且 $('#frm_name').value(name) - 编辑按钮根本不起作用，也没有打开模式。

模态代码

<div class="modal fade" id="myModal" role="dialog" aria labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <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="myModalLabel">Edit record</h4>
            </div>
            <div class="modal-body">
                <form id="" action="" method="POST" class="form">
                <div class="form-group">
                    <label for="name1">Name</label>
                    <input type="text" class="form-control" name="name1" id="frm_name" value="test_value">
                </div>
                <div class="form-group">
                    <label for="ean1">EAN</label>
                    <input type="text" class="form-control" name="ean1" id="frm_ean" value="">
                </div>
                <div class="form-group">
                    <label for="price1">Price</label>
                    <input type="text" class="form-control" name="price1" id="frm_price" value="">
                </div>
                <div class="form-group">
                    <label for="date1">Date</label>
                    <input  type="text" class="form-control"  name="date1" id="frm_date" value="">
                </div>
                    <input type="hidden" name="id1" id="frm_id" value="">
                    <input type="submit" name="submit" class="btn btn-primary btn-custom" value="Save changes">
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <div id="results"></div>
        </div>
    </div>
</div>

表格代码

<div class="table-responsive">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <td class="text-left" >ID</td>
                <td class="text-left" >Product name</td>
                <td class="text-left">EAN</td>
                <td class="text-left">Special price</td>
                <td class="text-left">Date Added</td>
                <td class="text-right">Action</td>
            </tr>
        </thead>
        <tbody>
            {% if prices %}
            {% for price in prices %}
            <tr>
                <td class="text-left td_id">{{ price.id }}</td>
                <td class="text-left td_name">{{ price.product_name }}</td>
                <td class="text-left td_ean">{{ price.ean_code }}</td>
                <td class="text-left td_price">{{ price.special_price }}</td>
                <td class="text-left td_date">{{ price.date_added }}</td>
                <td class="text-right">
                    <button type="button" id="item_{{ price.id }}" data-toggle="tooltip" title="Edit" class="btn btn-primary editModal" data-dismiss="modal"><i class="fa fa-pencil"></i></button>
                    <a href="index.php?route=customer/customer/deletePrice&user_token={{ token }}&customer_id={{ customer_id }}&customer_price_id={{ price.id }}" data-toggle="tooltip" title="delete" class="btn btn-danger"><i class="fa fa-trash-o"></i></a>
                 </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td class="text-center" colspan="5">{{ text_no_results }}</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col-sm-6 text-left">{{ pagination }}</div>
    <div class="col-sm-6 text-right">{{ results }}</div>
</div>

JS 代码

<script>
    $(".editModal").click(function(){
    var $row = $(this).closest('tr');
    var $name =  $row.find('.td_name').text();
    console.log($name);
    $('#frm_name').text(name);
    $('#myModal').modal('show');
    });
</script>

Answer 1

您可以将动态内容设置为模态

<button data-toggle="modal" data-target="#view-modal" data-id="<?php echo $item_id; ?>" id="getUser" class="btn btn-sm btn-info"><i class="glyphicon glyphicon-eye-open"></i> View</button> 


<div id="view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
             <div class="modal-dialog"> 
                  <div class="modal-content"> 

                       <div class="modal-header"> 
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                            <h4 class="modal-title">
                                <i class="glyphicon glyphicon-user"></i> User Profile
                            </h4> 
                       </div> 
                       <div class="modal-body"> 

                           <div id="modal-loader" style="display: none; text-align: center;">
                            <img src="ajax-loader.gif">
                           </div>

                           <!-- content will be load here -->                          
                           <div id="dynamic-content"></div>

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

                 </div> 
              </div>
       </div>

并使用jQuery ajax根据item_id加载modal的modal主体

$(document).ready(function(){

    $(document).on('click', '#getUser', function(e){

        e.preventDefault();

        var item_id= $(this).data('id');   // it will get id of clicked row

        $('#dynamic-content').html(''); // leave it blank before ajax call
        $('#modal-loader').show();      // load ajax loader

        $.ajax({
            url: 'getitem.php',
            type: 'POST',
            data: 'id='+item_id,
            dataType: 'html'
        })
        .done(function(data){
            console.log(data);  
            $('#dynamic-content').html('');    
            $('#dynamic-content').html(data); // load response 
            $('#modal-loader').hide();        // hide ajax loader   
        })
        .fail(function(){
            $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
            $('#modal-loader').hide();
        });

    });

});