Jquery 动态填充模态形式

Jquery 动态填充模态形式,jquery,html,django,django-templates,Jquery,Html,Django,Django Templates,我有一个django模板,它显示数据库中的项目列表。我打算在单击时编辑或更新每个项目。 我已经能够打印我希望更新的项目,但我有一个问题。 我遇到的问题是,这些项没有以模态形式填充 这是代码 {% block body_block %} {% if items %} {% for product in items %} <tr align="center">

我有一个django模板,它显示数据库中的项目列表。我打算在单击时编辑或更新每个项目。 我已经能够打印我希望更新的项目,但我有一个问题。 我遇到的问题是,这些项没有以模态形式填充

这是代码

{% block body_block %}
{% if items %}
                    {% for product in items %}
                    <tr align="center">
                        <td>{{product.docfile}}</td>
                        <td>{{product.description}}</td>
                        <td >{{product.price}}</td>
                        <td >{{product.quantity}}</td>
                        <td>
                            <a href="#{{product.pk}}" class="manipulate btn btn-info btn-lg" item_id="{{product.pk}}">Update</a>
                        </td>
                    </tr>
                    <input type="hidden" id="ds" value="{{product.description}}">
                    {% endfor %}
                {% else %}
                    <p>You have <strong>no items</strong> currently in your cart! <strong>Add items now!</strong>
                    </p>
                {% endif %}
            </table>
            <br><br><br>

        <!-- Modal -->
        <div class="modal fade" id="edititemModal{{product.pk}}" role="dialog" style="height: auto;">
            <div class="modal-dialog">
            <!-- Modal content-->
                <div class="modal-content" align="left" >
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Edit or Update Item </h4>
                            <!-- <p>{{product.id}}</p> -->
                    </div>
                    <div class="modal-body">
                        <div class="alert hidden" id="alert1" role="alert">
                        </div>
                        <p id="item_make"></p>
                        <form action="/selly/edit_item/" method="post" class="special" enctype="multipart/form-data" item_id="{{product.pk}}">
                            {% csrf_token %}
                                <div class="form-group">
                                    <input type="hidden" id="id_item" maxlength="32" name = "item_id" value="{{product.id}}" required/>
                                </div>

                                <div class="form-group">
                                    <label>Description</label>
                                    <input type="text" id="id_description" maxlength="32" name = "description" value="{{product.description}}" class="form-control" required/>
                                </div>

                                <div class="form-group">
                                    <label>Price</label>
                                    <input type="number" id="id_price" maxlength="32" name="price" value="{{product.price}}" class="form-control" required/>
                                </div>

                                <div class="form-group">
                                    <label>Quantity</label>
                                    <input type="number" id="id_quantity" maxlength="10" name="quantity" value="{{product.quantity}}" class="form-control" required/> 
                                </div>
                                <div class="modal-footer">
                                    <input type="submit" name="edit" id="edit_item" class='btn pull-right' value="Update"/>
                                </div>

                        </form><br>
                    </div>
                </div>
            </div>
        </div>
    <script>
        $(document).ready(function(){
            $(".manipulate").click(function(){
                $('#id_description').val();
                var item_keys = ['#id_description', '#id_price', '#id_quantity']
                for(var i=2; i<5; i++){
                    var item_val = $(this).parent().parent().find('td:nth-child('+i+')')[0].innerText;
                    console.log("InnerText is :"+ item_val);
                    $(item_keys[i-1]).val(item_val);
                }
                $('#id_item').val($(this).attr('item_id'));
                $('#edititemModal').modal('show');
            });
        });
    </script>
    {% endblock %}
{%block body\u block%}
{%if items%}
{items%%中产品的百分比}
{{product.docfile}
{{product.description}}
{{product.price}}
{{product.quantity}
{%endfor%}
{%else%}
您的购物车中当前没有物品立即添加项目

{%endif%}


&时代; 编辑或更新项目

{%csrf_令牌%} 描述 价格 量
$(文档).ready(函数(){ $(“.mobile”)。单击(函数(){ $('id#u description').val(); var项目_键=['#id_说明','#id_价格','#id_数量']
对于(var i=2;i在您的视图中,无论您在何处创建表单对象,都要添加初始参数。这是文档链接-

模态表单将被填充。这正好可以做到这一点,您提到要将数据库中的数据显示为预填充表单,对吗?请阅读提供的链接。它将帮助您精确实现这一点。