Picture 1 Picture 2 Picture 3 I am building a page in Django that first renders a blank page with a loading picture, and then calls an Ajax get function to one of my views. Once my Ajax get function succeeds, it is supposed to load one of my HTML files. I get a 404 error saying that the template cannot be found, but the template is in the same folder as my other file. Is my file path wrong?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
{% extends "stocks_sites/base.html" %}
<!-- The loading image -->
{% block loader %}
<div id="loading">
<p>Loading</p>
</div>
<div id="articles">
</div>
<script>
// AJAX call when page has loaded
$(document).ready(function(){
$.ajax({
type: "GET",
url: "{% url 'stocks_sites:get_news_articles' %}",
success: function(response) {
const news_articles = response;
const posts = news_articles.posts;
const search = news_articles.search;
document.getElementById("loading").style.display = "none";
$("#articles").load("news_articles.html");
}
});
});
</script>
{% endblock loader %}
Related
I try to minify partial HTML in which I minify some JS using terser (using a jsmin filter as showed in 11ty docs):
<!doctype html>
<html lang="fr"><head><meta charset="utf-8"><title></title></head>
{% set html %}
<body>
<div class="foo">
Bar
</div>
<script>{% set js %}
var foo = 'foo',
bar = 'bar';
{% endset %}{{ js | jsmin | safe }}</script>
{% endset %}
{{ html | htmlmin | safe }}
</body>
</html>
But since the terser process is asynchronous, it throws an error in 11ty (callback is not a function, and <script>[object Promise]</script> in the generated file).
Same problem if I try to minify all the HTML using an 11ty transform (as suggested in their docs: Minify HTML Output – and removing all the {% set html %} / {{ html | … }} tags): it throws some similar Promise errors (Having trouble writing template … Cannot read properties of undefined … at async Promise.all)
Problem solved if I move the script part outside of the Nunjucks set declaration:
<!doctype html>
<html lang="fr"><head><meta charset="utf-8"><title></title></head>
{% set html %}
<body>
<div class="foo">
Bar
</div>
{% endset %}
{{ html | htmlmin | safe }}
<script>{% set js %}
var foo = 'foo',
bar = 'bar';
{% endset %}{{ js | jsmin | safe }}</script>
</body>
</html>
But that's not what I want.
Trying to make terser synchronous seems to need some more npm packages so I'm hoping there's an easier way before trying it.
Edit: tried to use html-minifier-terser instead of html-minifier, with this code for the htmlmin filter:
const TerserHTML = require('html-minifier-terser');
…
eleventyConfig.addNunjucksAsyncFilter('htmlmin', async function(code, callback) {
try {
let minified = await TerserHTML.minify(code, {
removeComments: true,
collapseWhitespace: true
});
callback(null, minified);
} catch (err) {
console.error('Terser HTML error: ', err);
callback(null, code);
}
});
→ same issue
I created an environment using pycharm & installed adminlte by git clone from https://github.com/app-generator/django-dashboard-adminlte.git. And installed adminlte3 , django3.1 & all requirements. Then run python manage.py runserver and registered a new user & was able to login ,view all pages, added new link to a html page. But I am unable to add view with jsonresponse to a button click on new page, geting Error 500 - Server Error.
My new html page is
{% extends "layouts/base.html" %}
{% block title %} Layout Boxed {% endblock %}
<!-- Element injected in the BODY element -->
{% block body_class %} sidebar-mini layout-boxed {% endblock body_class %}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
<link rel="stylesheet" href="/static/assets/css/mapstyle.css">
<link rel="stylesheet" href="/static/assets/js/pages/gis/dist/map.css">
<style>
.map {
margin: 0;
padding: 0;
width: 900px;
height: 500px;
background:white !important;
border:1px solid #ccc;
}
</style>
{% endblock stylesheets %}
{% block content %}
<div class="content-wrapper">
<div id="lyrDiv"></div>
<div id="map" class="map"></div>
<button id="search">Search</button>
</div>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<!-- jQuery -->
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/assets/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/assets/js/demo.js"></script>
<script src="/static/assets/js/pages/map.js"></script>
<script src="/static/assets/js/pages/search.js"></script>
{% endblock javascripts %}
search.js
$( "#search" ).click(function() {
$.get('/search/',{'csrfmiddlewaretoken':csrftoken},function(data){
alert(data); // here getting Error 500 - Server Error
});
});
I added below line to /django-dashboard-adminlte/app/urls.py
re_path(r'^search/$', search.spatial_srch, name='search'),
and search.py
from app.models import *
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
#csrf_exempt
def spatial_srch(request):
data= Demotable.objects.all()
searchArr = []
output = {}
for c in data:
searchArr.append({'type': 'Feature', 'properties': {'id':c.id,'name': str(c.name)},'geometry': {'type': 'Point', 'coordinates': [c.the_geom.x, c.the_geom.y]}})
output = {'type': 'FeatureCollection', 'features': searchArr}
return JsonResponse(output)
When I click on the 'Serach' button the request is not going to the view search.py What is wrong in my code ? what configuration did I miss?
The post shows
The Error 500 shows only adminlte Error page. Nothing more
The problem is in the (not so nice) way they generate the error. It's anti-pattern hell there, but in short it means there's an except thrown in either:
finding the template
loading the template
or rendering the template
and they catch it and don't let you see what happened. Not very nice code and you're have to modify that file to even begin debugging it:
#login_required(login_url="/login/")
def pages(request):
context = {}
# All resource paths end in .html.
# Pick out the html file name from the url. And load that template.
try:
load_template = request.path.split('/')[-1]
html_template = loader.get_template( load_template )
return HttpResponse(html_template.render(context, request))
except template.TemplateDoesNotExist:
html_template = loader.get_template( 'page-404.html' )
return HttpResponse(html_template.render(context, request))
# Remove or comment these lines:
#except:
#
# html_template = loader.get_template( 'page-500.html' )
# return HttpResponse(html_template.render(context, request))
Also I'm not sure this the specific spot where the error is generated, they might be doing similar things in other places.
Edit
This is very .... unprofessional code:
# Matches any html file
re_path(r'^.*\.*', views.pages, name='pages'),
No, it doesn't not match any "html" file - it matches everything cause they don't get regular expressions:
^ - start of string
.* - anything or nothing
\.* - >>>zero<<< or more dots
Result: \.* is ignored as it is irrelevant so it matches everything and if you placed your re_path below it, it will never be consulted, because Django uses first match wins approach.
So your url matches theirs, which then routes it to pages view:
load_template = request.path.split('/')[-1]
Since request.path is '/search/', '/search/'.split('/')[-1] gives the empty string and that creates your problem.
I highly suggest fixing their url path:
# Matches any html file
re_path(r'\.html$', views.pages, name='pages'),
Or put your re_path above theirs.
#app.route('/')
def index():
users = [[1],[2],[3]]
return render_template('index.html', users=users)
#app.route('/update', methods=['GET', 'POST'])
def update():
print(' post received ')
if request.method == 'POST':
print(request.form['idval']
return jsonify({'result': 'success'})
and this is my simple html
{% block body %}
<body>
{% for user in users %}
<td id='position{{user[0]}}' class='updateposition'></td>
<td id='amount{{user[0]}}' class='updateamount'></td>
{% endfor %}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
{% endblock %}
and here's my app.js file within static folder which contains the jquery
$(document).ready(function() {
setInterval(ajaxCall, 1000);
function ajaxCall(){
var positionIds = Array.prototype.slice.call(document.querySelectorAll('.updatecurrposition')).map(function ( element ) { return element.id;});
var amountIds = Array.prototype.slice.call(document.querySelectorAll('.updatepositionamount')).map(function ( element ) {return element.id;});
console.log(positionIds[0])
for (i = 0; i < positionIds.length; i++){
req = $.ajax({
url : '/update',
type : 'POST',
data : {idval : positionIds[i]}
});
}
}
and this example was taken from
https://github.com/PrettyPrinted/youtube_video_code/tree/master/2017/03/27/Using%20jQuery%20to%20Update%20a%20Page%20Without%20Refresh%20(Part%201%20of%202)/ajax_without_update
I've literally copied every single tutorials online and tried to implement it in my own (and most of the tutorials themselves fail in my computer for some reason)
and it just seems it can't get the data. I get a proper initial 200 response to get the html template but when the POST request does work, it only shows 304 redirect message, but nothing gets printed in the console
this perhaps seems to be the reason when I try to update the value upon receiving the data from the flask server, nothing happens. i.e.
req.done(function(data){
$('#'+positionIds[i]).text(data.result);
});
adding this right after req = $.ajax seems to change nothing
Does changing the td tags to something like p work? From tests I think that empty td tags aren't generated. I changed the tags and it was printing (to the console) successfully.
I have developed an app on Google App Engine in Python37 & Flask on the Standard Environment. I have the following file as the index.html for authentication. I have configured the Firebase authentication app to include Google, Email and Facebook authentication. However, the widget only shows Google and Email. None of the other implementations of the Firebase Authentication-UI returns the Token that can be verified in python main.py app.
index.html - I have the correct Firebase config values in my real html file
<!doctype html>
<html>
<head>
<title>Myapp</title>
<link rel="stylesheet" href="/static/bulma.min.css">
<script defer src="/static/all.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<MESSAGING_SENDER_ID>"
};
firebase.initializeApp(config);
</script>
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See https://console.firebase.google.com > Overview > Add Firebase to your web app.";
console.log(msg);
alert(msg);
}
</script>
<!-- [START gae_python37_auth_include_firebaseui] -->
<script src="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.6.2/firebaseui.css">
<!-- [END gae_python37_auth_include_firebaseui] -->
<script src="{{ url_for('static', filename='script.js') }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<br><br><br>
<div class="title is-4 has-text-centered">
<div>
Welcome to Myapp
</div>
</div>
<div class="title is-5 has-text-centered">Myapp</div>
<!-- [START gae_python37_auth_firebase_html] -->
<div id="firebaseui-auth-container"></div>
<button id="sign-out" hidden=true>Sing out</button>
<div id="login-info" hidden=true>
</div>
<!-- [END gae_python37_auth_firebase_html] -->
<!-- Footer Section -->
</body>
</html>
main.py
id_token = request.cookies.get("token")
claims = google.oauth2.id_token.verify_firebase_token(
id_token, firebase_request_adapter)
See below the implementation I did as per this documentation that #Ajordat has referred to. I get a an empty id_token error - Illegal ID token provided: None. ID token must be a non-empty string
enter image description here
Here is the index.html page
<!doctype html>
<html>
<head>
<title>Datastore and Firebase Auth Example</title>
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<MESSAGING_SENDER_ID>"
};
firebase.initializeApp(config);
</script>
<script>
var uiConfig = {
callbacks: {
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
// User successfully signed in.
// Return type determines whether we continue the redirect automatically
// or whether we leave that to developer to handle.
return true;
},
uiShown: function() {
// The widget is rendered.
// Hide the loader.
document.getElementById('loader').style.display = 'none';
}
},
// Will use popup for IDP Providers sign-in flow instead of the default, redirect.
signInFlow: 'popup',
signInSuccessUrl: '/',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
// Terms of service url.
tosUrl: '<your-tos-url>',
// Privacy policy url.
privacyPolicyUrl: '<your-privacy-policy-url>'
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<h1>Datastore and Firebase Auth Example</h1>
<!-- [START gae_python37_auth_firebase_html] -->
<div id="firebaseui-auth-container"></div>
<button id="sign-out" hidden=true>Sign Out</button>
<div id="login-info" hidden=true>
<h2>Login info:</h2>
{% if user_data %}
<dl>
<dt>Name</dt><dd>{{ user_data['name'] }}</dd>
<dt>Email</dt><dd>{{ user_data['email'] }}</dd>
<dt>Last 10 visits</dt><dd>
{% for time in times %}
<p>{{ time['timestamp'] }}</p>
{% endfor %} </dd>
</dl>
{% elif error_message %}
<p>Error: {{ error_message }}</p>
{% endif %}
</div>
User id :{{ uid }}
<br>
User: {{ user.email }}
<br>
Error: {{ error_message }}
<br><br><br>
{{ id_token }}
<!-- [END gae_python37_auth_firebase_html] -->
</body>
</html>
The main.py code for verifying the id_token
...
default_app = firebase_admin.initialize_app()
#app.route('/')
def root():
# Verify Firebase auth.
id_token = request.cookies.get("token")
error_message = ''
uid = None
user = None
# if id_token:
try:
decoded_token = auth.verify_id_token(id_token)
uid = decoded_token['uid']
user = auth.get_user(uid)
except ValueError as exc:
error_message = str(exc)
return render_template(
'index.html',
uid=uid, user=user, error_message = error_message)
The solution was to get the token from authResult.user and set it as a cookie so it can later be retrieved from the server. See the code attached:
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
var user = authResult.user;
var credential = authResult.credential;
var isNewUser = authResult.additionalUserInfo.isNewUser;
var providerId = authResult.additionalUserInfo.providerId;
var operationType = authResult.operationType;
if (user) {
user.getIdToken().then(function (accessToken) {
console.log("token retrieved: " + accessToken);
document.cookie = "token=" + accessToken + "; samesite=Lax";
});
}
return true;
}
I am working on GitHub Pages with Jekyll. The Disqus code is located in _includes/disqus.html and has the following code:
<div class="comment">
<button class="show-comments"><i class="fa fa-comments" aria-hidden="true"> Load/Add comments</i></button>
<div id="disqus_thread"></div>
</div>
<script src={{ "/js/jquery.min.js" | prepend: site.baseurl }}></script>
<script>
$(document).ready(function() {
$('.show-comments').on('click', function(){
var disqus_shortname = '{{site.disqus-shortname}}';
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
$(this).fadeOut();
});
});
</script>
In the layouts folder I have a blue.html file with the following code for Disqus:
{% include disqus.html %}
{% else %}
{% endif %}
And in the config.yml I noted my Disqus short name:
#comments disqus-shortname: eudemonis
But nothing of Disqus is loaded when clicking on the load comment section, see test post.
With or without the YAML front matter set as comments: true it doesn't work in neither Safari nor Chrome. I'm seriously at a loss.
I already tried a complete new file following Disqus documents with the Universal code but it doesn't work. Changing the Liquid tags manually with my Disqus short name also doesn't work.
I think the problem is that your website is hosted with HTTPS but you are linking to Disqus with HTTP protocol in your _includes/disqus.html:
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
Error from Chrome console (hit F12 and see):
Mixed Content: The page at 'https://eudemonis.github.io/blog/test//' was loaded over HTTPS, but requested an insecure script 'http://eudemonis.disqus.com/embed.js'. This request has been blocked; the content must be served over HTTPS.
To solve this, change the protocol to HTTPS:
url: "https://" + disqus_shortname + ".disqus.com/embed.js",
Or leave the protocol out and let the browser decide:
url: "//" + disqus_shortname + ".disqus.com/embed.js",