Bootstrap模态,Django用于循环和模型 [英] Bootstrap modal, django for loop and model

查看:63
本文介绍了Bootstrap模态,Django用于循环和模型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对Django和Bootstrap都是新手.我目前正在尝试在我的Django模板的for循环中使用一个引导程序模式窗口,该窗口将显示来自模型的一些数据.

I am quite new to both Django and Bootstrap. I am currently trying to get a bootstrap modal window working inside a for loop in my Django template that would display some data coming from a model.

因此,我创建了一个for循环,该循环涵盖了按钮创建和模式窗口,并且循环访问了模型中包含的数据.因此,它应该创建与我模型中的条目一样多的按钮和相应的模态窗口.

I have therefore created a for loop that covers both the button creation and the modal window and which iterates over the data contained in my model. It should therefore create as many buttons and corresponding modal windows as entries in my model.

但是,当我单击通过for循环创建的任何按钮时,模态窗口将始终显示第一个条目,并且永不更改.

However, when I click on any button created through the for loop, the modal window always display the first entry and never changes.

我试图找到答案,主要研究了以下主题:

I have tried to find an answer and I have mainly looked at the following topics:

将值传递给Django中的Bootstrap模态

Twitter引导程序远程模态每次都显示相同的内容

当我创建与唯一ID相关的不同模式和按钮时,这在循环外非常有用,但是我无法在我的情况下使用它.

This works perfectly outside a loop when I create different modal and buttons related with a unique ID but I couldn't make it work in my case.

我希望足够精确.

感谢您的帮助.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Remote file for Bootstrap Modal</title>  

  <!--CSS-->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

  <!--jquery-->
  <script src="http://code.jquery.com/jquery.min.js"></script>

  <!--JS-->
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>


</head>
<body>

          <div class="row">
            {% for name in activities %}
          <div class="col-md-3">
            <div class="thumbnail">
              <img src="#" >
            </div>
            <p>Location: {{name.aregion}}</p>
            <p>

              <!-- Button trigger modal -->
              <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal">
                Read More
              </button>

              <!-- Modal -->
              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                      <h4 class="modal-title" id="myModalLabel">{{name.aname}}, {{name.aregion}}, {{name.acountry}}</h4>
                    </div>
                    <div class="modal-body">
                      ...
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save</button>
                    </div>
                  </div>
                </div>
              </div>
            </p>
          </div>
          {% endfor %}
          </div>

</body>
</html>

(按钮触发模式"和模式"代码来自bootstrap.com,因此应该正确)

("button trigger modal" and "modal" code comes from bootstrap.com so it should be right)

推荐答案

好,我知道出了什么问题.我试图使用的ID是文本,而不是我认为的数字,最后如此简单.我终于使用了模型的id字段,它可以完美地工作.谢谢您,rajasimon,提供了正确的方向!

Ok I have understood what went wrong. The ID I was trying to use was text and not a number I think, so simple in the end. I have finally used the id field of my model and it works perfectly. Thanks to you, rajasimon, for giving the right direction!

这篇关于Bootstrap模态,Django用于循环和模型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆