I am trying to run my Dart app in Firefox (v22.0). Here is the app's homepage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My 1st Dart App</title>
<link rel="stylesheet" href="assets/myapp/myapp/myapp.css">
</head>
<body>
<h2>Push the button!</h2>
<div id="sample_container_id">
<input type="button" id="someButton" value="Some Button!" />
</div>
<script type="application/dart" src="myapp.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
When I run this as-is, my app runs fine and does exactly what I want it to. But then if I strip out the first <script/> tag (<script type="application/dart" src="myapp.dart"></script>), none of the Dart code executes at runtime. For instance, I have a click handler configured on an HTML button like so:
void main() {
querySelector("#someButton").onClick.listen((e) => window.alert("Hello!"));
}
If I remove the first <script/> tag, then when I click someButton nothing happens.
(1) Why does removing the first <script/> tag "kill" the Dart code? I am using pub build to produce cross-compiled JavaScript, so why should Firefox care about my Dart source file (since FF 22.0 doesn't support Dart natively)?
(2) Does Dart have a recommended <DOCTYPE> declaration, such as transitional, etc.?
Short answer: Look into dart.js to find out what's going on.
Long answer: Dart.js will look for the script: application/dart, if it's running on a browser with DartVM (i.e.: Dartium) it will launch that. Otherwise it will take the script file myapp.dart and change the file to be myapp.dart.js and run that. By removing that script tag, you are removing your dart script which dart.js looks for and as a result your javascript compiled version is never inserted into your document.
Regarding DOCTYPE none is particularly recommended, however since Dart is generally designed for the latest versions of browser and in fact uses HTML5 tags where appropriate it would probably be best to use the HTML5 DOCTYPE as you have in your example.
1) Take a look at what packages/browser/dart.js does.
It first checks if the browser supports Dart, then if the browser does not support Dart, it looks for files with type application/dart and remaps them to point to the correct JavaScript file.
Since you removed your Dart script, dart.js doesn't find it and never remaps it to point to the JavaScript file.
2) Everything I've seen uses the HTML5 doctype: <!DOCTYPE html> but I don't think there is an official guideline.
packages/browser/dart.js checks if the DartVM is available, if not it replaces <script type="application/dart" src="xxx.dart"></script> with <script src="xxx.dart.js"></script>. Assuming you have run dart2js you can do that job manually by replacing the 2 script tags with only <script src="myapp.dart.js"></script>
there's no recommandation.
1) Firefox doesn't care about the Dart source file but pub build does.
If your HTML file doesn't contain a Dart script pub build can copy the file without any processing
otherwise pub build adds JavaScript code that executes instead of the Dart script when the browser doesn't
support Dart.
2) Your doctype is the correct HTML5 doctype and Dart works fine with it.
Related
I would like to evaluate the features of pivot grid using simple test html without cmd.
I've read the information from those links but I still couldn't install a working environment
https://docs.sencha.com/extjs/6.0/co...ivot_grid.html
https://www.sencha.com/forum/showthr...out-Sencha-Cmd
http://se.sencha.com/setup-guide/
I've downloaded the core framework ('ext-6.0.1-trial.zip')
and pivot addon ('ext-addons-6.0.1-trial.zip') from sencha site
and unpacked them on my test web server:
www.mydummy.server.org/lib/extjs/ext-6.0.0/ <- framework
www.mydummy.server.org/lib/extjs/package/ <- addon
and tested it calling the pivots in kitchensink example with:
www.mydummy.server.org/lib/extjs/ext-6.0.0/examples/kitchensink/index.html
in such setup they start without errors.
The target location of the addon is a bit strange for me,
I was sure I should unpack addon to the package directory of the framework
www.mydummy.server.org/lib/extjs/ext-6.0.0/package/
but then the kitchensink example doesn't work
(kitchensink calls pivot with ../../../package/pivot )
Now I wonder how should I include framework and addon in own html example,
I've tried something like:
<link href="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/ext-all.js"></script>
<link href="www.mydummy.server.org/lib/extjs/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="www.mydummy.server.org/lib/extjs/packages/pivot/build/pivot.js"'></script>
<script src="www.mydummy.server.org/lib/extjs/packages/exporter/build/exporter.js"'></script>
The links are ok (no http error) but the simple pivot is not rendered
and framework couldn't load further classes:
[Ext.Loader] Some requested files failed to load.
What is the correct setup of extjs and pivot without cmd?
Thank you,
Annie
Couple things here.
For the KitchenSink, if you open up www.mydummy.server.org/lib/extjs/ext-6.0.0/ in your browser you will be shown an index.html. There will be a green button to show the examples which will point to www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/index.html (notice the build dir in there). Then if you click on the KitchenSink it will load from www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/kitchensink/ (once again, notice the build dir). This is due to the KitchenSink being a Cmd app which will build to that build dir. The examples dir outside the build dir is the development version of the app which is why we still provide it for the source.
Next, about how to use the pivot grid's Cmd package outside of the Cmd package. we build the Cmd package so if you look in the package's build dir you should see a built JavaScript and CSS file that you can load via <script> and <link> in your HTML.
<html>
<head>
<title>Pivot Grid Test</title>
<link href="http://releases/ext/6.0.1.250/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="http://releases/ext/6.0.1.250/build/ext-all.js"></script>
<link href="http://localhost/ext-addons-6.0.1/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="http://localhost/ext-addons-6.0.1/packages/exporter/build/exporter.js"></script>
<script src="http://localhost/ext-addons-6.0.1/packages/pivot/build/pivot.js"></script>
</head>
<body></body>
</html>
Notice I have the exporter.js loading before pivot.js and this mostly works except that I do see something that I'd call a bug for us. In pivot.js, we define Ext.ux.ajax.PivotSimlet which extends Ext.ux.ajax.JsonSimlet (which is in the framework's ux package). This is fine to extend like this but PivotSimlet would only be needed if you want to have simulated data in your application (which most wouldn't unless in dev). Two ways you can fix this, remove that class from pivot.js or include the ux's JavaScript/CSS (however that package contains a lot of code that you may not need).
Thanks a lot for your explanation.
I've added these classes to get an working example:
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/Simlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/DataSimlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/JsonSimlet.js"</script>
I am working with CKEditor 4.4.5 and its plugin Stylesheet Parser 4.4, but I get empty list from the style drop-down.
To make my question easier to understand, please try this code (download from its example site: http://sdk.ckeditor.com/samples/styles.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Stylesheet Parser plugin</title>
<script src="http://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor2" name="editor2" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor2', {
extraPlugins: 'stylesheetparser',
height: 300,
// Custom stylesheet for editor content.
contentsCss: [ 'http://sdk.ckeditor.com/samples/assets/stylesheetparser/stylesheetparser.css' ],
// Do not load the default Styles configuration.
stylesSet: []
} );
</script>
</body>
</html>
It doesn't really work. But the sample on that site works well.
I also find another sample site:
http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/stylesheetparser/stylesheetparser.html
I tried to copy all the sources code from this demo site, but get no luck.
Did anyone else have the same problem?
How can I make the codes above work? It basically uses the source codes from CDN site so I don't think the version of source code matters.
You should try with this version: http://ckeditor.com/addon/stylesheetparser-fixed
The official plugin has some problems since very long ago but they don't seem to plan to fix them.
This problem is caused by Cross-domain request. The CSS file is in HTTP server, and my application is running with a port number. So they are treated as cross domain request.
I also tested the HTML page and CSS file in the local files. However, file://...path is still treated as Cross Domain request in Chrome, but FF and IE works with that properly though.
When I tried this in server, it works properly with Chrome. Unfortunately, there seems no way to make cross domain request work in Chrome and Firefox.
is there any reason for something to work in page inspector and not in real debug mode?
In particular I'm using fullcalendar.min.js (JQuery plugin) in some tab content and I see it very well in page inspector but when debug the calander is not shown..
in header:
<link rel="stylesheet" href="./../../Content/fullcalendar.css" type="text/css" media="all" />
<script src="./../../Scripts/js/fullcalendar.min.js"></script>
in body:
<section class="tab events-tab">
<section class="events-tab-inner">
<div id="calendar"></div>
</section>
</section>
in console of the web page loading I have the below errors (I'm not sure they are directly related to my calendar thing):
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.min.js:3
FB.getLoginStatus() called before calling FB.init(). all.js:56
GET http://localhost:3516/SITE/css/images/star-off.png 404 (Not Found) jquery.min.js:2
Based on your console output that you've included above, it seems that there are a few errors. Not sure why they would work in page inspector and not debug though. It seems like it should be breaking everywhere. Let's approach each error one by one:
1. Invalid Image Paths
It appears that you may be using jQuery UI for some features within your code. The jQuery UI suite contains images located in the /images directory when you download the .zip file that the CSS references as background-images. These images are expected to be nested on directory in from the location of the CSS file. For example,
[CSS Directory]
-> jquery-ui.min.css
[images]
-> star-off.png
-> ...
-> etc.
The only way to change this structure is to modify the relative urls within the minified jQuery UI CSS file.
2. Facebook JavaScript SDK error
I have never personally used the Facebook JavaScript SDK. However, that is what it appears you are using. From the error it sounds like you never initialize the Facebook object via FB.init() before you call FB.getLoginStatus(). Try this:
<script type="text/javascript">
/* Locate your FB.getLoginStatus() call and place FB.init() before it */
FB.init();
FB.getLoginStatus();
</script>
Other than that, you may need to refer to their documentation for how to properly initialize the FB object for use.
Hope this helps. Good luck and happy coding! :)
I'm trying to embed a pde made with processing into a vanilla html page:
Here is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/javascript" src="processing-1.4.1.min.js"></script>
</head>
<body>
<canvas width="700" height="821" data-processing-sources="jailmap2012capacity.pde"></canvas>
</body>
</html>
When the page is loaded, nothing appears.
I'm not getting any errors showing in the console for Firefox, but I am getting an error in Chrome that says, "Uncaught TypeError: Cannot call method 'addListener' of undefined" for client.js on line 6, but I don't think this is related to the problem.
The processing pde renders correctly within the Processing IDE.
Ideas? Suggestions? Thoughts? Thanks!
EDIT: Changed "source" to "src" in script link.
SOLUTION:
It appears that the default .pde produced in the Processing IDE does not include preloading tags necessary for use on the web.
For reference: http://processingjs.org/reference/preload/
Image and fonts will need to be preloaded on the very first line of the .pde, like so:
/* #pjs preload="path/image_1.gif, path/image_2.gif"; font="path/font_1.eof, path/font_2.eof"; */
javascript is not "application/javascript", it's "text/javascript", and if you're using , leave off the type. It's not necessary. On which note: add at the top. With that covered, if running that using localhost or online and that doesn't fix things (you cannot reliably run from file:/// unless you tell your browser to allow file XHR from file), check your console log, and report back what the errors are.
I don't know if this is a well known 'thing' or something new in whatever version of Firefox it just updated itself too - but in either case I have no idea how to google for this question so I'll have to ask it here.
I have a DIV in my DOM that I am trying to directly access by id, in the most simplest form like this:
alert(btnTest.id);
This works fine in all browsers, but was causing issues in firefox that actually led to the browser being in a strange 'broken' state.
The error I was getting was 'btnTest is not defined'. I did not get this error in Safari, Internet Explorer or Chrome.
I assumed I had mismatched HTML tags, or javascript curly braces or something else missing. Eventually after stripping everything out I tried removing the DOCTYPE. Suddenly in Firefox (v 3.0.10) it started returning the correct ID as expected.
What is going on!!! ?? Surely 'strict' mode should allow me to access named elements, and if not then why do all the other browsers let me.
Note: I can easily work around it with $('#btnTest')[0].id, which is what I'm going to have to do now until i can figure out a better solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="blueCircles">
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {
alert("ID retrieved through jQuery: " + $('#btnTest')[0].id);
alert("ID retrieved by accessing global variable: " + btnTest.id);
});
</script>
</head>
<body>
<div id="btnTest">
</div>
</body>
</html>
There is nothing in any W3C specification that says object references should be established in the global scripting scope for elements with id attributes. This is considered to uneccessarily pollute the global namespace and can result in confusing errors.
Firefox establishes the references when running in quirks mode for the purposes of IE compatibility. Johnny Stenback explains in the third comment on the bug for adding this support why this isn't supported in standards mode:
This feature does affect standard
compliant code that for instance
checks for the existance [sic] of a global
variable to set it only once. With
this change, that "varible" [sic] may now be
a reference to an element in the
document, and the code may not work
the way the developer intended.
That's the reason we decided to make
this quirks only.