Question

我正在尝试使用模态（弹出窗口进行编辑）来实现编辑表单。我有一个项目列表，每个项目旁边都有一个编辑链接。弹出的表单将由对象id填充。

我遇到的问题是，当我点击“编辑”时，会打开一个新页面，但我想在同一页面上打开一个模态窗口。

我遇到的另一个问题是取消和X按钮不起作用我的提交按钮确实有效。任何有关如何解决此问题的想法都非常感谢。

detail.html（项目清单）

<h1>{{ inventory.id }} {{ inventory.inventory_name }} created on {{ inventory.pub_date }}</h1>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    </div>
    <table cellpadding="1" cellspacing="1" id="detailTable" class="table table-striped table-bordered">
    <thead>
        <th>ID</th>
        <th>NAME</th>
        <th>STATUS</th>
        <th>DERIVATIVES</th>
        <th>SUBSYSTEMS</th>
        <th>TIME ADDED</th>
        <th>TIME EDITED</th>
        <th>EDIT</th>
    </thead>
    <tbody>{% for block in inventory.block_set.all %}
        <tr>
            <td>{{ block.id }}</td>
            <td>{{ block.block_name }}</td>
            <td>{{ block.block_status }}</td>
            <td>{{ block.block_derivatives }}</td>
            <td>{{ block.block_subsystems }}</td>
            <td>{{ block.added }}</td>
            <td>{{ block.updated }}</td>
            **<!-- LINK TO THE EDIT FORM MODAL -->**
            **<td><a class="fa fa-pencil" data-toggle="modal" href="/inventory/{{ inventory.id }}/editblock/{{ block.id }}/" data-target="#modal" title="edit item" data-tooltip>Edit</a>
            </td>**
            **<!-- LINK TO THE EDIT FORM MODAL -->**
        </tr>{% endfor %}</tbody>
</table>{% if user.is_authenticated and user.is_active %}
<div display="inline">
    <p>Make a request: <a href="{% url 'inventory:requests' inventory.id %}">Request Form</a> 
    </p>{% else %}
    <div display="inline">
        <p>You must be authorized to make a request.</p>
        <form id="login_form" method="post" action="" autocomplete="off">{% csrf_token %}
            <input style="display:none;" type="text" name="somefakename" />
            <input style="display:none;" type="password" name="anotherfakename" />
            <input type="text" name="username" value="" size="50" placeholder="Username" />
            <br />
            <input id="passwrd" type="password" name="password" value="" size="50" placeholder="Password" />
            <br />
            <input id='login' type="submit" value="login" />
            <p style="display:inline; padding:10px"></p>
        </form>
        {% endif %}
    </div>

editForm.html：

{% load staticfiles %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="{% static " inventory/js/googleAPIJquery.js " %}" type="text/javascript"></script>
<div class="modal-dialog modal-md">
    <div class="modal-content">
    <form id="block_update_form" method='post' class="form" role="form" action='.'>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title" id="myModalLabel">Block {{ block.id }}</h4> 
        </div>
        <div class="modal-body">{% csrf_token %} {{ form.non_field_errors }}
            <div class="form-group">{% for field in form %}
                <div class="form-group">{% if field.errors %}
                    <ul class="form-errors">{% for error in field.errors %}
                        <li><span class="fa fa-exclamation-triangle"></span>  <strong>{{ error|escape }}</strong>

                        </li>{% endfor %}</ul>{% endif %} {{ field.label_tag }} {{ field }} {% if field.help_text %}
                    <div class="form-helptext">{{ field.help_text }}</div>{% endif %}</div>{% endfor %}</div>
            <div class="modal-footer">
                <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
                <input type="submit" class="btn btn-primary" value="save" style="margin-bottom: 5px;" />
            </div>
    </form>
    <script>
        jQuery('.modal-content .calendar').datepicker({
            dateFormat: "yy-mm-dd"
        });
        var form_options = {
            target: '#modal',
            success: function() {}
        }
        $('#block_update_form').ajaxForm(form_options);
    </script>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

Answer 1

<强>

<td><a class="fa fa-pencil" data-toggle="modal" href="/inventory/{{ inventory.id }}/editblock/{{ block.id }}/" data-target="#modal" title="edit item" data-tooltip>Edit</a>
</td>

<div class="modal-dialog modal-md">
    <div class="modal-content">
    {% include 'editForm.html' with form=form %}

</div>
</div>

<强>

Answer 2

为你的HTML：

http://getbootstrap.com/javascript/#modals

和

{% include 'editForm.html' with form=form, any_parameters = any_parameters %}

例如： views.py：

context['form'] = CommentForm(request.POST or None)

在main.html中

：

{% include 'area/comment-form.html' with form=form %}

在comment-form.html中：

<form method="post" class="form-horizontal" action='{% url 'add-comment' id=platform.id %}'>

阻止Django模式重定向到新页面

2 个答案: