动态填充模态形式

时间:2016-03-18 18:52:08

标签: jquery html django django-templates

我有一个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 %}

请问我在jquery结束时做得不对?

1 个答案:

答案 0 :(得分:0)

在您的视图中,无论您在何处创建表单对象,都要添加初始参数。这是文档链接 - https://docs.djangoproject.com/en/1.9/ref/forms/api/#dynamic-initial-values