Django: return HTML file including script - javascript

I am working on a single page application called 'bookMarks' using HTML+CSS+jQuery as the front end and Django as my back end. I created a Django project and put my app.html+app.js+app.css+jquery.js in /static.
My question is: I would like my view to return the app.html as it should be without using Django template. I have tried this:
#app/views.py
from django.shortcuts import render_to_response, HttpResponse
import urllib
def index(request):
index = urllib.urlopen('static/app.html').read()
return HttpResponse(index)
#static/app.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My Bookmarks</title>
<link type="text/css" rel="stylesheet" href="app.css">
<script src="jquery.js"></script>
<script type='text/javascript' src="app.js">
jQuery.noConflict();
</script>
</head>
<body>
<div id="title">
Easy-Save Bookmarks
</div>
<div class="left">
<h3 class="tag">News</h3>
<div>
<p> A book mark here!</p>
</div>
<h3 class="tag">Reading</h3>
<div>
<p> A book mark here!</p>
</div>
<div id="newTag"></div>
<div>
<form name="addTagForm">
<input type="text" name="newTag">
<input id="addTag" type="button" value="Add a new tag">
</form>
</div>
</div>
<div class="right">
</div>
</body>
</html>
But it seems that all JS and CSS effects are ignored.
Could someone help me to fix this?

Finally I found that's because I didn't include my js+css files in the absolute way.
Now when I put my HTML+JS+CSS files in my_app/static/, and include absolute
The view will return my html correctly.

Related

How do I get Flask to serve my .js files?

I am doing some coding with Python, Flask and .js files all with some HTML and CSS linked in as well. My problem is that I have a dropdown menu and a button that can hide and unhide password text but when running in Flask, this side of things is not working and I believe that it has something to do with the javascript. This function works perfectly when I am running the HTML file locally and not through flask, but I am completely lost as to where to go from here?
In terms of what I have done already is to ensure that my file structure is correct and that these .js files are within the static folder (where CSS stylesheets are being pulled from perfectly fine). My script tags where I link the .js files are all at the end of the body tag and do not sit within the head tag.
<script src="../static/js/vendor/jquery.js"></script>
<script src="../static/js/app.js"></script>
<script src="../static/js/vendor/foundation.js"></script>
<script src="../static/js/vendor/what-input.js"></script>
This is the app file that I am using for Flask and the simple code used to run this if it helps?
from flask import Flask
from flask import render_template
app = Flask(__name__)
#app.route("/")
def render_static():
return render_template('splash_page.html')
#app.route("/account")
def account_page():
return render_template('account.html')
if __name__ == '__main__':
app.run(debug = True)
Below you will find my HTML code used as a template in Flask, this is it before the changes suggested below -
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="../static/css/app.css" rel="stylesheet" type="text/css">
<link href="../static/css/foundation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Premier League Pro</li>
<li>
Account
<ul class="menu vertical">
<li>My Account</li>
<li>Settings</li>
<li>Log Out</li>
</ul>
</li>
<li>Predictor</li>
<li>Odds Calculator</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="row">
<div class="columns large-3"></div>
<div class="columns large-6">
<br>
<br>
<form class="show-password">
<label for="username">Your login</label>
<input type="text" value="" placeholder="Enter Username" id="username">
<div class="password-wrapper">
<label for="password">Your password</label>
<input type="password" value="" placeholder="Enter Password" id="password" class="password">
<button class="unmask" type="button" title="Mask/Unmask password to check content">Unmask</button>
</div>
</form>
</div>
<a class="button small" href="#">Sign In</a>
<div class="columns large-3"></div>
</div>
<script src="../static/js/app.js"></script>
<script src="../static/js/vendor/foundation.js"></script>
<script src="../static/js/vendor/what-input.js"></script>
<script src="../static/js/vendor/jquery.js"></script>
</body>
</html>
If it helps to mention I am using Foundation as a CSS to help edit and make my webpages look nice.
When using the methods suggested below in terms of changing the script tags I get an error in the browser as follows -
jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'static'
you should link your js files using this:
<script src="{{ url_for('static', filename='js/vendor/jquery.js') }}"></script>
do this for all js files.
Hope that helps. If you still have any problem, please let me know.
for further investigation enable flask debug mode
To enable debug mode you can export the FLASK_DEBUG environment variable before running the server:
$ export FLASK_DEBUG=1
$ flask run
this will show you more detailed errors and stack traces in the browser.
Jinja2 is a modern and designer-friendly templating language for Python. https://jinja2docs.readthedocs.io/en/stable/
https://jinja.palletsprojects.com/en/2.11.x/templates/
Try surrounding the script tag in your template with these two Jinja2 syntactic structures below:
{% block javascript %}
<script src="{{ url_for('static', filename='js/vendor/jquery.js') }}"></script>
{% endblock %}
I vaguely recall Flask serving Javascript without this block once, but that was with Python 2.7. Maybe it's a bug.
It's probably a security feature to prevent XSS.

ng-include use for header / footer

New to angular.js I want to use ng-include for header and footer that are common to many pages of my site for easier update
I developped a small very basic example (basic.html) to test this but this is not working
<html ng-app>
<head>
<title>Basic Angular.js</title>
<script src="angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
<div ng-include="'myFile.html'"> Inclusion 1</div>
<div ng-include src="'myFile.html'"> Inclusion 2</div>
</body>
</html>
Myfile.html is as follow
<div>
<h1> Footer example </h1>
</div>
All files : basic.html, myFile.html and angular.min.js are in the same root directory (that was an issue in other posts related to ng-include errors)
While the first part of the basic.html is working fine (name input and dynamic display with angular) the ng-include is not working in both syntaxes:
<div ng-include="'myFile.html'">...
or
<div ng-include src="'myFile.html'"> ...
I did not miss the two consecutive quotes " and ' that were an issue in other posts related to ng-include errors.
I'm at a loss to understand what is the correct syntax or what is missing
Make sure you have angular.module and angular.controller defined. ng-include won't work without them being defined. I hope it helped.
Your code should look like this, note that ng-app="myApp":
(function(angular){
// create the module and register it to angular
var app = angular.module('myApp', []);
app.controller("maincontroller", ["$scope"]);
}(angular));
<html ng-app="myApp">
<head>
<title>Basic Angular.js</title>
<!--I'm using the cdn for demo purpose-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
<!--both of these syntax should work-->
<div ng-include="'myFile.html'"> Inclusion 1</div>
<div ng-include src="'myFile.html'"> Inclusion 2</div>
</body>
</html>

LESS client side

I'm trying to get this fiddle to work locally. It does not render properly. I've no idea why. The linked .less file is copied directly from the fiddle. The result of my markup is a blank page. I opted to use the CDN because when I downloaded the source I was unsure which less.js file to copy.
Here's the markup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>radial-progress</title>
<link rel="stylesheet/less" type="text/css" href="styles/radial-progress.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
</head>
<body>
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage"></div>
</div>
</div>
<script>
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(95));}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
</script>
</body>
</html>
My guess is you are running off the C: drive instead of a local server so the relative protocol link is breaking.
src="//cdnjs..."
needs to be
src="http://cdnjs..."
Better yet look into running your own server. It is simple with python or node.

Possible conflict betwen jquery and jquery mobile versions when trying to use Tipue Search 4.0

I am trying to get search up and running on my website. Right now the search either does nothing or spinner endlessly spins and nothing loads or I get "ERROR LOADING PAGE." I feel that this may be due to a jquery and jquery mobile conflict.
jquery.min.js is version 1.11.1
jquery mobile is 1.4.3
Hope you can help!
Here is the index.html
<!DOCTYPE HTML>
<html>
<head>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQueryMobile -->
<script src="js/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div class="block">
<form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off">
</form>
</div>
</div>
</body>
</html>
This is the search.html (as it states to do in tipue docs)
<!DOCTYPE HTML>
<html>
<head>
<title>TEST</title>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQueryMobile -->
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_set.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_content.js></script>
<link rel="stylesheet" type="text/css" href="tipuesearch/tipuesearch.css">
<script type="text/javascript" src="tipuesearch/tipuesearch.js"></script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div data-role="content">
<div class="block" ><form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required placeholder="Enter manufactuer or part number" >
</form>
</div> </div>
<div id="tipue_search_content"></div>
</div>
<script>
$(document).ready(function() {
$('#tipue_search_input').tipuesearch({
'show': 6
});
});
</script>
</body>
</html>
In case anyone is wondering this was simply a slight lack of JQM experience. Disabling ajax on the form solved the problem ()

jQuery mobile - Splitting up pages to different files

I am developing a web app based on jQuery and jQuery mobile. I want to show different pages, but since the corresponding html-markup might become quite large I would like to split up the html into different files, i.e.:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="page1">
<!-- import markup for page1 here -->
</div>
<div data-role="page" id="page2">
<!-- import markup for page2 here -->
</div>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
</body>
</html>
What can I do to import my markup where it says <!-- import markup for page<x> -->? Is there any way to achieve that?
I tried using <script>$("#page1").load("page1.html");</script> but this messes the entire page up! Since the web app should be packed as a native app for smartphones later php is not an option.
Thanks to Omar's comments above and his answer to this question I was able to come up with a working solution.
1.) Add external pages to the DOM by using $.mobile.pageContainer.pagecontainer("load", "<externalResName>.html");
2.) Navigate to the newly loaded page by adding a listener to the document (i.e. $(document).on( "pagecontainerload", function( event, ui ) { //... } );)
3.) Make sure that the external ressource stays in the DOM by adding data-dom-cache="true" to the page's div-tag.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
page1.html
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
page2.html
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>

Categories