I have a Django admin application that displays a jQuery dialog showing a page in an iframe inside the dialog that I show using:
function opendialog(page, dialog_title) {
var $dialog = $('#applied-assay')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
title: dialog_title,
autoOpen: false,
dialogClass: 'dialog_fixed,ui-widget-header',
modal: true,
draggable:true
});
$dialog.dialog('open');
}
function open_modal(url, title)
{
opendialog(url, title);
return false;
}
So far, so good. However the content of the iframe doesn't have any style:
The html template rendered inside the iframe looks like:
{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}
{% block extrahead %}
{{ block.super }}
{{ media.js }}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/start/jquery-ui.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}
<div class="modal-dialog">
<div class="modal-content">
<form role="form" action="{% url 'myapp:applied_assay' 1 %}" method="post">
<div class="modal-header">
<h3>Select applied assay type 1</h3>
</div>
<div class="modal-content">
{% csrf_token %}
<div class="panel panel-default">
<div class="panel-body">
{{ form.as_p }}
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-lg-12 text-right">
<input type="submit" class="btn btn-primary" name="submit" value="Accept">
<button type="button" class="btn btn-default" onclick="return close_modal()">
Cancel
</button>
</div>
</div>
</form>
</div>
</div>
Any ideas?
You need to also include stylesheets in the header of your iframe and the respective classes in the html tags. You've only included a jquery-ui css file, but haven't used any of its classes in the iframe elements.
Related
I am trying to get a button in a django view to display a model dialog to request delete confirmation of a list item. When I click the button I cannot get the modal dialog to display. Any ideas?
Dialog (included from Django Template)
<div
id="confirmModal"
class="modal fade"
tabindex="-1"
role="dialog"
caller-id=""
aria-labelledby="confirmModal"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body" id="modal-message">
Do you wish to proceed?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmButtonModal">Confirm</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
var buttons = document.querySelectorAll("[data-target='#confirmModal']");
for (const button of buttons) {
button.addEventListener("click", function(event) {
// find the modal and add the caller-id as an attribute
var modal = document.getElementById("confirmModal");
modal.setAttribute("caller-id", this.getAttribute("id"));
// extract texts from calling element and replace the modals texts with it
if ("message" in this.dataset) {
document.getElementById("modal-message").innerHTML = this.dataset.message;
};
if ("buttontext" in this.dataset) {
document.getElementById("confirmButtonModal").innerHTML = this.dataset.buttontext;
};
})
}
document.getElementById("confirmButtonModal").onclick = () => {
// when the Confirm Button in the modal is clicked
var button_clicked = event.target
var caller_id = button_clicked.closest("#confirmModal").getAttribute("caller-id");
var caller = document.getElementById(caller_id);
// open the url that was specified for the caller
window.location = caller.getAttribute("href");
};
});
</script>
base.html
<!DOCTYPE html>
<html>
<head>
{% load static %}
<title>Unisport</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
...
...
{% block content %}{% endblock content %}
...
...
</html>
Template : List of objects : Includes modal dialog html file
Includes modal dialog via {% include "web/product_confirm_delete-dialog.html" %}
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for object in object_list %}
{% include "web/product_confirm_delete-dialog.html" %}
<div class="col">
<div class="card">
<h5 class="card-header">{{object.name}}</h5>
<img class="card-img-top" src="{{object.image}}" alt="Card image">
<div class="card-body">
<p class="card-text">{{object.max_price}} {{object.currency.id}}</p>
<p class="card-text">{{object.min_price}} {{object.currency.id}}</p>
<p class="card-text">-{{object.discount_percentage}}%</p>
<p class="card-text">{{object.recommended_retail_price}} {{object.currency.id}}</p>
</div>
<div class="card-footer">
Info
Edit
<a
href="#confirmModal"
class="btn btn-primary"
data-toggle="modal"
data-target="#confirmModal"
id="product_{{object.id}}"
>
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
</div>
{% endblock content %}
Solved by using the correct tag to trigger the display of the modal dialog. I needed to use data-bs-toggle and data-bs-target for bootstrap 5. Previously, I was using data-toggle and data-target.
{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="row">
{% for object in object_list %}
{% include "unisport_web/product_confirm_delete-dialog.html" %}
<div class="col">
<div class="card">
<h5 class="card-header">{{object.name}}</h5>
<img class="card-img-top" src="{{object.image}}" alt="Card image">
<div class="card-body">
<p class="card-text">{{object.max_price}} {{object.currency.id}}</p>
<p class="card-text">{{object.min_price}} {{object.currency.id}}</p>
<p class="card-text">-{{object.discount_percentage}}%</p>
<p class="card-text">{{object.recommended_retail_price}} {{object.currency.id}}</p>
</div>
<div class="card-footer">
Info
Edit
<a
href="#confirmModal"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#confirmModal"
id="product_{{object.id}}"
>
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pagination">
<span class="page-links">
{% if page_obj.has_previous %}
previous
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
{% endif %}
</span>
</div>
</div>
{% endblock content %}
This is the template I've written
{% extends 'base.html' %}
{% load static %}
{% block body %}
<div class="row hide-on-mobile" style="height: 100vh">
<div class="col-auto p-5">
<img src="{% static 'logo.svg' %}" class="mb-5 hide-on-mobile" style="height: 84px"/>
{% block form %} {% endblock %}
</div>
<div class="col bg-brown p-5">
<div class="d-flex flex-column justify-content-between" style="height: 100%">
<h1 class="text-blue mb-3">It's always Ups<br>and Downs</h1>
<img src="{% static 'investing_illustration.svg' %}" class="auth-illustration"/>
</div>
</div>
</div>
<div class="hide-on-desktop" style="height: 100vh; position: relative">
<div class="d-flex flex-column bg-brown h-100 p-3 align-items-start">
<img src="{% static 'logo.svg' %}" class="mb-3 hide-on-desktop" style="height: 56px"/>
<p class="text-blue mb-3">It's always Ups<br>and Downs</p>
<img src="{% static 'investing_illustration.svg' %}" class="auth-illustration"/>
</div>
<div style="position: absolute; bottom: 0; z-index: 99; background: white; width: 100%">
<div class="d-flex flex-column p-4">
<p class="mb-4">Login</p>
{% block form %} {% endblock %}
</div>
</div>
</div>
{% endblock %}
I inherit this template in a page as follows:
{% extends 'auth_base.html' %}
{% block form %}
<p class="mb-4">Login</p>
<form class="pb-5">
<input type="text" class="form-control" name="email" placeholder="Enter your email">
<input type="password" class="form-control" name="password" placeholder="Enter your password">
<a class="text-blue">Forgot Password?</a>
<button type="submit" class="mt-3 btn btn-primary full-width">Login</button>
</form>
<div class="text-center">
<span>New Here? <a class="text-blue">Create an account</a></span>
</div>
{% endblock %}
The form block is used two times..because when I inherit the template I want to write only once..but display it in two different places in the same page. In this case, I've written different layouts for mobile and desktop show the user actually sees only once.
However, this code doesn't work and gives the following error:
django.template.exceptions.TemplateSyntaxError: 'block' tag with name 'form' appears more than once
How can I accomplish this?
It is possible to include partials multiple times. Partials work differently then blocks - not via inheritence, so you would have to change your template code a bit.
You would need to create a partial template for your form which would expect a certain context (the form probably), and you would include that template snippet twice in your main template:
<div class="d-flex flex-column p-4">
<p class="mb-4">Login</p>
{% include "_partials/login_form.html" %}
</div>
_partials/login_form.html would basically contain what you had now inside your form block.
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#include
EDIT: as someone else pointed out - the question on multiple blocks with the same name has already been addressed before: https://stackoverflow.com/a/6427336/8401179
I have a form in a url.
I want to load it in an existing page.
I'm following this tutorial https://www.abidibo.net/blog/2014/05/26/how-implement-modal-popup-django-forms-bootstrap/
This is the form template
{% load i18n widget_tweaks %}
<div class="modal-dialog modal-lg" role="document">
<form action="{% url 'flag_post' %}" method="post" id="flag-form" class="form">{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Report Post</h4>
</div>
<div class="modal-body">
{{ form.media }}
{% render_field form.reason class="form-control" %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save changes" />
</div>
</div><!-- /.modal-content -->
</form>
</div><!-- /.modal-dialog -->
<script>
var form_options = { target: '#modal', success: function(response) {} };
$('#flag-form').ajaxForm(form_options);
</script>
This is my link that is supposed to load the form
<a class="fa fa-pencil" data-toggle="modal" href="{% url 'flag_post' node.uid %}" data-target="#modal" title="edit item" data-tooltip></a> |
I have the following script tag embedded
<script src="http://malsup.github.com/jquery.form.js"></script>
When I call the url directly the form is displayed, but when I try clicking the button form is not loaded.
What is wrong with my code?
Is this the right way to load a form from an external URL?
I didn't have a modal placeholder.
Now I have
Report
Then at the bottom of the page
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
And it works! No JS and no other problems.
Now all I need to do is ajaxify my form submission.
Thanks #Sumeet Kumar
This link helped me
https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url
In my Django app i'm using bootstrap-datepicker. User chooses a date, then date is passed in Ajax post request to /check/ view, then sub_template is reloaded with retrieved data.
Everything works like a charm on desktop, but it seems like datepicker doesn't work on phones at all. I've tested it on Iphone 6s, android phone and windows phone(all default browsers). When i press date it just doesn't respond in any way.
Here is my main page html:
<div class="container">
<div class="row text-center">
<h2>Availability</h2>
</div>
<hr>
<div class="row text-center hidden-xs ">
</div>
<div class="row row-pad-30 text-center">
<div class="col-lg-1 md-hidden"></div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h3>1. Choose date</h3>
<form style="color: white;" class="form-date" role="form" action="" method="get">
{% csrf_token %}
<div class="form-group" id="datepicker">
<div></div>
<input data-date-format="YYYY-MM-DD" type="hidden" name="dt_due" id="dt_due" val="">
</div>
</form>
</div>
<div id="refresh-div" class="timedisplay">{% include 'booking/time.html' %}</div>
<div class="col-lg-1 md-hidden"></div>
</div>
</div>
sub page html:
<div class = "col-lg-6">
<h3 class = "h3-hour">2. Choose hour</h3>
<div class="row row-pad-20">
{% for time_list in availability_table %}
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{% for i in time_list %}
<button type="submit" class="fade-in-quick btn btn-lg btn-block btn-info btn-core" value="{{ forloop.counter0 }}" name="time" id="time">{{ i.0|date:'H:i' }} do {{ i.1|date:'H:i' }}</button>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
main page script:
$('#datepicker div').datepicker({
language:"pl",
startDate: "+1d"
}).on('changeDate', function(event) {
var date = event.format()
console.log(date);
$.ajax({
type:'POST',
url: '/check/',
data: {'date': date, 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()},
success: function(data) {
$('#refresh-div').html(data);
}
});
});
Any idea why it doesn't work?
So apparently this div:
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12"></div>
Was causing problems. When i just deleted all classes after col-lg-4(they are not necessary anyway) everything is working correctly.
I'm using https://github.com/dyve/django-bootstrap3 plugin for my project with following code
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="text-center">
<h1>{% block header_text %}{% endblock %}</h1>
<form method="post" class="form-inline">
{% csrf_token %}
Input: {% bootstrap_field form.input layout='inline' %}
Object: {% bootstrap_field form.object layout='inline' %}
<input type="submit" class="btn btn-xs btn-primary" value="Submit"/>
</form>
</div>
</div>
</div>
And get this fields as result How can i control width of them?
I tried to change it in .css file, but it only works with focus .form-control:focus {width: 320px}
Solved by addition "id": "input-form" to form widget and adjusting #input-form in .css file.