Dart js-interop not working if .dart file isn't included - dart

After announcing new strategy for Dart, i decided to change include from
<script type="application/dart" src="/dart/script.dart"></script>
to
<script type="text/javascript" src="/dart/script.dart.js"></script>
But in that case js-interop seems broken. dart:js.context is empty.
Is there any workarounds for this?

It looks like you are missing this script tag:
<script data-pub-inline src="packages/browser/dart.js"></script>
There is also an open issue to fix this http://dartbug.com/23005

Related

Highcharts maps (even samples) don't work

Running MacOS 10.13.5 and Windows 10 in Parallels. Load Highcharts samples from https://www.highcharts.com/maps/demo/color-axis ... the map background is gray and the states only fill in as I mouse over them.
This happens in both MacOS and in Windows. Screenshot is from Highcharts site.
EDIT Per comment I edited to look like this (since I display both charts and maps from same module):
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<!-- USE MASTER BRANCH OF HIGHCHARTS MAPPING AND NOT RELEASE VERSION **** TEMP *** https://stackoverflow.com/questions/51051239/highcharts-maps-even-samples-dont-work
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
-->
<!--
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
-->
<script src="https://github.highcharts.com/master/maps/highmaps.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/data.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/exporting.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
But I get error 16. I assume I should pull all the libs from github but it looks like as well some of the names have changed?
It seems that this bug is already fixed on master branch of Highcharts:
<script src="https://github.highcharts.com/master/maps/highmaps.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/data.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/exporting.js"></script>
<script src="https://github.highcharts.com/master/maps/modules/offline-exporting.js">
Live demo: https://jsfiddle.net/BlackLabel/teazgj5r/
Fix will be included in the next release of Highmaps.

Highcharts not defined on highcharts-more.js file

I have the minified highcharts-more.js and the error is ocurring in the last piece of code:
Declaration:
<script type="text/javascript" src="./js/highcharts/highcharts.js" async></script>
<script type="text/javascript" src="./js/highcharts/highcharts-more.js" async></script>
And the last piece of code:
return d})})()})(Highcharts);
Highcharts is pointed as not defined.
Already tried a couple of things but can't make this work.

jQuery UI error: TypeError: this._addClass is not a function [duplicate]

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

Angular material not working

I wanted to use angular material in an AngularJS application so I downloaded it with all its dependencies:
<script src="bower_components/hammer/hammer.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
And then I included it in my App:
var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngSanitize', 'ngMaterial', 'ngAnimate', 'ngAria']);
After that I wanted to try it on a button:
<md-container> <md-button>boutton1</md-button> </md-container>
And here is the result ( on Chrome and Firefox):
And when I click on it I have this:
Did I do something wrong?
It looks like you are not including the stylesheet.
Try adding the following:
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css">
Alternatively, if you are using Angular CLI, you can insert this line #import "~#angular/material/prebuilt-themes/indigo-pink.css"; into your styles.css.
Just make sure to follow the official instructions https://material.angular.io/guide/getting-started

Why isn't my dart/polymer custom element rendering?

I'm trying to write a custom element in dart/polymer but nothing renders and no errors are displayed. Does anyone know what I'm doing wrong? All the details are in the following gist.
https://gist.github.com/heuristicat/7947755
Thanks.
I found the problem. The following line...
<link rel="import" src="hello-world.html">
should have been...
<link rel="import" href="hello-world.html">
It is so obvious but all the src attributes in the script tags played tricks on my mind.
Thanks.
For Polymer you need the following script tags within the <head> tag after any element imports
<script type='application/dart'>
export 'package:polymer/init.dart';
</script>
<script src="packages/browser/dart.js"></script>

Resources