I have this simple app:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>working app</title>
<script type="text/javascript" src="static/js/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.message = "Howdy!!";
}])
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('{a');
$interpolateProvider.endSymbol('a}');
}]);
</script>
</head>
<body ng-app="myApp">
<h1>Hello!</h1>
<div ng-controller="myCtrl">
<span>{message}</span>
<span>{{ '{{message}}' }}</span>
</div>
</body>
I'm getting {message} {{message}} in html page not scope value. I don't have any idea, where I'm going wrong. I really appreciate any sort of help in this!
To achieve your expected result, use below option to bind your scope value
{a message a}
Start tag and end tag should be '{a' and 'a}' respectively without {{}} inside them
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>working app</title>
<script type="text/javascript">
</script>
</head>
<body ng-app="myApp">
<h1>Hello!</h1>
<div ng-controller="myCtrl">
<span>{a message a}</span>
</div>
</body>
JS:
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.message = "Howdy!!";
}])
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('{a');
$interpolateProvider.endSymbol('a}');
}]);
Codepen= http://codepen.io/nagasai/pen/JKrVgV
Related
is it possible to print my example code like i would do it in an normal Console. it just prints the values at once without waiting and doesn't delete the previous one.
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset ="UTF-8">
<meta http-equive ="X-UA-Compatible" content "IE=edge">
<meta name ="viewpoert" content="width = device-width, initial-scale=1.0">
<title> Document </title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div id="myNum" style="background: red;"></div>
<py-script>
import asyncio
for x in range (1,10):
element = document.getElementById('myNum')
element.innerHTML = x
await asyncio.sleep(1)
</py-script>
</body>
</html>
You need to update the DOM to overwrite the previous value:
...
<body>
<div id="myNum" style="background: red;"></div>
<py-script>
import asyncio
for x in range (1,10):
element = document.getElementById('myNum')
element.innerHTML = x
await asyncio.sleep(1)
</py-script>
</body>
</html>
I need to run some python code when HTML button click,
I try this code but when I clicked the button nothing happened.
This is my code:
'''
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/brython#3.9.0/brython.min.js">
</script>
</head>
<body onload="brython()">
<script type="text/python">
def change_image():
from browser import document, html
document["image"].clear()
document["image"] <= html.IMG(src="flowers.jpg")
document["next"].bind("click", change_image)
</script>
<img id="image" src="image.png">
<input id="next" type="button" value="next state"/>
</body>
</html>
'''
What is my problem??
Your code has a problem.Change it as follows
<script type="text/python">
from browser import document, html #Use the form outside the function
def change_image(item):
document["image"].clear()
document["image"].src="flowers.jpg" #change attributes
document["next"].bind("click", change_image)
</script>
Full code
<head>
<meta charset="utf-8">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/brython#3.9.0/brython.min.js">
</script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document, html
def change_image(item):
document["image"].clear()
document["image"].src="https://www.w3schools.com/html/img_chania.jpg"
document["next"].bind("click", change_image)
</script>
<img width=200 id="image" src="https://www.w3schools.com/html/pic_trulli.jpg">
<input id="next" type="button" value="next state"/>
</body>
I am trying to display my html files using python alone. Such as I would python code.py and I would be able to access my html at localhost:8080
html files are static files that access each other. For example, index.html directs to contact.html and all of them access css folder.
How do I open my html files so it displays it on the webpage?
below is what I have so far.
html_file = []
with open("index.html", "r") as f:
for line in f.readlines():
html_file.append(line)
Is there way to do python code.py and when I access localhost:8000 that would show me the code? and I can access each page.
here is an example html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<img class="resize" src="./pictures/logo.png" alt="logo">
<nav>
<ul class="nav-links">
<li class="active">Home</li>
<li>Contact</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(document).on('click', 'ul li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</nav>
</header>
</body>
</html>
There's way to do so using the python web frameworks like Flask or Django. In a typical flask scenario your code would look like this:-
1) Install flask:-
pip install flask
2) Write your code.py like this:-
from flask import Flask, url_for
from flask import render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('hello.html')
3) Next create a templates folder inside which put your html file which I have named it to be hello.html
templates > hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<img class="resize" src="./pictures/logo.png" alt="logo">
<nav>
<ul class="nav-links">
<li class="active">Home</li>
<li>Contact</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(document).on('click', 'ul li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</nav>
</header>
</body>
</html>
4) Your directory structure would look like this:-
/code.py
/templates
/hello.html
5) Run python code.py and you can see your page on localhost:5000.
Hello i dont know why the jquery is not loading in my flask app ? even though i have downloaded the jquery and add in js folder
<!DOCTYPE html>
<html lang="eng">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="{{url_for('static', filename = 'css/bootstrap.min.css')}}" rel="stylesheet">
<link rel="shortcut icon" href="{{url_for('static', filename = 'myicon.ico' )}}">
<script type=text/javascript src="{{url_for('static', filename='js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{url_for('static', filename = 'js/bootstrap.min.js')}}"></script>
type=text/javascript should be type="text/javascript" in line referencing jQuery.
I am migrating several pages over to use our site's new template. These are legacy pages, though, so they need a couple extra global js files.
I was hoping to set a legacy flag in the child page views, and then have an if check in the master template, but this didn't seem to work.
Is there a better way to do this?
The ideal approach would mean I could simply declare the global legacy scripts in one place. I don't want to have to include them on every legacy child page, which is what we're doing now.
Parent template:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=.5"/>
<title>Title</title>
<link rel="stylesheet" href="/static/css/global.css"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<%block name="page_css" />
</head>
<body>
<!-- Body -->
<div class="bc-page-wrapper">
${self.body()}
</div>
<script type="text/javascript" src="/static/globals.js"></script>
% if legacy == 1:
<script type="text/javascript" src="/static/js/legacy.js"></script>
% endif
</body>
</html>
Legacy Page Inheriting Template:
<%
legacy = true
%>
<%inherit file="/global/ko_admin_template.html" />
<div class="legacy-container">
content here
</div>