Okay so I am trying to have a table displaying results from a query. I want the data in the table to be truncated and the user to be able to see the full data in a modal.
I have tried implementing this as seen below. However, the modal is displaying the same result in every column for the first row. It seems as though once the modal takes data it won't change dynamically on iteration to load new data.
So my question is what is the best way to handle this type of dynamic request and how would I implement it? Should I try to dynamically load the data with an ajax request or is there a way to reset that modal on each click to load new data?
Please see the code below and thanks!
Template:
<td class='test'>{{ value.4 }}<img src='{% static "img/expand-icon2.png" %}' id="expand">
{% if methods %}
{% for key2, value in methods %}{% ifequal key2 key %}
<div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="classModalLabel">
Triples:
</h4>
</div>
<div class="modal-body">
<table id="classTable" class="table table-bordered">
<thead>
<tr>
<th style="width: 4%">#</th>
<th>Subject</th>
<th>Predicate</th>
<th>Object</th>
<tr>
</thead>
<tbody>
{% for item in value %}
<tr>
<td scope="row">{{ forloop.counter }}.</td>
<td>{{ item }}</td>
<td>{{ item }}</td>
<td>{{ item }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
{% endifequal %}
{% endfor %}
{% endif %}
</td>
{% else %}
<td>No Provenance Terms Found</td>
{% endif %}
Javascript:
<script type="text/javascript">
$('.test').each(function(){
var trig = '[id^="trigger_"]';
$(trig).click(function(){
$('#classModal').modal('show');
return false;
})
});
</script>
you can use this jquery for reloading the modal. here you can use .modal-body1 class to reset the exact data field. you can use any class names.
insert this code on your click function.
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("");
});
});
Related
I have a webpage (Flask powered) that loads lots of modals by using a loop:
{% for _, product in products_table.items() %}
<div class="modal fade" tabindex="-1" id="modal-{{product.CODIGO}}" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ product.PRODUTO }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table" id="product-detail">
<thead>
<tr>
<th scope="col">Loja</th>
<th scope="col">Estoque</th>
</tr>
</thead>
<tbody>
{% for store in toy_store_list %}
<tr id="tr-{{ store.alias }}">
<td>{{ store.name }}</td>
<td><span style='font-weight: bold' hx-trigger="load target:#modal-{{product.CODIGO}}" hx-get="{{ url_for('product.get_product_stock', store=store.alias, search_term=product.CODIGO) }}"
hx-swap="innerHTML" hx-target="this">
<div class="spinner-border spinner-border-sm htmx-indicator" role="status"></div>
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endfor %}
I want HTMX to only make the GET request when ONE bootstrap modal is launched (clicked). Currently, when the page loads, it is making one request for each modal in page.
I tried using hx-trigger="load target:#modal-{{product.CODIGO}} without any good results.
It is a table display in webpage, it displays one button for row using Datatable.
In the column #4 displays either of 2 values, one is --- which is desires for trigger any of the two Modals after click over it own row's button.
When click over any row's button, console.log successfully display message set, however it does not open any modal and display error document.getElementById(...).modal is not a function at HTMLButtonElement.<anonymous>
Table header is ['eamil', 'first-name', 'last-name', 'NIT', 'button']
data value for table is:
[['prueba1#gmail.com','Daniel','Apellido01','907595-0'],
['prueba4#gmail.com','Prueba04','Apellido04','---']]
HTML
<!-- DataTable -->
<table id="listados" class="display nowrap responsive" style="width:100%">
<thead>
<tr>
{% for i in header %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for i in evnts %}
<tr>
<td class="text-dark">{{ i[0] }}</td>
<td class="text-dark">{{ i[1] }}</td>
<td class="text-dark">{{ i[2] }}</td>
{% if i[3] != '---' %}
<td class="text-dark">{{ i[3] }}</td>
{% else %}
<td class="text-dark">{{ i[3] }}</td>
{% endif %}
<td></td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
{% for i in header %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</tfoot>
</table>
<!-- Modals -->
<div class="modal fade" id="newNit" tabindex="-1" role="dialog" aria-labelledby="newNitModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newNitModalLabel">Agregar Nuevo NIT</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="nuevo"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" id="borrar">Continuar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="actualizarNit" tabindex="-1" role="dialog" aria-labelledby="actualizarNitModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="actualizarNitModalLabel">Actualizar informacion NIT</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="update"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" id="borrar">Continuar</button>
</div>
</div>
</div>
</div>
snippet for Datatable and modals
$(document).ready( function () {
var pasarValor;
var table = $('#listados').DataTable({
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button class='btn-success' data-toggle='modal' id='agregarNit'>NIT</button>"
}
],
"scrollX":true,
})
$('#listados #agregarNit').on('click', function() {
var data = table.row( $(this).parents('tr') ).data();
pasarValor = {
mail: data[0],
nit: data[3]
};
if (data[3] === '---'){
console.log('True')
document.getElementById('newNit').modal('show');
} else {
console.log('False')
document.getElementById('actualizarNit').modal('show');
}
});
});
I have this management page that lists my employees from my sqlite database, but when I click Add New Employees, nothing happens, and I don't get an error message as well...
I went over Bootstrap5 documentation to make sure I didn't misspell anything but still stuck...
{% extends 'base.html' %}
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class "col md-12">
<div class="bg-light p-3">
<h2>Manage <b>Employees </b> <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#mymodal">Add New Employees</button> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissable" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<table class="table table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.phone}}</td>
<td>
Edit
Delete
</td>
</tr>
<!-- Modal Add Employee-->
<!-- Modal Edit Employee-->
</div>
</div>
</div>
{% endblock %}
on the Manage Employees button you are setting data-bs-toggle and data-bs-target, which should be data-toggle and data-target. Besides that you have to specify your target in data-target, you are defining a modal that doesn't exist (#mymodal doesn't exist in your code, that's why nothing happens).
Here is a working sample with your code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
{% extends 'base.html' %}
{% include 'header.html' %}
{% block title %} Home {% endblock %}
{% block body %}
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-light p-3">
<h2>Manage <b>Employees </b> <button type="button" class="btn btn-success float-end" data-toggle="modal" data-target="#mymodal">Add New Employees</button> </h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissable" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<table class="table table-hover table-striped">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Action</th>
</tr>
{% for row in employee %}
<tr>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.email}}</td>
<td>{{row.phone}}</td>
<td>
Edit
Delete
</td>
</tr>
<!-- Modal Add Employee-->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add new Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Create your html form here ...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add New Employee</button>
</div>
</div>
</div>
</div>
<!-- Modal Edit Employee-->
<div class="modal fade" id="modaledit{{row.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle2">Modal Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal Edit Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Edit Employee</button>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
By the way, you have an error on your code after your class row, you have class "col md-12" which should be class="col-md-12". (missing the equals and hyphen sign).
More information about modals can be found here: https://getbootstrap.com/docs/4.0/components/modal/
Hope it helps! :)
I did solved it by placing the Add New Employee model code just below the Add New Employee button code...
I am trying to make my modal window in my first Django project (I don't know JS and I started in Django) and I put a JS function on my modal window click.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function () {
$(".js-create-articles").click(function () {
$.ajax({
url: '/articles/create/',
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-articles").modal("show");
},
success: function (data) {
$("#modal-articles .modal-content").html(data.html_form);
}
});
});
});
class MainArticles(ListView):
template_name = 'dishes/articles.html'
model = Articles
class MainArticlesCreate(View):
def get(self, request):
form = ArticlesForm()
context = {'form': form}
html_form = render_to_string('dishes/articles_create.html',
context,
request=request,
)
return JsonResponse({'html_form': html_form})
class ArticlesForm(forms.ModelForm):
model = Articles
fields = {'name', 'tag', 'deception'}
class Articles(models.Model):
name = models.CharField(max_length=100)
tag = models.CharField(max_length=20, null=True, blank=True)
deception = models.TextField(max_length=800)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% extends 'main.html' %}
{% load static %}
{% block javascript %}
<script src="{% static 'js/articles.js' %}"></script>
{% endblock %}
{% block content %}
<section class="feature">
<div class="col-md-9">
<h2 class="section-header">Товары в корзине</h2>
<div class="table-responsive">
<p>
<button type="button" class="btn btn-primary js-create-articles">
<span class="glyphicon glyphicon-plus"></span>
New article
</button>
</p>
<table class="table">
<tr class="info">
<td class="info col-md-3">Товар</td>
</tr>
{% for obj in object_list %}
<tr>
<td class="info col-md-3">{{ obj.name }}</td>
<td class="info col-md-3">{{ obj.deception }}</td>
<td class="info col-md-3">
<button>edit</button>
</td>
</tr>
{% empty %}
<tr>
<td colspan="7" class="text-center bg-warning">No book</td>
</tr>
{% endfor %}
</table>
<p>NAZAAAAAD </p>
</div>
<!-- THE MODAL -->
<div class="modal fade" id="modal-articles">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
</div>
</section>
{% endblock content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% load widget_tweaks %}
<form method="post">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Create a new articles</h4>
</div>
<div class="modal-body">
{% for field in form %}
<div class="form-group{% if field.errors %} has-error{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% render_field field class="form-control" %}
{% for error in field.errors %}
<p class="help-block">{{ error }}</p>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create book</button>
</div>
</form>
Clicking on the button works, I checked the alert but the window does not work or if it works, I just don’t see it. What am I missing?
I am trying to implement an edit form by using a modal(pop out window for editing).
I have a list of items and each item has an edit link next to it. The form that pops out will be populated by the objects id.
The problem I am having is that when I click on "Edit", a new page opens but I want a modal window to open up on the same page.
Another problem I am having is that the Cancel and X buttons do not work yet my Submit button does work. Any ideas on how to resolve this issue is greatly appreciated.
detail.html(the list of items)
<h1>{{ inventory.id }} {{ inventory.inventory_name }} created on {{ inventory.pub_date }}</h1>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<table cellpadding="1" cellspacing="1" id="detailTable" class="table table-striped table-bordered">
<thead>
<th>ID</th>
<th>NAME</th>
<th>STATUS</th>
<th>DERIVATIVES</th>
<th>SUBSYSTEMS</th>
<th>TIME ADDED</th>
<th>TIME EDITED</th>
<th>EDIT</th>
</thead>
<tbody>{% for block in inventory.block_set.all %}
<tr>
<td>{{ block.id }}</td>
<td>{{ block.block_name }}</td>
<td>{{ block.block_status }}</td>
<td>{{ block.block_derivatives }}</td>
<td>{{ block.block_subsystems }}</td>
<td>{{ block.added }}</td>
<td>{{ block.updated }}</td>
**<!-- LINK TO THE EDIT FORM MODAL -->**
**<td><a class="fa fa-pencil" data-toggle="modal" href="/inventory/{{ inventory.id }}/editblock/{{ block.id }}/" data-target="#modal" title="edit item" data-tooltip>Edit</a>
</td>**
**<!-- LINK TO THE EDIT FORM MODAL -->**
</tr>{% endfor %}</tbody>
</table>{% if user.is_authenticated and user.is_active %}
<div display="inline">
<p>Make a request: Request Form
</p>{% else %}
<div display="inline">
<p>You must be authorized to make a request.</p>
<form id="login_form" method="post" action="" autocomplete="off">{% csrf_token %}
<input style="display:none;" type="text" name="somefakename" />
<input style="display:none;" type="password" name="anotherfakename" />
<input type="text" name="username" value="" size="50" placeholder="Username" />
<br />
<input id="passwrd" type="password" name="password" value="" size="50" placeholder="Password" />
<br />
<input id='login' type="submit" value="login" />
<p style="display:inline; padding:10px"></p>
</form>
{% endif %}
</div>
editForm.html:
{% load staticfiles %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="{% static " inventory/js/googleAPIJquery.js " %}" type="text/javascript"></script>
<div class="modal-dialog modal-md">
<div class="modal-content">
<form id="block_update_form" method='post' class="form" role="form" action='.'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Block {{ block.id }}</h4>
</div>
<div class="modal-body">{% csrf_token %} {{ form.non_field_errors }}
<div class="form-group">{% for field in form %}
<div class="form-group">{% if field.errors %}
<ul class="form-errors">{% for error in field.errors %}
<li><span class="fa fa-exclamation-triangle"></span> <strong>{{ error|escape }}</strong>
</li>{% endfor %}</ul>{% endif %} {{ field.label_tag }} {{ field }} {% if field.help_text %}
<div class="form-helptext">{{ field.help_text }}</div>{% endif %}</div>{% endfor %}</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
<input type="submit" class="btn btn-primary" value="save" style="margin-bottom: 5px;" />
</div>
</form>
<script>
jQuery('.modal-content .calendar').datepicker({
dateFormat: "yy-mm-dd"
});
var form_options = {
target: '#modal',
success: function() {}
}
$('#block_update_form').ajaxForm(form_options);
</script>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<td><a class="fa fa-pencil" data-toggle="modal" href="/inventory/{{ inventory.id }}/editblock/{{ block.id }}/" data-target="#modal" title="edit item" data-tooltip>Edit</a>
</td>
<div class="modal-dialog modal-md">
<div class="modal-content">
{% include 'editForm.html' with form=form %}
</div>
</div>
for your html:
http://getbootstrap.com/javascript/#modals
and:
{% include 'editForm.html' with form=form, any_parameters = any_parameters %}
example:
views.py:
context['form'] = CommentForm(request.POST or None)
in main.html:
{% include 'area/comment-form.html' with form=form %}
in comment-form.html:
<form method="post" class="form-horizontal" action='{% url 'add-comment' id=platform.id %}'>