В моем проекте я пытаюсь добавить всплывающее окно в строку таблицы, но только на javascript Это не работает. Я не понимаю, как добавить запрос ajax для всплывающего окна.
То, что я хочу, но если я добавлю это, то это полностью конфликтует. и если я добавляю в конце div, то я не могу использовать значение, потому что оно находится за пределами для l oop.
Вот шаблон:
{% extends 'admin-template/base.html' %}
{% load static %}
{% block content %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Orders</title>
</head>
<body>
<div class="container-scroller">
<!-- partial:../../partials/_navbar.html -->
{% include 'admin-template/_navbar.html' %}
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:../../partials/_sidebar.html -->
{% include 'admin-template/_sidebar.html' %}
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Extras</h3>
<!--<nav aria-label="breadcrumb">
<a href="editusers.html">
<button type="submit" class="btn btn-gradient-primary mb-2">Add Products</button>
</a>
</nav>-->
</div>
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<!--<h4 class="card-title">Bordered table</h4>
<p class="card-description"> Add class <code>.table-bordered</code>-->
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}><font color="{{ message.tags }}">{{ message }}</font></li>
{% endfor %}
</ul>
{% endif %}
</p>
<div class="table-responsive">
<table class="table table-bordered" style="border-top: 1px solid #ebedf2;">
<thead>
<tr>
<th> # </th>
<th> User </th>
<th> Ref code </th>
<th> Subscriptions </th>
<th> Extras </th>
<th> Ordered date </th>
<th> Ordered </th>
<th> Amount </th>
<th> Billing address </th>
<th> Payment </th>
<th> Coupon </th>
<th> Expair date </th>
<th> Refundrequested </th>
<th> Refund granted </th>
<th> Action </th>
</tr>
</thead>
<tbody>
{% for order in orders %}
<tr>
<td> {{ order.id }} </td>
<td> {{order.user.first_name}} {{order.user.last_name}} </td>
<td> {{order.ref_code}} </td>
<td> {% for subscription in order.subscriptions.all %}
{{subscription}}
{% endfor %}
</td>
<td> {% for extra in order.extras.all %}
{{extra}}
{% endfor %}
</td>
<td> {{order.ordered_date}} </td>
<td> {{order.ordered}} </td>
<td> {{order.amount}} </td>
<td> {{order.billing_address}} </td>
<td> {{order.payment}} </td>
<td> {{order.coupon}} </td>
<td> Expair date </td>
<td> {{order.refund_requested}} </td>
<td> {{order.refund_granted}} </td>
<td>
<button type="button" class="btn btn-gradient-primary btn-sm js-get-payment" data-url="/api/admin/payment/{{order.id}}" id="myBtn">Transaction</button>
<button type="button" class="btn btn-gradient-primary btn-sm" id="myBtn">Detail</button>
<a href="/api/admin/editorder/{{order.id}}"><i class="mdi mdi-grease-pencil table-icon"></i><a>
<i class="mdi mdi-delete table-icon"></i>
</td>
</tr>
<div id="myModal" class="modal1">
<!-- Modal content -->
<div class="modal-content1">
<div class="modal-header1">
<span class="close">×</span>
<h2>Transaction Detail</h2>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered" style="border-top: 1px solid #ebedf2;">
<thead>
<tr>
<th>#</th>
<th> Transaction ID </th>
<th> Amount </th>
<th> Payment mode </th>
<th> Currency </th>
<th> Gateway Name </th>
<th> Bank Transaction Id </th>
</tr>
</thead>
<tbody>
<tr>
<td> {{forloop.counter}} </td>
<td> {{order.transcation.txn_id}} </td>
<td> {{order.transcation.payment_mode}} </td>
<td> {{order.transcation.currency}} </td>
<td> {{order.transcation.gateway_name}} </td>
<td> {{order.transcation.bank_txn_id}} </td>
</tr>
</tbody>
</table>
</div>
</div>
<!--<div class="modal-footer1">
<h3>Modal Footer</h3>
</div>-->
</div>
</div>
{% endfor %}
</table>
</div>
</tbody>
<div class="pagination">
<span class="step-links">
{% if orders.has_previous %}
<a href="?page=1">« first</a>
<a href="?page={{ orders.previous_page_number }}">previous</a>
{% endif %}
<span class="current">
Page {{ orders.number }} of {{ orders.paginator.num_pages }}.
</span>
{% if orders.has_next %}
<a href="?page={{ orders.next_page_number }}">next</a>
<a href="?page={{ orders.paginator.num_pages }}">last »</a>
{% endif %}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:../../partials/_footer.html -->
{% include 'admin-template/_footer.html' %}
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- End custom js for this page -->
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- Popup Form Code End-->
</body>
{% endblock %}
Так что я думаю, что мне нужно добавить запрос ajax, по этой причине я создал новую конечную точку и создал новый шаблон для этого всплывающего элемента div, но как я могу вызвать его?
url path: path('api/admin/payment/<id>', views.get_payment,
name="api/admin/payment")
def get_payment(request,id):
order = Order.objects.get(id=id)
context = {'payment':order.payment}
return render(request, 'admin-template/payment.html', context)