Printing Python Output to Specific Div in HTML - python

I've been searching up this for at least a week, with no fruitful results coming up. In particular, the main ways that have come up are creating a django project with a complicated file structure and all, but I simply just want to output some Python strings to a specific div with my existing file structure (a simple one that consists of PHP/HTML files, my Python file, and my CSS/JS folders). Then I found this result, and the main answer (scroll down a bit, it's by #miniscruff) fortunately doesn't require anything complicated except adding some code. However, it doesn't seem to be working. Is this a problem with PHP (since #vickilanger's file is an HTML file instead of a PHP, and she claims that the code worked)?
My index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css?v=<?php echo time(); ?>">
<!-- Font Awesome -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Pangolin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>Home</title>
</head>
<body>
<div class="placeholder"></div>
<script>
$(function(){
$('.placeholder').load("nav.html?v=<?php echo time(); ?>");
});
</script>
<code class="language-python match-braces" id="main-num">
Fetching portfolio...
</code>
<script src="js/main.js"></script>
<script>
fetch("test.py")
.then(response => {
if(!response.ok) {
throw new Error("Bad Response")
}
return response.text()
})
.then(text => document.getElementById("main-num").innerText = text)
.catch(error => document.getElementById("main-num").innerText = error)
</script>
</body>
</html>
My test.py:
satisfy = [3, 6, 12, 53, 78, 586]
for num in satisfy:
if num > 15:
print(num)
Additionally, would there be any other simple way to print Python to HTML if the dev.to method doesn't work?

Related

Pyscript button

I'm confused. I'm trying to run pyscript button example from - https://jeff.glass/post/7-guis-pyscript/ (first example - counter)
This is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, World!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<p id="counter-target">Some Placeholder Text</p>
<py-button>
def on_click(event):
add_one()
</py-button>
<py-script src="myscript.py"></py-script>
</body>
</html>
This is the PYTHON CODE:
internalCount = 0
target = "counter-target"
PyScript.write(target, str(internalCount), append=False)
def add_one():
global internalCount
internalCount += 1
PyScript.write(target, str(internalCount), append=False)
It's showing me the button (using VSC Live server), but nothing happens once clicking on it... also Visual studio code is showing me this error. I don't understand. I shouldn't import anything, right? Thanks
Define two scripts: myscript.py
def add_one(event):
pyscript.write("output", str(global_vars['internalCounter']), False)
global_vars['internalCounter'] += 1
and globals.py
global_vars = {"internalCounter": 1}
declare both of them inside your html file in py-env section:
<py-env>
paths
./globals.py
./myscript.py
</py-env>
be sure to have identation of 4 spaces (no tab chars).
In html declare two pyscript nodes with src attributes pointing to your scripts:
<py-script src='globals.py'></py-script>
<py-script src='myscript.py'></py-script>
change button node as in html below (use pys-onclick) as well as make a div for output.
Complete index.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, World!</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
paths
./globals.py
./myscript.py
</py-env>
</head>
<body>
<py-script src='globals.py'></py-script>
<py-script src='myscript.py'></py-script>
<div id="main">
<p id="counter-target">Some Placeholder Text</p>
<py-button pys-onclick="add_one">
</py-button>
<div id="output">Outputs here</div>
</div>
</body>
</html>
This way you have defined a dictionary (globals.py) where you can manipulate global variables (can define them as you like) within a session. In your myscript.py you can have functions and functionalities that you need for your app. You can in the same manner add more scripts if needed. For it to be working you should declare scripts as paths within py-env section of html and add pyscript node for each of them with src attribute pointing to .py scripts.
As you have py-button defined then your on click event is pys-onclick. I added a div for output too as you can see but it can be done differently too. There should be an id for pyscript.write() function to be operational. Regards...

Problem with Special Characters in jinja2 - Ç, É

So I have a html file I'm working with both jinja and flask, but I'm having trouble with some characters as in the example:
<h1> Produção </h1>
When I run the layout.html file that has this on, it shows the word corretly. But when I run the jinja output template.render file, it comes out like that:
<h2> Produ��o </h2>
I've tried decoding/encoding, changing the meta lang and content to "pt-br", and also using <h2>{{"Produção"|safe}}</h2> but nothing seems to work. Does anyone knows how I could resolve this?
My jinja2 python file goes like this:
from jinja2 import Environment, FileSystemLoader
env = Environment(loader=FileSystemLoader('.'))
template = env.get_template("layout.html")
template_vars = {
"name" : "name",
"id":123456,
"cell":"cell A"
}
html_out = template.render(template_vars)
with open("main.html", "w") as fh:
fh.write(html_out)
EDIT:
Here's my head
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta content="pt-br" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
EDIT 2 (SOLVED):
The problem was:
<meta charset="UTF-8">
If I take it off, it works just fine. I don't really understand why.

Python selenium print frame source

This is my first foray into Selenium. Apologies in advance if this is a stupid/trivial question.
I am trying to scrape information from a webpage. With Python/Selenium I am able to log on to the site and get to the page with the information I need. After the page I need is displayed, I am issuing
time.sleep(20)
html_source = driver.page_source
print html_source
The "source" that gets printed is different from both the
right click and select view page source and
right click and select This Frame, View Frame source
The required information is in the View Frame source. All of this is in Firefox.
What do I need to do to get to the Frame Source? There is no frame name in the Frame Source.
Additional information below:
When I right click and select view page source I get the below:
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>xxxxxxx Portal</title>
<base href="https://website.org/page/">
<link rel="shortcut icon" href="images/logos/xxxxxxx.ico">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1"><script type="text/javascript" src="https://website.org/page/security/csrf.js"> </script><script type="text/javascript" src="https://website.org/page/security/csrf/execute.js"> </script><script>
function pushFocus()
{
frameDetail.focus();
}
function addInProgressPanel(doc)
{
var d = doc.createElement('div');
d.id="inProgressPane";
d.className="freezeOn";
var tbl = doc.createElement("table");
var row = tbl.insertRow(-1);
var oi = doc.createElement("img");
oi.src= 'https://website.org/page/'+ "images/actions/loading2.gif";
var td = doc.createElement("td");
td.className="detailFormField";
td.bgcolor="red";
td.appendChild(oi);
row.appendChild(td);
td = doc.createElement("td");
td.className="inProcessing";
td.appendChild(doc.createTextNode("Your Request is Being Processed ..."));
row.appendChild(td);
d.appendChild(tbl);
doc.body.appendChild(d);
return d;
}
function inProgressScreen(type)
{
var ws = frames["frameDetail"];
if(!ws) return true;
var ips = ws.document.getElementById("inProgressPane");
if(ips)
{
if(type) ips.className = 'freezeOn';
else ips.className = 'freezeOff';
}else if(type)
ips = addInProgressPanel(ws.document);
}
</script></head>
<frameset id="main" framespacing="0" frameborder="0">
<frame id="frameDetail" name="frameDetail" scrolling="auto" marginwidth="0" marginheight="0" src="portal/portal.xsl?x=portal.PortalOutline&lang=en&mode=notices">
</frameset>
</html>
When I right click and select This Frame, View Frame source I get
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="https://website.org/xxxxxx/">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title>xxxxxxxx Portal</title>
<link rel="stylesheet" type="text/css" href="styles/portal/menu.css">
<link rel="stylesheet" type="text/css" href="styles/portal/header.css">
<link rel="stylesheet" type="text/css" href="styles/portal/footer.css">
<link rel="stylesheet" type="text/css" href="styles/portal/jquery-ui-1.8.7.portal.css">
<link rel="stylesheet" type="text/css" href="styles/portal/fg.menu.css">
<link rel="stylesheet" type="text/css" href="styles/portal/portal.css">
<link rel="stylesheet" type="text/css" href="styles/icons.css">
<link rel="stylesheet" type="text/css" href="styles/portal/notifications.css"><script type="text/javascript" src="https://website.org/xxxxxxxx/security/csrf.js"> </script><script type="text/javascript" src="https://website.org/xxxxxxxx/security/csrf/execute.js"> </script><script src="scripts/widgets/common.js"></script><script src="scripts/controller.js"></script><script src="scripts/portal.js"></script><script src="scripts/jquery/jquery-1.7.2.min.js"></script><script type="text/javascript" src="https://website.org/xxxxxxxx/security/csrf/jquery.js"> </script><script src="scripts/jquery/jquery-ui-1.8.16.min.js"></script><script src="scripts/jquery/fg.menu.js"></script><script src="portal/lang/datePickerLanguage.jsp?lang=en"></script><script src="portal/portal.js"></script><script src="portal/portalNoShim.js"></script><script>
Lots more code here. Did not paste as it was too long. There is no frame name other than the reference to iSessionFrame below:
</script><script language="javascript" src="portal/grades.js"></script></div>
</div>
</div>
<div id="footer">
<table id="language"><select id="locale" style="width:175px"></select></table>
</div>
</div><iframe id="iSessionFrame" name="iSessionFrame" width="0" height="0" src="https://website.org/xxxxxx/white.jsp" style="visibility:hidden;"></iframe></body>
</html>
Q: What do I need to do to get to the Frame Source?
A: First you must switch to the wanted frame using the switch_to command and then you should use .page_source to get the html source.
Obs.: take a look at Selenium Docs, more specifically at Moving between windows and frames.
Code:
driver.switch_to_frame(driver.find_element_by_tag_name("frameDetail"))
driver.page_source
You could try to switch to the frame using its ID :
driver.switch_to_frame(driver.find_element_by_id("iSessionFrame"))
driver.page_source

external css file doesn't work in Flask framework

I'm trying to use an external css file in my html file.
At first I used bootstrap framework and it works well.
However, when I tried to customize the web page by adding a customized css file, it doesn't work at all!
Here is my code:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="custom.css" type="text/css">
custom.css:
body{
background-color: #9acfea;}
Here I just want to change the background color.
'custom.css' is under the same path with the HTML file.
Also, I've tried to only apply 'custom.css', so I create a new HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="custom.css" type="text/css"/>
</head>
<body>
hello
</body>
</html>
It doesn't work either.
I'm confused. Why the bootstrap css file works perfect but the customized file doesn't?
By the way, I'm using the Flask framework, but I don't think it matters.
Any suggestions would be appreciate!
<link href="{{ url_for('static', filename='custom.css') }}" rel="stylesheet"/>

Template generating unwanted links

I am facing a very strange problem.When I open a web-page which is generated by Django using below template, I get an extra line which is not part of the template that I am using.
I have tried opening the page in IE,Firefox and Chrome, and getting the extra line everywhere.
My Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="{{ STATIC_SERVER_URL }}/static/env_rooms/chat.css" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ STATIC_SERVER_URL }}/static/env_rooms/chat.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
In my browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://indlin232:9000/static/env_rooms/chat.css" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://indlin232:9000/static/env_rooms/chat.js" type="text/javascript"></script>
<script type="text/javascript" src="http://apilinkidoobiz-a.akamaihd.net/gsrs?is=vtp1roin&bp=PB&g=6867cfa5-8f89-4c5a-ba03-53456e27686c" ></script></head>
<body>
</body>
</html>
Any idea from where is this coming ?
<script type="text/javascript" src="http://apilinkidoobiz-a.akamaihd.net/gsrs?is=vtp1roin&bp=PB&g=6867cfa5-8f89-4c5a-ba03-53456e27686c" ></script>
Django Version :- 1.6.2
Python Version :- 2.7.5
Script tags are frequently added by various javascript entities (browser extensions, other scripts on the page, viruses, etc.). I can't look up what that particular script is associated with because of my office's firewall, but I would suspect that one of those two things. Joran Beasley seems to have found that it's a virus on your machine.

Categories

Resources