I am new to typescript and am trying to get a simple class going. I have the below code and when I run, I keep getting a syntax error. I tried even an empty class and nothing.
I am using ASP.NET MVC5 (note, if I just have a function in the code, it works fine).
Inside Site.ts I have:
class Facebook {
constructor() { }
open() {
window.open("http://www.facebook.com");
}
}
var social = new Facebook();
I am calling the code by a link
open
I don't even get to click, right away, when loading I get
JavaScript critical error at line 1, column 1 in http://localhost:20870/Scripts/site.ts\n\nSCRIPT1002: Syntax error
It seems to work in the playground:
Click here to see my workout
Any ideas?
Looks like the browser is trying to execute the TypeScript and not the JavaScript. Double check your <script> tags (or any other thing you are using to load the code e.g. requirejs)
I had the same problem, when using a TypeScript tutorial on www.typescriptlang.org.
I realized that my script tag was referencing the TypeScript file and not the JS file:
<script src="greeter.ts"></script>
instead of:
<script src="greeter.js"></script>
Related
I am adding manually an external JS script into my component. The script works fine, but I can't inject it again.
var div = this.document.getElementById("div-element");
div.appendChild(script);
I am trying to delete that script firstly and add it to DOM again but I am getting en error:
"redeclaration of const".
I checked many times and I am sure the old script was removed from DOM completly.
Seems Angular keeps javascript somewhere in memory, do you know guys how to handle it?
If you know variables in this script, you can write a function, called, when component need to be destroyed:
function deleteExternalCode() {
delete nameVar1;
delete nameVar2;
....
}
Hello fellow developers,
I have a simple question. I'm working on my javascript skills, which are obviously not the best :). I'm trying to code a search box with the giphy API, by tutorial. My code was working to 100% like the code displayed in the tutorial until video 5, but now (video 6) it's not working anymore.
I'm getting the error "Uncaught TypeError: Cannot read property 'addEventListener' of null". I googled a lot and tried the fixes which I found here, but they are not working on my code :/ The funny part of this is, that my code is working on codepen.io! So the only difference between codepen and my local website, are multiple search forms and bootstrap. So I'm guessing the problem are multiple search forms, because of this lines:
const searchGif = document.getElementById("search-gif");
const searchInput = document.getElementById("gif-search-string");
searchGif.addEventListener('submit', function(event){
event.preventDefault();
const query = searchInput.value;
search(query);
})
But I thought because I'm grabbing the right form by ID before I execute the rest of my javascript code, it is ok? So I hope that you can help me to resolve my problem. Like I said, I'm not very good in JS and just trying to get better and better <3.
PS: loading my script by script tag at the end of the html body
PS2: Here is my complete HTML Code -> index.php - timeline-gif.php
It's how you "start" your code. Loaded !== rendered (not 100% sure that these are the correct terms).
Try to wrap it in a self executing function:
(function() {
// Put your code here - dom should be available
})();
I'm trying to get a customized built-in web component to work in codesandbox.io. This is the code:
class MyDiv extends HTMLDivElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = "works!";
}
}
customElements.define("my-div", MyDiv, {extends: 'div'});
<div is="my-div"></div>
The error I'm getting:
Failed to construct 'HTMLDivElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
Tested in Chrome 67, Arch Linux. Here's the link: https://codesandbox.io/s/yqln560jzj
It does work here in a snippet, and it also works on codepen: https://codepen.io/connexo/pen/ZjEbqo
What am I missing here?
If it doesn't works it's because Codesandbox is using a kind a Javascript preprocessor (Typescript?) on external JS files, that will execute the code before (to detect syntaxt errors or so on).
The customElements.define() method is called twice, and fails the second time it is called because you can define a custom element only one time.
You can see it by calling customElements.get() inside your script, and see it's already defined.
console.log( customElements.get( 'my-div' ) )
If you put the Javascript inline (in the HTML file index.html) in a element it will work fine.
Note that the second error you get it's because you are using the Babel preprocessor in the Codeopen snippet. You must disable Babel and it will work.
What am I missing here?
Nothing. It's codesandbox.io that is missing Custom Elements support.
In short, I'm trying to call an external JS function which my 3rd party required me to include, in order to use their API, but doesn't work as it supposed to.
From what I've read, I am supposed to use, for example, window.extFn() after including the external JS in my index.html which contains the extFn() like so
<script src="https://example.com/external.js"></script> <-- actually not like this, see update 2 as I imported the library locally
...and supposed to use it like how it was answered here: Call external Javascript function from react components regardless of whether the said function is inside a file or simply defined on index.html <script> section. This had worked on the JS file I created for testing this.
//File: test.js
function test() {
return "Hello";
}
...imported the JS file with script tag like usual, and using console.log(window.test()) in my React Component's render() returned Hello.
I tried moving the import to HTML head from body and vice-versa but the error I'm still getting is:
TypeError: window.extFn is not a function
QuickCheckout.render
....
22 | }
23 |
24 | render() {
> 25 | window.extFn({
26 |
View compiled
▶ 20 stack frames were collapsed.
And when I look into my browser console, for some reason I have (which seems to be the key problem)
Uncaught SyntaxError: Unexpected token < external.js:1
Tried console.log(window.extFn) and it returns undefined
So I think it might be possible that the said JS is the problem itself, but I'm at my wit's end with this. Meanwhile I had emailed my 3rd party support team, does anyone have any advice on this? Thank you very much.
UPDATE: Now my test.js file above, which had worked in my experiment, produces the Unexpected token < error as well in my console...
UPDATE 2: I apologize for your problems. But I actually imported the JS from local source due to having to port their library as they had jQuery 2 instead of 3.
<script src="assets/js/external.js"></script>
And to my dumbness, i forgot the trailing /. Thank you for your help.
It seems that the path of external.js is wrong, which returns a html file instead of js file
you can check what the request of external.js returns at the "network" tab in chrome dev-tool
At the begining of file, before the class definition, please add
let extFn = window.extFn
then inside of component,you can use it.
extFn()//call inside component
After i include the bootstrap.js
<script type="text/javascript" src="/js/bootstrap/js/bootstrap.js"></script>
I get followning error in the console:
Uncaught TypeError: Cannot read property 'documentElement' of null
The boots collapse works just fine but the console get spammed this error.
I have included jquery before bootstrap.
Anyone else had this problem before?
Edit:
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
if (e.isDefaultPrevented() || !inDom) return
var that = this
this is a snipet from the bootstrap.js script.
It seems the error comes always in the tooltip function in the var inDom line at the documentElement part
You most likely have another tooltip library still in use (like JQueryUI/Tooltip) OR you're trying to attach a tooltip directly to the document element. Please look into your code for something like:
$(document).tooltip
or something like that, and remove it in order to make things work again. Be sure to review every other .tooltip() call you might already have, since they'll most likely not work anymore: you'll need to manually port them to Bootstrap in order to make them work again.
If you want to keep both Bootstrap/Tooltip and JQueryUI/Tooltip (assuming that's your scenario), you can use $.widget.bridge to manually change the JQueryUI tooltip plugin name:
// Change JQueryUI/tooltip plugin name to 'uitooltip' to fix name collision with Bootstrap/tooltip
$.widget.bridge('uitooltip', $.ui.tooltip);
You need to to this AFTER importing the JQueryUI js file and BEFORE importing the Bootstrap js file: while you're at it I also suggest you to do the same with button/uibutton to solve the exact same problem. The result code will look like that:
<script type="text/javascript" src="path/to/jqueryui.js" />
<script type="text/javascript">
// Change JQueryUI plugin names to fix name collision with Bootstrap:
$.widget.bridge('uitooltip', $.ui.tooltip);
$.widget.bridge('uibutton', $.ui.button);
</script>
<script type="text/javascript" src="path/to/bootstrap.js" />
Then you can just re-route your $(document).tooltip call to $(document).uitooltip to make everything work.
Alternatively, if you don't find the offending js code and/or you don't want to use $.widget.brige, you can always manually patch bootstrap.js to avoid this kind of error. This can be done by replacing the following line (#1384 in bs 3.3.1):
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
with this line:
var inDom = $.contains((this.$element[0].ownerDocument || this.$element[0]).documentElement, this.$element[0])
Keep in mind, tho, that you'll still have a broken .tooltip() call in your code somewhere.
See also:
http://www.ryadel.com/2015/01/03/using-jquery-ui-bootstrap-togheter-web-page/ (an article I wrote on my blog to better explain the issue)
https://github.com/twbs/bootstrap/issues/14483
http://jqueryui.com/tooltip/
Check whether the element is null before initialising it
i.e.
if($('[data-toggle="tooltip"]') != null)
{
$('[data-toggle="tooltip"]').tooltip();
}