I'm trying to use pyjamas (http://pyjs.org/). My input file, named hi.py, looks like this:
from pyjamas import Window
from pyjamas.ui import RootPanel, Button
from pyjamas.ui import HTML
def greet(sender):
Window.alert("Hello!")
b = Button("Click me", greet)
RootPanel().add(b)
I run the following command:
python ~/pyjs-pyjs-07f54ad/bin/pyjsbuild hi.py
Building : hi
PYJSPATH : [
/Users/michaelnatkin/HelloPyjs
/Users/michaelnatkin/pyjs-pyjs-07f54ad/library
/Users/michaelnatkin/pyjs-pyjs-07f54ad/addons
]
Built to : /Users/michaelnatkin/HelloPyjs/output
Which appears to run without errors, and here is my resulting directory:
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls .
hi.js hi.py output
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls output
__init__.py gchart.gif hi.safari.cache.html
_pyjs.js hi.html history.html
bootstrap.js hi.ie6.cache.html tree_closed.gif
bootstrap_progress.js hi.mozilla.cache.html tree_open.gif
disclosurePanelClosed.png hi.nocache.html tree_white.gif
disclosurePanelClosed_rtl.png hi.oldmoz.cache.html
disclosurePanelOpen.png hi.opera.cache.html
I then direct my browser to one of the html files: file:///Users/michaelnatkin/HelloPyjs/output/hi.html
and I get... a blank page. The only error in my js console is:
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
which I guess isn't too surprising since the html file says:
<html>
<!-- auto-generated html - You should consider editing and adapting this
to suit your requirements. No doctype used here to force quirks mode; see
wiki for details: http://pyjs.org/wiki/csshellandhowtodealwithit/
-->
<head>
<title>hi (Pyjamas Auto-Generated HTML file)</title>
<meta name="pygwt:module" content="hi">
</head>
<body style="background-color:white">
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
</body>
</html>
So.. I'm completely stuck. Can someone tell me how to get this bad boy to produce output? I've got a much more complicated app I want to create, but if I can't say "Hello" it isn't going to go well. Thank you!
Have you tried it in Firefox too? While nothing is displayed with Chrome, with Firefox I get an error message which comes from the way you import RootPanel and Button. You should replace your single line by:
from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Button import Button
After that your button greets me properly.
And regarding the Chrome issue, either launch it with --allow-file-access-from-files or run a local web server to display your page. More details there: https://github.com/pyjs/pyjs/wiki/googlechromeproblems
Related
I am trying to serve some HTML from a Google Colab notebook using the following:
from IPython.display import IFrame
IFrame(src='./output/index.html', width=700, height=600)
However, this throws localhost refused to connect:
Does anyone know how I can serve the html in index.html (which must load javascript) inside the Colab notebook? Any pointers would be hugely appreciated!
You can serve content from the path /nbextensions/ which maps to /usr/local/share/jupyter/nbextensions.
So you can put content there.
!ln -s /usr/local/share/jupyter/nbextensions /nbextensions
%cd /nbextensions
!wget -q https://upload.wikimedia.org/wikipedia/commons/3/37/Youtube.svg
Then serve the image
%%html
<img src=/nbextensions/Youtube.svg>
I can't make it works with IFrame, thought. I don't know why.
Here's an example colab notebook.
This built-in example notebook gives a demo:
https://colab.research.google.com/notebooks/snippets/advanced_outputs.ipynb#scrollTo=R8ZvCXC5A0wT
Reproducing the example here of serving content from the backend:
import portpicker
import threading
import socket
import IPython
from six.moves import socketserver
from six.moves import SimpleHTTPServer
class V6Server(socketserver.TCPServer):
address_family = socket.AF_INET6
class Handler(SimpleHTTPServer.SimpleHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
# If the response should not be cached in the notebook for
# offline access:
# self.send_header('x-colab-notebook-cache-control', 'no-cache')
self.end_headers()
self.wfile.write(b'''
document.querySelector('#output-area').appendChild(document.createTextNode('Script result!'));
''')
port = portpicker.pick_unused_port()
def server_entry():
httpd = V6Server(('::', port), Handler)
# Handle a single request then exit the thread.
httpd.serve_forever()
thread = threading.Thread(target=server_entry)
thread.start()
# Display some HTML referencing the resource.
display(IPython.display.HTML('<script src="https://localhost:{port}/"></script>'.format(port=port)))
This works for me on Aug 2022:
First, as #korakot mentioned, if you have any javascript used in your html, please copy them into /usr/local/share/jupyter/nbextensions
e.g.
!cp -r ./output/ /usr/local/share/jupyter/nbextensions/google.colab/
use !ls /usr/local/share/jupyter/nbextensions/google.colab/ to check if file already exists
Then, instead of referring to html file by path, simple copy the html code in <body> into colab cell:
%%html
<!-- move your head part resources here -->
<script src="/nbextensions/google.colab/output/xxxx.js"></script>
<link type="text/css" href="/nbextensions/google.colab/outut/xxxx.css" rel="stylesheet" />
<!-- here is your body code -->
<div id="files"></div>
<div id="canvasArea" height="720px"></div>
...
<script>
// set the cell height
google.colab.output.setIframeHeight(document.documentElement.scrollHeight, true);
// you can also log some testing code here, to check whether it works or not
console.log("hello world");
console.log(variables_in_your_js)
</script>
Run the cell to check whether works or not.
I am using PhpStorm 10.0.3. I have test.php file. Inside this file I have some JavaScript. What I found is, if there are any JavaScript syntax errors it does not show.
For example:
image.setAttribute("data-src2", "example.com/1.jpg";
no syntax error is shown at the end in the test.php
The entire file is
<html>
<head></head>
<body>
<?php
$you = "sample";
?>
<script type="text/javascript">
//image or frame
var image = document.createElement("img");
image.setAttribute("data-src", "example.com");
image.setAttribute("data-src2", "example.com";
contentDiv.appendChild(image);
</script>
</body>
</html>
If I rename the file to text.html then JavaScript syntax error is shown:
image.setAttribute("data-src2", "example.com/1.jpg";
it shows error saying , or ) expected.
How to ensure both the syntax errors are highlighted?
This mostly depends on your context. In other words, how is your JavaScript embedded on the page. If you use close tags ?> and then carry on with some JavaScript it should be able to recognise that this part isn't PHP any more.
You cannot do much about this unfortunately.
ATM injection fragments (different language inside another language) seems to be treated completely differently hence most of the inspections for injected language are disabled or not run at all (I guess it is because each such fragment is treated as separate document which often produced quite a few false positives .. and what is done here is one form of reducing such false alarms -- just my guess).
https://youtrack.jetbrains.com/issue/WI-18963 -- watch this ticket (star/vote/comment) to get notified on any progress.
I'm developing a Firefox add-on. When I run it, I open up the browser console and it says, AMO_Uedit_Beta_Firefox is not defined :browser.xul.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://Uedit/skin/skin.css" type="text/css"?>
<!DOCTYPE Uedit SYSTEM "chrome://Uedit/locale/translations.dtd">
<overlay id="Uedit-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="Uedit.js" />
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="Uedit" class="toolbarbutton-1" label="Edit HTML" tooltiptext="Edit HTML" oncommand="AMO_Uedit_Beta_Firefox.Uedit()" />
</toolbarpalette>
</overlay>
The toolbar button that calls a function which is part of an object (AMO_Uedit_Beta_Firefox).
I double-checked the names and they both match. Is it because the script doesn't load properly? I'm sure it's not that variable names can't start with capital letters.
var AMO_Uedit_Beta_Firefox={ // This is for "wrapping the loose variables."
Both the file's references are the exact same. Could it be because the script didn't load at all?
<toolbarbutton id="Uedit" class="toolbarbutton-1" label="Edit HTML" tooltiptext="Edit HTML" oncommand="AMO_Uedit_Beta_Firefox.Uedit()" />
I tried changing the relative URL (<script src="Uedit.js" />) to an absolute URL (<script src="chrome://Uedit/Uedit.js" />) in the browser.xul, but now it just returns a blank error message.
Weird blank error message.
These errors cause the rest of the add-on to not work at all, so I can't continue developing it until this is fixed. What're some possible solutions?
EDIT:
I figured out a solution. I have to put a line of JavaScript before the first statement.
var AMO_Uedit_Beta_Firefox = { // Will not work!
...
If I put a console.log in the front, for example.
console.log("");
var AMO_Uedit_Beta_Firefox = { // This will work!
...
The only question is, why does this work?
It looks like the path to the Uedit.js file is wrong. You should use an absolute path in your xul overlay.
As erikvold has said, the link to your Uedit.js script is wrong. This is the minimum that is wrong and is the thing that is complained about in the console: browser.xul:5 is line 5 in browser.xul, which is:
<script src="Uedit.js" />
You state that you have tried:
<script src="chrome://Uedit/Uedit.js" />
That will not work. At a minimum, it should be something like:
<script src="chrome://Uedit/content/Uedit.js" type="application/x-javascript" />
Note the content/ after //Uedit/. However, that being correct assumes you have set up your chrome.manifest with an appropriate content line in addition to the other ones implied by your code (skin and locale). It also assumes that Uedit.js is in that directory. Assuming that the directory structure of your add-on is normal, the content line in your chrome.manifest file would look something like:
content Uedit chrome/content/
As to it actually working, there is no way for us to know if it will work as you have not included the source code that defines all of AMO_Uedit_Beta_Firefox and specifically not AMO_Uedit_Beta_Firefox.Uedit(). For instance, in addition to the above problem, there could easily be a syntax error that prevents the script from loading. Such a syntax error would cause the console to report that AMO_Uedit_Beta_Firefox was undefined when you attempt to execute AMO_Uedit_Beta_Firefox.Uedit() as the code for the toolbarbutton's oncommand.
You can easily test to see if your Uedit.js script is loading by having something print in the console when the script loads (i.e. outside the definition of AMO_Uedit_Beta_Firefox).
I figured out a solution. I have to put a line of JavaScript before the first statement.
var AMO_Uedit_Beta_Firefox = { // Will not work!
...
If I put a console.log in the front, for example.
console.log("foo bar");
var AMO_Uedit_Beta_Firefox = { // This will work!
...
I solved the problem myself, although the solution is strange.
We've just launched our new Magento site and the letter 'c' is appearing in quotes immediately after the tag. It's not showing up before on my local machine or on our QA site, I've checked the template files and it is not there either. I'm almost certain it can not be a code issue as we have the same code running locally and on our QA site under version control with GIT.
We've cleared the cache and I've tried checking to see if JavaScript was inserting it with the chrome dev tools but could find nothing.
Strangely, the 'c' is not in the view source document but I can see it with the chrome inspector.
I also don't think it can be coming from Magento CMS Pages/Blocks as it loading immediately after the tag.
thanks for the link. after reviewing the page source, you have an extra c character in the header area:
<!-- END GOOGLE ANALYTICS CODE -->
c<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script>
Notice that c before the script tag?
Just in support to Benny Lin's very helpful answer.
What was happening was we had our Google Analytics code loading from a template file which contained the stray letter 'c'. We could see this on our local machines as this templates was disabled in the Magento admin settings, but not on production.
This issue seems to demonstrate that when a stray letter appears within the <body> tags on your dev tools inspector and not the view source page it may be because it is in the <head> section. The browser seems to push all poorly formatted html from the <head> section into the <body> section when rendering.
For example if you open the below html in the chrome browser you will see what I mean:
<!DOCTYPE html>
<html>
<head>
c<title>Title of the document in head</title>
<script type="text/javascript">
var test = "test";
</script>
</head>
<body>
The body of the document......
</body>
</html>
Also while we were searching for the stray letter, we were ably to remove it with the below JavaScript that targets the offending XML node in the DOM with an XPath expression and removes that node only.
<script type="text/javascript">
function _x(STR_XPATH) {
var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
var xnodes = [];
var xres;
while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}
return xnodes;
}
jQuery(_x('//html/body/text()[contains(.,"c")]')).remove();
</script>
I was trying out my Firebase beta invite by calling the db from the local HTML I created.
Here's the code which refused to work.
<html>
<head>
<script src="https://static.firebase.com/v0/firebase.js"></script>
<script type="text/javascript">
var myDataReference;
function call_on_click() {
alert("Done!");
try {
myDataReference = new Firebase('https://sbose78.firebaseio.com/');
myDataReference.set('I am now writing data into Firebase!');
} catch (e) {
}
}
</script>
</head>
<body>
<input type="button" value="push me" onclick="call_on_click()">
</body>
</html>
I'm using Firefox 11 on Ubuntu.
[02:40:58.766] Firebase is not defined # file:///root/Desktop/firebase-app1.html:20
--
[02:43:28.743] file:///root/Desktop/firebase-app1.html
[02:43:28.796] GET https://static.firebase.com/v0/firebase.js [HTTP/1.1 200 OK 1766ms]
[02:43:30.572] uncaught exception: [Exception... "Operation is not supported" code: "9" nsresult: "0x80530009 (NS_ERROR_DOM_NOT_SUPPORTED_ERR)" location: "https://static.firebase.com/v0/firebase.js Line: 28"]
What am I missing?
Thanks in advance!
This was a bug in the Firebase JavaScript client caused by the handling of sessionStorage in Firefox when loading things from a file. It should be fixed at this point.
Give it another shot and it should work.
As far as I can tell, this is an issue with the same origin policy. As stated at the aforementioned document:
Starting in Gecko 1.9, files are allowed to read only certain other files. Specifically, a file can read another file only if the parent directory of the originating file is an ancestor directory of the target file. Directories cannot be loaded this way, however.
For example, if you have a file foo.html which accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html.