In my project I have many Buildings, and in the buildings.html I display each Building using a single image (big_image). What I want to do is load a modal every time the user clicks in a Building, this modal allows the user to see additional images of the building.
This would be very easy if I loaded each Building's modal when the user entered the page. But if I did that the page would take ages to load (because there are many Buildings), so my idea is to use jQuery's .innerHTML to append the modal html to the page when the user clicks on a Building, but when I do that the only code appended is
`{% for building in buildings %}{% if building.pk == 1(or whatever is the pk) %}{% endif %}{% endfor %}`
There might be an easier way to achieve that that I dont know
Here's my code:
buildings.js
function loadModal(objectPk){
document.getElementById("loadModal").innerHTML =
"{% for building in buildings %}{% if building.pk == "+objectPk+" %}
<div class="modal fade mymodal in " id="myModal{{ building.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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" id="myModalLabel">{{ building.name }}</h4>
</div>
<div class="modal-body">
<p>{{ building.short_description }}</p>
{% for i in building.images.all %}
<img src="{{ i.image.url }}" class="img-responsive">
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>{% endif %}{% endfor %}";
}
All of the above is in a single line.
buildings.html
<a data-toggle="modal" data-target="#myModal{{ building.pk }}" href="" onClick="JavaScript:loadModal({{ building.pk }});"></a>
<div id="loadModal"></div>
views.py just in case
class BuildingsModalView(generic.ListView):
template_name = 'info/buildings.html'
context_object_name = 'construction_list'
queryset = Residence.objects.all() #ignore this
def get_context_data(self, **kwargs):
context = super(BuildingsModalView, self).get_context_data(**kwargs)
context['building'] = Buildings.objects.all()
# And so on for more models
return context
You can use a little bit of javascript to change the values in the modal's html. In this example, I create a link for each building, with data attributes for the img, description, and name.
Then, I add a click listener to the class of the building link. When clicked, it accesses all of those data values and pops them into the correct spot of the modal.
<!-- Create a unique link for every building -->
{% for building in buildings %}
<a href="#"
class="building-link"
data-toggle="modal"
data-target="#building-modal"
data-img="{{ building.img.url }}"
data-description="{{ building.short_description }}"
data-name="{{ building.name }}">
{{ building.name }}
</a>
{% endfor %}
<!-- This is our blank modal, with ids for the values to be injected -->
<div class="modal fade mymodal in " id="building-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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" id="building-name"></h4>
</div>
<div class="modal-body">
<p id="building-description"></p>
<img id="building-img" src=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<!-- When a link is clicked, grab all the data values and pop them inro the modal -->
<script>
$('.building-link').click(function(){
$('#building-name').html($(this).data('name'));
$('#building-description').html($(this).data('description'));
$('#building-img').src($(this).data('img'));
});
</script>
Then only thing this doesn't do is do all of the building images. I would recommend just loading one to begin with and then setting up another endpoint to get all of the building images once one is selected.
Related
I have a for loop which creates multiple modal popups and its corresponding form inside the modal pop up. I am submitting the form via Ajax method so as to not have the page refresh. However i am facing the problem that if i have multiple forms only the first form gets submitted correctly. The subsequent forms will submit the first form's value. Currently i have put my javascript in the for loop after the end form tag between {% for form,post in zipped %} and {% endfor %}. My thinking was that when the value {{post.pk}} changes I will listen in on a different form because I have used a unique form id formy{{post.pk}} as the selector in the javascript. However it is not working.
My script is:
<script>
$('#formy{{post.pk}}').on("submit" , function(e){
e.preventDefault();
$.ajax({
type:"POST",
data:{
tag:$('#tag').val(),
author:$('#author').val(),
file_name:$("#file_name").val(),
file_path:$("#file_path").val(),
unique_id:$("#key").val(),
csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val(),
},
success:function(){
alert("UPDATED!!!!");
}
});
});
</script>
My html code is :
{% for form, post in zipped %}
<tr>
<td><img src={{post.file_path}} style="width: 300px;"></td>
<td>{{post.tag}} {{post.pk}}</td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal{{post.pk}}"> Edit Tag </button>
</td>
<form id="formy{{post.pk}}">
{% csrf_token %}
<div class="modal fade" id="myModal{{post.pk}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Tags</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{form|crispy}} {{post.pk}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
{% endfor %}
I am doing a Django Blog Project and it fetch all Blogs from the Database and show Blog Title in User Profile only. I want to create Bootstrap Modal for each Blog that is shown in the profile. Whenever a User click on a Title, the Modal will appear with Details.
{% for blog in blogs.all %}
<div class="card mb-4 shadow-sm ">
<p class="card-text "><h2>{{ blog.title }}</h2></p>
<div class="card-body">
<div class="btn-group">
<!-- Open a Modal for the blog -->
<!-- Button To Implement the Modal-->
<button id = "modalToggle" type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#modal">View More</button>
<!-- Modal -->
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ blog.title }}</h4>
</div>
<div class="modal-body">
<p>{{ blog.body }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here all Blogs are showing the Modal of the first one. I cannot create multiple modals for each Blog.
The id attribute of an html element should be unique and appear only on one element in the html document. The problem you're encountering is likely because you're creating an element with id="modal" for each blog. You can fix this with:
<button id = "modalToggle" type="button" class="btn btn-sm btn-outline-secondary"
data-toggle="modal" data-target="#modal-blog-{{blog.pk}}">View More</button>
<!-- Modal -->
<div class="modal fade" id="modal-blog-{{blog.pk}}" role="dialog">
By using a unique string for the id via including the blog pk the buttons should trigger their respective blog.
on my website after clicking button I want to display new form which will allow users to add opinion. Im not sure in which way I should add jquery script to my project. I tried to it on simple html site and it works, but I couldnt do the same with flask app. Here is my code:
% extends "bootstrap/base.html" %}
{% block content %}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com ajax/libs/jquery/1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#btnclick").click(function () {
$("#divpopup").dialog({
title:"Dodaj opinie",
width: 430,
height: 200,
modal:true,
buttons: {
Close:
function(){
$(this).dialog('close');
}
}
});
});
})
<div id="divpopup" style="display: none">
Here will be form
</div>
<button type="button" id="btnclick">Add opinion</button>
{% endblock %}
And after clicking on the button nothing happend. I use bootstrap and jinja2, so should I use other contents to add scripts?
You might consider using a Bootstrap Modal for this as you said you're using Bootstrap in the project.
This is a very simple example copied from their website:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
INSERT 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">Save changes</button>
</div>
</div>
</div>
</div>
If you're using Bootstrap 4 you should be able to copy this right in and change the IDs to match what you want.
Link to documentation: https://getbootstrap.com/docs/4.0/components/modal/
I'm trying to work out how to get data from django into a bootstrap modal. I'm quite new to django and i've only just started JS.
I have a django view that queries for a list of users via ldap for a list of attributes. For example:
attributes = ['cn', 'givenName', 'displayName', 'sAMAccountName', 'userPrincipalName', 'mail', 'uidNumber', 'lastLogon']
def ad_users(request):
users = get_ad_users('ou=TestUsers,dc=testdomain,dc=org', '(objectCategory=person)', attributes)
return render(request, 'users.html', {'ad_users': users})
I then display it on a page using a table.
Using a template for loop in django I loop over the elements to generate the table rows. E.g. (ignoring styling and attributes etc).
{% for user in ad_users %}
to generate each <tr>
and each <td> references an item.
{{ user.displayName }} {{ user.mail }} etc.
However at the end of the row I want to put a "view" button that displays a pop up modal with all the user attriubtes for the user of that row (not just what is displayed in the table).
I really have no idea how to achieve this, any help would be appreciated.
this goes for the modal in every tr:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#{% user.id %}">Open Modal</button>
<div class="modal fade" id="{% user.id %}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can then put whatever you want inside the modal for each user
I am trying to create a modal pop up and include an AJAX call inside the modal body.
The script, included AJAX. works fine.
Here is the button which calls the modal (I am working with TWIG templates)
<button class="btn btn-danger" data-id="{{ product.id }}">Delete</button>
This is the jQuery script:
$(document).ready(function() {
$('[data-id]').each(function() {
var $this = $(this),
id = $this.data('id');
$this.on('click', function(event) {
event.preventDefault();
$.post('{{ path('dashboard_ajax ') }}', {
'id': id
},
function(details) {
var $modal = $(details);
$('#confirm-delete').remove();
$('body').append($modal);
$modal.modal();
}
);
})
});
});
And this is the page with the modal
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" role="alert">
<p>Do you really want to delete <b>{{ product.name }}?</b></p>
</div>
<img src="{{ asset('uploads/product_images/') }}{{ product.image }}" style="width: 240px;" class="img-responsive thumbnail" />
</div>
<div class="modal-footer">
<button type="button" id="misha" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</div>
</div>
Now, If click on the delete button I would like remove the selected item using the related page (example: delete.php)
One way you can do is by attaching a click hander and setting the location like this
window.location.href = 'delete.php';
Or something like this
<a class="btn btn-danger btn-ok" href="delete.php">Delete</a>
If you have the product ID, that be sent to delete.php like this
<a class="btn btn-danger btn-ok" href="delete.php?ID={{ product.id }}">Delete</a>