I just want to perform an update operation. the data (basically a set of questions from views.py), and each question is shown in form of a bootstrap accordion. the scenario I want is when we open the accordion, there is a modal toggle button for update the data, and when the button pressed it opens the modal which contains the question of that particular opened accordion which allows the user to update that data.
The problem is that in the current code when I click the model button of the 1st question it displays the 1st question data (which means it works fine) but when I click the 2nd accordion modal button (which contains different question) show the data of the 1st question means 1st accordion data. I can't figure out how to get the desired output means opening the model of a specific accordion should display the data of the particular accordion so that we can perform an update operation. here is my template file
{% 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 %}
when I placed the modal dialogue code section inside the panel body it only opens the modal dialogue box for 1st accordion, not for the second one and the rest of the questions.
when I placed the modal code section inside the template for loop it opens the modal dialogue for all accordions but when I open the modal dialogue of all accordions it displays the data of the 1st accordion on all of them.
what are the possible ways to get the desired scenario?
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>