在 Django 中打开引导模式视图以编辑帖子答案

【问题标题】：Opening bootstrap modal view in Django for editing a post在 Django 中打开引导模式视图以编辑帖子
【发布时间】：2017-06-11 13:54:50
【问题描述】：

我正在学习基本的 Django 开发，并正在创建一个简单的博客应用程序，其中包含我创建的几篇文章。我的主页包含遍历所有帖子并显示它们的代码。

{% for post in all_posts %}
    <div class="post-card">
      {{post.title}}
      {{post.description}}
      <a data-toggle="modal" data-target="#postEditModal">
        Edit Post
      </a>
    </div>
{% endfor %}

我有一个#postEditModal，它链接到 Bootstrap 数据目标方法并显示以下内容

<div id=#postEditModal class="modal fade" style="overflow: scroll;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    {{editpostform}}
</div>

我的目标是能够点击每个帖子的“编辑帖子”链接，该链接应该重定向到帖子的 slug 并在同一页面顶部打开所有模式，从那里我应该能够使用我的{{editpostform}} 编辑帖子。在模式区域之外单击应返回到同一页面。

我尝试了很多类似post.get_absolute_url 和{% url 'single_post' post.id %} 的方法，但到目前为止都没有正常工作。我假设涉及到某种程度的 Javascript/AJAX，但我不确定从哪里开始。

【问题讨论】：

为什么要重定向到不同的 url？当用户单击编辑帖子并将表单发布到您可以进行更新的视图时，您可以在模态表单中捕获帖子详细信息。
我想重定向到特定帖子网址的原因是因为最终我想添加一个“详细模式”视图，在该视图中我可以在模式中查看我的完整博客文章，并且然后退出。 Pinterest 模态视图模拟了我正在寻找的功能。

标签： javascript jquery ajax django twitter-bootstrap

【解决方案1】：

您正在使用相同的id 创建多个modals，并且您的所有链接（data-target）都指向相同的模式，这不是唯一的。

一个简单的解决方案是将帖子 ID 添加到模式和链接中。试试这个：

<div id="#postEditModal{{ post.id }}" class="modal fade" style="overflow: scroll;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    {{editpostform}}
</div>

并像这样修改链接：

<a data-toggle="modal" data-target="#postEditModal{{ post.id }}">Edit Post</a>

【讨论】：

添加 #postEditModal{{post.id}} 会为我断开链接。没有 {{post.id}} 模式打开就好了。
但是在这种情况下，您打开的是一个空表单，不是吗？如果您想要编辑每个帖子，则需要使用 ajax 加载模式，并使用选择帖子数据填充表单。
是否有教程或者您知道我将如何开始使用 Ajax 加载模式并使用单个帖子信息填充表单？我还想有一个“详细视图”并想显示 post.title 和 post.description。这就是为什么我认为重定向到单个帖子更容易。
根据bootstrapmodal documentation的说法，bootstrap原生支持ajax加载已被弃用，所以你必须使用jqueryload()方法。