Django widget tweaks popover won't move with content - django

I'm using django widget tweaks to render a form field that is required. It all works fine, if the field is blank, I see a cute little popover that says field is required and all that, but if I scroll the page (the form is a little big), the popover won't move with the form field. It'll stay put and that is not good.
Here's my code:
{% load widget_tweaks %}
{{form.order_number.label}}
{% render_field form.order_number required="true" %}
Also, this is happening only on Firefox, not on Chrome. I'm on Firefox 57.0. Here's a screenshot to help. In Pic1, you'll see it is supposed to be where I like it without scrolling. In Pic2, it has gone way upwards to the top of the div when I scroll up.
Could someone please explain why this is happening and how I can fix it?

This is the behaviour of the browser when an input has the required attribute, so you can't do much about it (changing the browser's behaviour itself).
What you can do is override the default's browser with some javascript validation library, which let's you customize the type and looks of the messages as you need.
For example http://www.formvalidator.net/

Related

Django admin add related object doesn't open popup window?

The django-admin app is supposed to open a popup window when I try to create a related object. For example, clicking the green plus button here:
Should bring a new pop-up window, where I can create a new related (in this case Session) object. However, when I click the green plus button, the object create opens up in the same window, instead of a pop-up window. This is a problem, because if a user starts to create a primary object, then half-way through, clicks the green plus, he will lose all the progress on the primary object. This means that the green plus is unusable.
I have no idea why this is happening. I understand that I am not providing a minimum example of the problem, because I haven't been able to construct one. Right now I want to diagnose the problem. Any ideas of how I can diagnose this? And fix it?
I can provide any information you think is necessary.
Related: Django admin popup links are broken. But he's using Grappelli, which I am not. I am using the default django admin interface.
I am using Django version 1.8.4.
UPDATE: The popups work fine with manage.py runserver. The problem only appears with the deployed version under apache. I hope this narrows down the issue.
On google groups: https://groups.google.com/forum/#!topic/django-users/awYelJjFjHk.
I wasn't able to produce a minimal example of what was going on, but it is fixed now. Essentially, I did the following:
Upgraded to Django 1.8.6 .
Ran python manage.py collectstatic (as suggested in https://community.webfaction.com/questions/18544/there-is-not-popup-window-for-one-to-many-relationship-with-djangos-admin-v18)
So in the end I'm not sure what the issue was. I hope this is useful to someone else.
If someone else comes up with a more complete answer, which involves a minimal example and with an explanation of what was going on, I'll be glad to change the accepter answer.
This appears to be a reproducible error in 1.9.3. Testing it myself I setup a new project using the latest Django (1.9.3) and ran into the same error. Below is the fix. It seems to also work with 1.9.1 I will report to Django team now.
+++ b/contrib/admin/templates/admin/related_widget_wrapper.html
## -10,7 +10,7 ##
</a>
{% endif %}
{% if can_add_related %}
- <a class="related-widget-wrapper-link add-related" id="add_id_{{ name }}"
+ <a class="related-widget-wrapper-link add-another" id="add_id_{{ name }}"
href="{{ add_related_url }}?{{ url_params }}"
title="{% blocktrans %}Add another {{ model }}{% endblocktrans %}">
<img src="{% static 'admin/img/icon-addlink.svg' %}" alt="{% trans 'Add' %}"/>

Recaptcha not rendering

This should be totaly simple, but I guess I must be missing something..
I put this in the html body, before the form:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Then inside a form I have this recaptcha div:
...
<form action="" method="post">
<div class="g-recaptcha" data-sitekey="[MY_API_KEY]"></div>
...
When the page loads, there's no recaptcha and also firebug's console doesn't output anything. What could be wrong?
EDIT: Now it actually works sometimes, but I have to refresh the page, but it's totally random if it works or not. This is really strange behaviour.
The reCAPTCHA page itself says to put the script tag inside the head tag, so it should load before everything else. Also, check if you have two script tags...wink
Try removing the async and defer attributes from your script tag and place it somewhere above your form.
<script src='https://www.google.com/recaptcha/api.js'></script>
This will ensure that your script is run before your form is parsed.
the api.js is only ~532 bytes (minified) and shouldn't add much overhead to your page loading.
Also I'm not sure if this question is related to django in anyway. I suggest you remove that tag from your question :)
Hope this helps and best of luck.
i got similar problem with chart.js on my website.
If, it is same case with me (when reload page works), i think js file doesn't downloaded until your html rendering.
check safari or chrome resource download time.
if your screen is ready and recapcha.js is until downloading, you should add set timeout or etc to wait for your javascript code.
i tried like this..
setTimeout(function(){
Chart.defaults.global.tooltipFontSize= 10;
Chart.defaults.global.scaleShowLabels=false;
}, 10)

How to make the webpage shows "loading" and change content afterwards?

I use the following page as example:
http://isbndb.com/book/the_new_public_health_second_edition
You can see the box "Loading Prices" when you first load the page, and it will change afterwards to show relevant information on the same box as below:
I am trying to building some price comparison engine using django, and I think I need to inform user that the page is now loading, rather than letting user to wait in front of a blank screen.
Can anyone tell me know to do it?
In your HTML
<div id="lazyLoad">
<img src="\path\to\loading.gif">
</div>
On successful ajax call replace the innerHTML of #lazyLoad with the formatted result.

Django: Is there any way to delay the loading and rendering of included template?

Say, I have the following template snippet:
<div class="endless_page_template">
{% include page_template %}
</div>
The snippet is within a tab, which is behind other tabs when the page is first loaded and its content won't show until user clicks on the tab.
Question: Is there any way to delay the loading and rendering of page_template until a specific event is triggered at the client-side?
Change that template to have a little AJAX loader graphic as the contents. Then create a new view to load page_template from an AJAX request that is triggered on the tab's click event.
I have django-partial-page application with middleware that delays blocks rendering and also has Javascript that allows loading of those blocks. It's not intended exactly for tabbed forms, but with a little of code one can make it.
Run the example project on your machine and see how it handles delayed_block tag.

How to load objects from model on server start up?

I store my sites navigation menu in database. I want to load all objects in the list once I launch my server, but I haven’t got idea how to do it. I really need to do it, because it will be problem in future to load data from database in views to display menu.
I tried to put loading code in settings.py, but there was an error, and in views after imports, but there was no effect.
I think you need Template context processors.
Here is a nice tutorial by James Bennett on that:
http://www.b-list.org/weblog/2006/jun/14/django-tips-template-context-processors/
Well, I'm very new to django, and maybe I'm wrong, but I think you are looking for something like caching. Read the docs, and decide whether is it fits you or not.
You can cache just a part of your view:
https://docs.djangoproject.com/en/1.3/topics/cache/#template-fragment-caching
surround your navigation bar like this:
{% cache 500 navbar %}
... put your navbar code
{% endcache %}
and ensure to have
{% load cache %}
at the top of your template or the base template.