CODEWITHSUNDEEP
pythondjangopopup
Jainivash
Jainivash

Reputation: 47

django passing id in popup

In my Django project, I want to edit users from the user list on the popup

{%for data in data%}
      
      <tr>
        <td>{{data.firstname}}</td>
        <td>{{data.phonenumber}}</td>
      
        <td>
          <button type="button" class="btn btn-success"  data-bs-toggle="modal" data-bs-target="#staticBackdrop">
           view Savings
         </button>
         </td>
         </tr>
{%endfor%}

popup

  <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 modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header" style="background-color:#136de4;color:white" >       
    <h5 class="modal-title" id="staticBackdropLabel">Edit Profile</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    
    <div class="card-body">
     <form method="post" id="formOne">
       {% csrf_token %}
       {{form.as_p}}
    <div class="modal-footer">
    <a href="{%url 'customer:savingsprofile' data.id%}"><button type="submit" class=" btn bg-gradient-info text-white btn-sm m-1" data-bs-dismiss="modal">Save Changes</button></a>
    </div>
    </form>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  </div>
</div>
</div>
</div>

but on the popup it is showing only the first (while clicking another row) data of the table

Upvotes: 0

Views: 1153

Answers (1)

Patrick Acioli
Patrick Acioli

Reputation: 69

I think that you need to passa data from list to popup.

You can try something like that:

Button

<a data-license-pk="{{ license.pk }}" data-license-title="{{ license.title }}" class="btn btn-danger btn-sm" href="#" data-toggle="modal" data-target="#deleteLicense">
    <i class="fas fa-trash"></i>
</a>

Modal Content

<!-- Modal -->
<div class="modal fade" id="deleteLicense" tabindex="-1" role="dialog" aria-labelledby="deleteLicenseLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteLicenseLabel">Delete License</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <a  id="delete_link" class="btn btn-danger">Delete</a>
        </div>
      </div>
    </div>
</div>

And the magics

$("#deleteLicense").on("show.bs.modal", function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var pk = button.data("license-pk"); // Extract info from data-* attributes
  var title = button.data("license-title"); // Extract info from data-* attributes
  var modal = $(this);
  modal.find(".modal-title").text("Delete #" + pk);
  modal.find("#delete_link").attr("href", "/licenses/delete/" + pk);
  modal
    .find(".modal-body")
    .html(
      `Are you sure to delete license?: <br><br><b>${title}</b>` +
        "<br>" +
        "<br>All docs will be deleted. <br><br>" +
        '<span class="text text-danger">Are you sure? </span>'
    );
});

Upvotes: 1

Related Questions