In a Djano project of mine, I have a JS file inside /project/static/js/. It needs access to a files stored at /project/templates/. I'm unable to access this location from the js file.
Can someone suggest a work around (short of keeping duplicates of the said files in the JS folder). I'd like to avoid duplication (since it doubles my maintenance down the road)
Task specifics: I have some HTML templates that display instructions. The JS I've written simply takes the same instruction text and displays it as text on a dynamic popup.
Note: The main wrinkle is that a non-JS fallback must exist for any JS solution. Some of the users of this project emanate from a forward proxy that strips all <script> tags. Think Unobtrusive JS.
There is no need to access projects/templates from the static folder.
You have several options how to display HTML content, like instructions, in a popup.
Here's an outline of 2 ways to do so:
1st Option: Load all content at once
This approach loads everything in one go and the js only changes the visibility of the instruction pop-up. If you are using Bootstrap then modal is what will make your life easier. You do not even need to write any js altogether. With Bootstrap this would look something like:
<!-- main_template.html -->
<!-- Don't forget to load the bootstrap library here -->
....
<!-- icon to trigger the popup -->
<a data-toggle="modal" data-target="#InstructionModal">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Show Instructions
</a>
....
<!-- the bootstrap modal -->
<div class="modal fade" id="InstructionModal" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Instructions</h4>
</div>
<div class="modal-body">
{% include 'instruction.html' %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Then the instructions:
<!-- instruction.html -->
<p>
This is an instruction - You must follow it!
</p>
2nd Option: Load additional content on request using ajax
In this case you would not load the additional HTML content in the beginning, but serve it only upon request, i.e. if someone clicks on the Show Instructions icon. Note that you'll need jQuery for this to work.
Here your instructions get a view (don't forget to update your urls.py as well):
# view.py
def get_instructions(request):
return render(request, 'instruction.html')
The instructions template is still the same:
<!-- instruction.html -->
<p>
This is an instruction - You must follow it!
</p>
The js:
<!-- get_instructions.js -->
....
<script>
$("#InstroductionModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>
The the main template:
<!-- main_template.html -->
<!-- Don't forget to load get_instructions.js -->
....
<!-- icon to trigger the popup -->
<a href="{% url 'get_instructions' %}" data-remote="false" data-toggle="modal" data-target="#InstructionModal">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Show Instructions
</a>
<!-- the bootstrap modal -->
<div class="modal fade" id="InstructionModal" 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-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Instructions</h4>
</div>
<div class="modal-body">
<p> Instructions will follow </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
Hopefully one of those ways work for you. Unfortunately, I don't have a django project setup, so this code is untested.
Related
Good afternoon all,
Bought an old tablet for a demo of an app.
It looks like bootstrap is not working on some elements such modals, tabs. (its working fine on laptop and mobile). The tablet is from 2016.
Not sure what information to give at this stage, so feel free to ask any question.
Any pointers on how to fix this?
EDIT
Browser Used - Chrome
Does it work with the same browser on another device - Yes
Bootstrap version used - 5.
Bootstrap 4 seem to work on the tablet, ideally if we could find a way to make the tablet compatible with Bootstrap 5 it would be a lot better.
MRE
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>My Procurement | {% block title %}{% endblock %}</title>
</head>
<body>
…
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
…
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body>
</body>
I am working on an application that has a page with a table that is a list of users. Each user has a button which pops up a modal that does something. I am trying to create the modal that will get the user information when the button in clicked, additionally, I need in that modal some logic based on the user information and some more data. I am thinking that it makes sense to create a separate view for it but since each view must be on a different url, the concept of the modal does not makes sense (for me), because I want it to be on the same url.
Is it possible to have a modal with a different view that will have a separate logic? Since the modal is included in the template and it is basically just one template, then, can one template have 2 views?
What is the best way to implement the modal using django? And how to pass data to it, I need the data from the row that was selected + some more data from db. I have the data from the context but manipulating that using JQuery for me is a bad idea - because I am using a python session on the backend that communicates with another api, so when user clickes the modal save button, a python request needs to be done, this means I need a view for it.
Here is my try
Modal
{% block modal %}
{% load static %}
{% load authorization_tags %}
<!-- Modal -->
<div class="modal fade" id="{{modal_id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="row">
<div class="col-lg-5">
<img class="d-block w-100"
src="{% static 'app/assets/images/security-shield1.png' %}"
alt="First slide">
Use access control to deauthorize user
</div>
<div class="col-lg-7">
<h2 class="h2-responsive product-name">
<strong>{{user.real_name}}</strong>
</h2>
<h4 class="h4-responsive">
<span class="green-text">
{{user.username}}
</span>
</span>
</h4>
<div class="accordion md-accordion" id="accordion1" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="heading2">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" aria-expanded="true"
aria-controls="collapse1">
<h5 class="mb-0">
Current Authorizations <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordion1">
<div class="card-body">
{% for right in people_rights|user_active_rights:user.id %}
{{right.room}}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="accordion md-accordion" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="heading2">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse2" aria-expanded="true"
aria-controls="collapse2">
<h5 class="mb-0">
Available Authorizations <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<div id="collapse2" class="collapse show" role="tabpanel" aria-labelledby="heading2"
data-parent="#accordion2">
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="text-center">
<button type="button" class="btn btn-lg" data-dismiss="modal"><span>Close</span></button>
<button class="btn btn-lg"><span>Authorize</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock modal %}
a piece of table and the modal included in the same template
{% include 'app/admin/users/user_authorize.html' with modal_id="authModal" user=row areas=areas rooms=rooms people_rights=people_rights %}
{%if row.empno %}
<td class="txt-oflo">{{ row.empno }}</td>
{% else %}
<td class="txt-oflo">-</td>
{% endif %}
<td>
{% with "#"|add:row.id as buttonId %}
<button id={{buttonId}} class="btn btn-lg" data-toggle="modal" data-target="#authModal">
<span>Authorize</span>
</button>
{% endwith %}
</td>
</tr>
You can try the following steps to solve the issue.
Create a separate view for the modal on a separate url.
Take the modal data out of this html file and place it in another html file. The empty modal in the original html should look something like this.
<div id="SampleTable" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">sample title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="sample_datatable">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Render that new html from the new view that was created. The ajax request that will be activated from the button that gives us the modal table might look something like this.
#app.route('/sample_data', methods=['GET', 'POST'])
def modal_table():
try:
data = request.args.get('arg')
database_data = Table.query.filter(Table.data == data).all()
result_dict = [u.__dict__ for u in database_data]
except Exception as e:
traceback.print_exc()
return render_template('modal_table.html', data=enumerate(result_dict))
The button in the original html that results in the modal table should be configured in a way using ajax requests that it renders data from the new html into the old modal data like this.
function get_sample_data() {
$.ajax({
url:"/sample_data", //the page containing python script
type: "GET", //request type,
data: {},
async:true,
beforeSend: function(){
$('#sample_datatable').html('Loading..');
},
success:function(result){
$('#sample_datatable').html(result);
}
});
}
You can call this javascript function from the button that is supposed to show the modal table.
I have a very small form in a bootstrap modal including just two fields: a TextAreaField and a Submit button. My TextAreField is DataRequired.
On top of that this field uses CKEditor (similar to quillsJS) to make the text area WYSIWYG.
Problem is that the form submits even when no data has been entered, and reloads the parent page.
I would very much like to know how to prevent that form submission and raise the validation error when no data has been entered.
I would like to get WTForm validation and not the browser's (which anyway doesn't work either for this case).
I should also mention, in case it matters, that my modal is a partial file (jinja).
My trigger for the modal is this, living in perfume-cursor.html
Edit
And this is my modal (in a partial file perfume-modals.html)
<div class="modal fade" id="reviewPerfumeModal" tabindex="-1" role="dialog" aria-labelledby="reviewPerfumeModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteUserModal">Please Leave a Review</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method=POST action="{{ url_for('reviews.review_perfume', perfume_id=perfume._id) }}" id="form-review">
<fieldset class="form-group">
<div class="form-group">
{{ form.review(class="form-control form-control-md", placeholder="Review", id="description") }}
</div>
</fieldset>
<div class="modal-footer">
<div class="form-group">
{{ form.submit(class="btn btn-primary") }}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The id="description" is what CKEditor uses to render that text area field as a WYSIWYG editor, btw.
I would really appreciate a lot any help on this!!
Thanks in advance!
Update:
In case it helps this is my form class, although I'm pretty sure the issue is modal related and not WTF related:
class AddReviewForm(FlaskForm):
review = TextAreaField("Review", validators=[DataRequired()])
submit = SubmitField("Post Review")
Does anyone face this issue.. I have a very strange behavior with Flask and Bootstrap modal. On my dev server http://127.0.0.1:5000/ I have a modal which appears after user is typing wrong login credentials:
HTML code in Index page:
<div class="modal fade" id="ExistsModal" 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">This email already exists!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
If you have forgotten your password, .......
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>
But on my production 'http://flask-env.xxx.us-west-1.elasticbeanstalk.com I can see the modal only if I manually refresh a page!
For return function I'm using
return redirect(url_for('index',_anchor='login')) and in index() I passed arguments!
{% if email_exists %}
<script>
$("#ExistsModal").modal('show');
</script>
{% endif %}
My question is - why modal show up after manual refresh on production? But on dev its works fine!
I have a series of 6 modals that are created through a flask/jinja2 frame work loop and 1 modal that is an example outside of the loop. The modals all populate and populate correctly when looking at the page source. The example modal that is outside the loop shows without issue, however the other 6 modals will not fire.
https://www.sfiltrowani.pl/filter_instructions is the live site with the problem.
https://github.com/rscales02/sfiltrowani is the full code git repository.
This is for a flask app run on AWS elastic beanstalk. I was able to get the example modal to show by defining modal id and data target manually, those were the only changes I made from a copy/paste of the original modal code and original link to modals.
example link identical links from A-F
{{ _('(instrukcja photo F)') }}
modal loop to create image modals for instructions
{% for image in images %}
<!-- Modal -->
<div class="modal fade" id="{{ image }}" 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">
<img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
Expected results a modal that fires for each photo in my instructions. Current results only example modal will show.
[Edit]
I am new to the stack, edited to show the 3 lines of code that were hidden, due to lack of indentation. Thanks and sorry!
Your link does not point to the modal to show .
The modal needs an ID that is referenced by data-target
{{ _('(instrukcja photo F)') }}
<div class="modal-dialog" id="this-modal-id">
<!-- 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">
<img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I fixed it! It would appear that modal id's are sensitive to specific formatting and not just random strings. Previous version that did not work had id and data-targets of 'instrukcja*.jpg' when '.jpg' was removed, the modals function perfectly.