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.
Related
I'm trying to prettyprint some code generated by a custom installation of blockly. The code generated will be xml, but the problem is that once I try to highlight the code using google prettify (and not the only one, same problem with higlight.js) the code is not highlighted, I tried to google but all solution doesn't appear to apply to my problem.
This is how I imported the prettify library:
This is the code:
<script language="javascript">
function showCode() {
var code = Blockly.JavaScript.workspaceToCode(workspace);
var element = document.getElementById("codeview");
var pre_element = document.createElement("pre");
pre_element.setAttribute("class", "prettyprint");
pre_element.setAttribute("id", "code_container");
pre_element.textContent = Blockly.JavaScript.workspaceToCode(workspace);
//pre_element.appendChild(code_element);
element.appendChild(pre_element);
//alert(code);
}
</script>
one of the example of generated code is:
<property name='default' />
<property name='default' />
<property name='default' />
Now I don't know if the problem is that I need to specify the doctype in the piece of code I'm prettifying, or it's just something else, maybe for example I need to escape it? Both?
The application is hosted on a Spring Boot App. Blockly works fine, but the problem appear to be only with the syntax highlighter.
I suppose you don't call prettyprint() function in your HTML's <body>.
Call prettyprint() after you append pre_element
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 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
I'm using HTML, JavaScript, and jQuery Mobile to make a kind of picture gallery. I'm following the JQM demo at: http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/swipe/swipe-page.html
to make the gallery, but it uses a totally different HTML page for each picture. My plan is for the gallery to be dynamic, so I don't have a set number of pages or a set list of picture names, etc, and I thought I might use Mustache to make a picture template, and create the pages dynamically. Here is the basic layout of the code:
In index.html
<!DOCTYPE html>
<html>
<head>
...
<script src="mustache-0.7.0-min.js" type="text/javascript"></script>
<script src="mobile.js" type="text/javascript"></script>
<script id="test_template" type="text/html">
<h1>{{firstName}} {{lastName}}</h1>
<p>{{tempText}}</p>
</script>
...
</head>
...
And then in mobile.js
function showPerson()
{
var person =
{
firstName: "Feaf",
lastName: "McFeaf",
tempText: "Hello Feaf"
};
var personTemplate = document.getElementById("test_template").innerHTML;
var html = Mustache.to_html(x, person);
}
So it's about as basic as you can get. However, when I run the web app on a local server (in Chrome), and I step through this function, I get an error at the Mustache.to_html line, saying
Uncaught TypeError: Cannot call method 'to_html' of undefined
I'm fairly new to web development, and brand new to Mustache, so I do not know what could be causing this error. I've tried calling other Mustache methods, like render, but the same error appears. Is the <script src=...> not enough to have the Mustache library accessible to mobile.js? Anybody have any tips on what I might be doing wrong?
Thank you for any information, and let me know of any other information I should add.
EDIT:
Whoops! Forgot to include the fact that I had mustache in the scripts section, I've edited to reflect this fact. Just to be clear, I DO have (and always have had) mustache included!
Also, I tried the suggestion of #Zorayr of using console.log(Mustache), and it claims that Mustache is undefined, even though I am importing it as noted above. Why might this be?
As a solution to the problem, I ended up downloading and using Handlebars. It seems to me that there was some conflict with the Mustache library that was already in the project and the new one I added in. This doesn't really explain why Mustache would be undefined, but that was my workaround.
I have a script that I add to my xul file, like:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Bindings -->
<?xml-stylesheet href="chrome://test/content/bindings.css" type="text/css"?>
<mywindow id="myWindowID" width="800" height="600"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://greenfox/content/jquery-1.4.4.min.js" />
</mywindow>
and on mywindow constructor (at the binding) I use a function of my scrip, called 'print'.
The problem is that sometimes, my script doesn't load really fast before it's used, and I get the message
We are unable to Print or Print
Preview this page.
..which is related to the Printer usage.
Please note that I'm not trying to use the Printer, I'm trying to use my own print method (in the script that doesn't loaded in time) to simply write on the screen.
So, any idea how can I make the xul file wait till my script is completely loaded?
Solved it with a variable "window.scriptsLoaded" and a loop on my class constructor that wait..
-update
also, it didn't work with while(!window.scriptsLoaded), I needed to use:
function loadScripts() {
if (!window.scriptsLoaded)
setTimeout(loadScripts, 1)
else
loaded();
}
so the window.scriptsLoaded could be updated each time I check it. I don't really understand why.
-update
Actually, use "onload" showed itself a the better solution..