想要使用 Django 在更新操作模式中显示打开的手风琴的具体数据

Question

我只想执行更新操作。数据（基本上是 views.py 中的一组问题），每个问题都以 bootstrap 手风琴的形式显示。我想要的场景是当我们打开手风琴时，有一个用于更新数据的模态切换按钮，当按下按钮时，它会打开模态，其中包含允许用户更新该数据的特定打开手风琴的问题。

问题是，在当前代码中，当我单击第一个问题的模型按钮时，它显示第一个问题数据（这意味着它工作正常）但是当我单击第二个手风琴模式按钮（其中包含不同的问题） ) 显示第一个问题的数据表示第一个手风琴数据。我不知道如何获得所需的输出意味着打开特定手风琴的模型应该显示特定手风琴的数据，以便我们可以执行更新操作。这是我的模板文件

{% extends 'base.html' %}


{% block title %}Add Questions{% endblock title %}


{% block body %}

    <body>
    <label for=""><h4 style="color: indianred">Grade >> {{classname}} >> {{topicname}} >> {{subtopicnames}} </h4></label><br>
       <br>
    <br>
    <br>
    
    </div>
    </form>

    <div class="panel-group" id="accordion">
        {% for x in queryset %} <!-- retrieving all questions from views.py-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ forloop.counter }}">
                        Question
                    </a>
                </h3>
            </div>
            <div id="collapse{{ forloop.counter }}" class="panel-collapse collapse">
                <div class="panel-body">
                    
                    <!-- <input type="button" onclick="updateques();" value="Edit!!"><br>                      -->
                    <br><br>
                    <div>
                            {{x.question.id}}
                            <input type="hidden" id="quesid"  name="quesid" value="{{x.question.id}}">
                            <label>Q- <input type="text" id="ques" name="ques" value="{{x.question.question}}" readonly></label><br><br>
                            <img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
                            <label>A- <input type="text" id="op1" name="" value="{{x.option.option1}}" readonly><br><br>
                            <label>B- <input type="text" id="op2" name="" value="{{x.option.option2}}" readonly><br><br>
                            <label>C- <input type="text" id="op3" name="" value="{{x.option.option3}}" readonly><br><br>
                            <label>D- <input type="text" id="op4" name="" value="{{x.option.option4}}" readonly><br><br>
                            
                            <input type="checkbox" name="" value="{{x.answer}}" checked>
                            <label>{{x.question.difficulty}}</label>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Edit</button>
                        <!-- <input type="submit" id="update" value="Update" /> -->
                    </div>
                    <!--Toogle Button-->
                    
                                   
                </div>
            </div>

            {{x.question.id}}<!-- checking here if it returns the right question id value of the accordian that is opened and it displays the correct id value but when it comes to modal it takes only the 1st question id and its data-->
            <!-- Button trigger modal -->

  
            <!-- Modal -->
            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="quesid"  name="quesid" value="{{x.question.id}}">
                            <label>Q- <input type="text" id="ques" name="ques" value="{{x.question.question}}" readonly></label><br><br>
                            <img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
                            <label>A- <input type="text" id="op1" name="" value="{{x.option.option1}}" readonly><br><br>
                            <label>B- <input type="text" id="op2" name="" value="{{x.option.option2}}" readonly><br><br>
                            <label>C- <input type="text" id="op3" name="" value="{{x.option.option3}}" readonly><br><br>
                            <label>D- <input type="text" id="op4" name="" value="{{x.option.option4}}" readonly><br><br>
                            
                            <input type="checkbox" name="" value="{{x.answer}}" checked>
                            <label>{{x.question.difficulty}}</label>
                    
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Understood</button>
                    </div>
                </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

{% endblock body %}

当我将模态对话代码部分放入面板主体时，它只会打开第一个手风琴的模态对话框，而不是第二个和其余问题的模态对话框。

当我将模态代码部分放在循环模板中时，它会打开所有手风琴的模态对话，但是当我打开所有手风琴的模态对话时，它会在所有手风琴上显示第一个手风琴的数据。

获得所需场景的可能方法是什么？

Answer 1

您可以将整个模态移动到 for 循环之外，并只为所有问题保留一个模态。因此，无论何时用户单击 edit 按钮，您都可以简单地 clone 整个 contents（添加此 class）div 然后在您的模式中添加该克隆内容- body 因为你在 modal 中显示的内容已经存在于 accordian 中，所以只需从 accordian .

中获取整个 html

演示代码 :

$("button[data-toggle='modal']").on("click", function() {
  var selector = $(this).closest(".contents").clone(); //clone whole div
  selector.find("button").remove() //remove modal button
  selector.find("input").prop("readonly", false); //remove readonly..from inputs
  //you can remove/add/manipulate this cloned content..
  $(".modal-body").html(selector) //add that inside modal-body

})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">
  <!-- retrieving all questions from views.py-->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
            Question
            </a>
      </h3>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">
        <br/><br/>
        <!--added class here -->
        <div class="contents">
          <!--remove ids use class-->
          1
          <input type="hidden" name="quesid" value="1">
          <label>Q- <input type="text" name="ques" value="abc" readonly></label><br><br>
          <img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
          <label>A- <input type="text" name="" value="A1" readonly><br><br>
               <label>B- <input type="text"  name="" value="B1" readonly><br><br>
               <label>C- <input type="text"  name="" value="C1" readonly><br><br>
               <label>D- <input type="text" name="" value="D1" readonly><br><br>
               <input type="checkbox" name="" value="A" checked>
               <label>Ok </label>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">Edit</button>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
            Question 2
            </a>
      </h3>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
        <br/><br/>
        <div class="contents">
          2
          <input type="hidden" name="quesid" value="2">
          <label>Q- <input type="text" name="ques" value="abc" readonly></label><br><br>
          <img src="{{x.question.image}}" alt="" srcset="" width="700"><br><br>
          <label>A- <input type="text"  name="" value="A2" readonly><br><br>
               <label>B- <input type="text"  name="" value="B2" readonly><br><br>
               <label>C- <input type="text"  name="" value="C2" readonly><br><br>
               <label>D- <input type="text"  name="" value="D22" readonly><br><br>
               <input type="checkbox" name="" value="A" checked>
               <label>Not Good </label>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">Edit</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!--move whole modal outside loop-->

<div class="modal fade" id="staticBackdrop" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

        <!--here all will come-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>
</div>

想要使用 Django 在更新操作模式中显示打开的手风琴的具体数据

want to show the specific data of opened Accordion in a modal for update operation using Django

javascript

django

bootstrap-modal

bootstrap-accordion