[Answered ]-Want to show the specific data of opened Accordion in a modal for update operation using Django

by

1👍

✅

You can move whole modal outside for-loop and keep only one modal for all questions . So , whenever user click on edit button you can simply clone whole contents(added this class) div and then add that clone content inside your modal-body because you are showing content inside modal which is already present inside accordian so simply get entire html from accordian .

Demo Code :

$("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>
👤Swati

Leave a comment