I am using JQxGrid within my Angular 8 application and while everything works in IE 11, if I add the jqxGridModule with just import in appModule.ts it fails in IE with following error in vendor.js
var dataType = that.source._source.dataFields.find(gridField => gridField.name === dataField).type;
Any help appreciated
Related
Application is not loading in safari 15 and higher versions, there are no console errors.
In chrome our application is being detected as angular application and the component is loaded as Angular widget component here
Where as in safari it is loaded as
Screenshots attached.
Source code:
<script>
var angWidgets = 'unauthenticated';
var cId = '#ViewBag.ClientId';
</script>
#{string angWidgetsHtml = "<unauthenticated></unauthenticated>";}
<app></app>
<script>
var angWidgetsHtml = "#Html.Raw(angWidgetsHtml)";
</script>
Inspect source code image in Safari
Inspect source code image in chrome
We are trying to upgrade our app to Rails 6 with Webpacker (and Stimulus). Things are going fine except for TinyMCE. We have 2 problems, I will ask them in separate SO questions.
We installed TinyMCE using
yarn add tinymce
and have version 5.3.0
In our stimulus controller header we have:
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/skins/ui/oxide/skin.min';
import 'tinymce/skins/ui/oxide/content.min';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
And then in the controller connect block we have:
connect() {
console.log('gonna reload');
require.context(
'!file-loader?name=[path][name].[ext]&context=node_modules/tinymce&outputPath=js!tinymce/skins',
true,
/.*/
);
tinymce.init({
selector: '.tinymce',
plugins: ['paste', 'link'],
skin: false
});
}
This is code that essentially works, except that in the console I see:
VM40 application-68201fac0dcbbcb543e0.js:213771 GET https://xxx.ngrok.io/packs/js/icons/default/icons.js net::ERR_ABORTED 404 (Not Found)
VM40 application-68201fac0dcbbcb543e0.js:224775 Failed to load icons: default from url https://xxx.ngrok.io/packs/js/icons/default/icons.js
Do we need another require.context to handle the loading of those?
It looks like TinyMCE no longer loads the icons dynamically, so Webpack must be instructed to include them in the bundle manually. Adding the icons import after the tinymce import worked for me:
import 'tinymce/icons/default';
I have come across this strange problem and it is driving me nuts.
It looks like a bug, but I don't know if maybe I am doing someting wrong.
The CSS attached to a component via cssUrl doesn't work on Internet Explorer.
If I add some content to the html template and I use classes from the CSS, those classes are not applied in IE. However, the same code works fine in Dartium, Chrome and Firefox.
I have created a sample project in github showing the error:
https://github.com/gonzalopezzi/ie-angulardart-shadowdom-bug
The project has the following dependencies:
dependencies:
browser: 0.10.0+2
angular: 0.11.0
shadow_dom: 0.10.0
(I have tried to avoid "any" but those are the latest versions of such packages)
I have a very simple component:
import 'package:angular/angular.dart';
#Component(selector: 'internet-explorer-bug',
templateUrl:'internet-explorer-bug/internet-explorer-bug.html',
cssUrl:'internet-explorer-bug/internet-explorer-bug.css',
useShadowDom: true,
publishAs: 'cmp')
class InternetExplorerBug {
}
This is the css file (internet-explorer-bug.css):
.red-div {
background-color: red;
}
And this is the template (internet-explorer-bug.html)
<div id="main-div">
<div class="red-div">Red background?</div>
</div>
The component works properly in Dartium, Chrome and Firefox. It doesn't show the red background in Internet Explorer, though.
I have tested it in Internet Explorer 10 and 11. These are the results:
The red background is not displayed
The browser downloads the css file (I can see that in IE dev tools)
If I inspect the DOM, I see a strange css attribute assigned to the div with the name "background-color:red" and no value:
.red-div {
background-color:red: ;
}
I have posted the same question in the mailing list (here). If I somebody helps me there I will post the solution here too.
Any help will be appreciated.
Thanks in advance.
I guess this line causes the problem
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
This is deprecated. You should use
<script src="packages/web_components/platform.js"></script>
You need to change your pubspec.yaml too (shadow_dom to web_components)
I am using Tinymce version 4.0.12 and firefox version 29.0.1, .net 4.0, mvc 4.0, VS 2012
I am facing the issue with Tinymce editor and firefox. when reloading screen, it shows rendered html e. g. hi in editor for fraction of seconds only in firefox browser. whereas Other part of screen loads normally. In other browsers like IE, Chrome it works perfectly fine.
Following is my code to initialise tinymce editor.
{
tinyMCE.baseURL = GetNewEmailURL() + "scripts/tinymce/js/tinymce";
tinyMCE.init({
menubar: false,
mode: 'none',
submit_patch: false,
add_form_submit_trigger: false,
selector: '#tinyMceForViewMail',
statusbar: false,
plugins: 'noneditable',
toolbar: false,
readonly: true,
setup: function (editor) {
editor.on('init', function () {
$("#" + this.id + "_ifr").height(window.screen.height - $("#TopMenuContainer").height() - $("#breadcrumbs").height() - $("#subject").height() - $("#MailHeader").height() - $("#Attachment").height() - 276);
});
}
});
}
I have tried with different attributed but no success. Please please help me out with this.
I guess no one else faced such issue. So I am answering my own question :).
Well after many trial and errors finally got the solution.
Problem was TinyMc script and other scripts were taking time to load. Thus textarea with rendered html was displayed for some seconds. This textarea is to which i am binding TinyMc control. I had found two solution(felt like hitting jackpot :P).
Set visibility of textarea hidden.
or
Moved all Jquery files and css in bundle config, so it gets loaded beforehand and so avoid any delays in loading tinyMc.
I guess 2nd solution is more appropriate.
Happy Coding ..
The following Dart code does not work on Chrome or Firefox.
import 'dart:html';
void main() {
SpeechSynthesisUtterance speechSynthesisUtterance = new SpeechSynthesisUtterance();
speechSynthesisUtterance.lang = 'en-US';
speechSynthesisUtterance.rate = 1;
DivElement div = querySelector("#text");
querySelector('#read').onClick.listen((e) {
speechSynthesisUtterance.text = div.text;
window.speechSynthesis.speak(speechSynthesisUtterance);
});
}
The browser's console displays this error:
Uncaught ReferenceError: SpeechSynthesisUtterance is not defined
This was tested on:
Chromium Version (31.0.1650.63) & Firefox (26.0) on Ubuntu 13.10 x64
Any idea what is going wrong?
This is not a Dart-specific problem. If you try the equivalent JavaScript it will also not work in those browsers since this API does not seem to be fully supported yet. It does work in Dartium though.