I am trying to use jquery for dom manipulation on mount event of a component like this.
<my-tag>
<p>hi</p>
<script>
this.on('mount',funciton() {
$('.abc').hide();
})
</script>
</my-tag>
This throws an error shown below
TypeError: Cannot read property 'toString' of undefined
at ServerResponse.writeHead (_http_server.js:189:44)
If I replace
$(".abc").hide()
with
console.log("test");
This works perfectly. Any idea why this is happening?
Given below are the version details
Riot version:
riot-cli: 2.3.14 - https://github.com/riot/cli
riot-compiler: 2.3.22 - https://github.com/riot/compiler
Update
This issue happens only if if place it in this.on('mount')
I tried placing it on this.on('all') and it works fine.
I don't think all is a valid Riot event. As for using jQuery on the server, I'd avoid this if possible. If you are hiding an element in your component, then you should be using Riot to switch out a CSS class. If this element is outside your component, you should be emitting events into an outer / global observable / pubsub handler. If you must use jQuery you have to make sure your loading jQuery via Node's require, or using other solutions like DomJS or Cheerio.
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;
....
}
I'm using jQuery with an Electron app, but I always get an error that seems to be corresponding with jQuery's tween function.
I'm loading jQuery via standard node require:
<script type="text/javascript">window.$ = window.jQuery = require('jquery');</script>
When I include jQuery via a script src, I get the same error (jQuery version 3.3.1)
for example calling $("#loading-overlay").fadeOut(200); causes:
Uncaught TypeError: (Animation.tweeners[prop] || []).concat is not a function
at createTween ([PATH]/node_modules/jquery/dist/jquery.js:6848)
at Object.defaultPrefilter ([PATH]/node_modules/jquery/dist/jquery.js:7021)
at Animation ([PATH]/node_modules/jquery/dist/jquery.js:7160)
at HTMLDivElement.doAnimation ([PATH]/node_modules/jquery/dist/jquery.js:7293)
at Function.dequeue ([PATH]/node_modules/jquery/dist/jquery.js:4376)
at HTMLDivElement.<anonymous> ([PATH]/node_modules/jquery/dist/jquery.js:4418)
at Function.each ([PATH]/node_modules/jquery/dist/jquery.js:354)
at jQuery.fn.init.each ([PATH]/node_modules/jquery/dist/jquery.js:189)
at jQuery.fn.init.queue ([PATH]/node_modules/jquery/dist/jquery.js:4411)
at jQuery.fn.init.animate ([PATH]/node_modules/jquery/dist/jquery.js:7304)
I'm only having this problem with Electron (version 4.0). Does anyone know what this is caused by?
OK, this was stupidity on my part. Autocomplete made me add the method "each" to the Object prototype instead of my custom class... This apparently confused jQuery because it found the property "each" in Animation.tweeners (because it was in all Objects).
But I learned, when facing a really confusing error that makes no sense, check if you accidentally overwrote a prototype you didn't want to change...
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.
We just installed an error-tracker for our Ember-application, and the only error that is reported is Cannot read property 'find' of undefined. The code that cause this error is within a component, and looks like this:
this.set('interval', setInterval(() => {
const current = this.get('counter') - 1;
this.set('counter', current);
this.$().find('.countdown-number').text(current); // <- error here
}, 1000));
I don't understand how this can happen. How can $() be undefined, since it's a part of the ember framework?
According to the error-tracker, it happens for a bunch of different browsers, latest Chrome for example. I however can't reproduce the error in any browser.
I know this isn't the "ember way" of updating a text in a div, but I would prefer to not have to rebuild a lot, I just want to fix the bug with as little changes as possible.
this.$() will be undefined if component is destroyed or didn't render properly. Make sure you call this.$() only when component is in DOM and on willDestroyElement you remove all events that could access this.$().
I'm using jQuery 1.3.2 and it's breaking under Safari 4 for mysterious reasons.
All of my javascript references are made right before the tag, yet with the following code:
var status = $('#status');
status.change( function(){ /* ... */ } );
The following error is displayed in the Web Inspector:
TypeError: Result of expression 'status.change' [undefined] is not a function.
However the error is not encountered if I eliminate the variable assignment attach the change method directly like so:
$('#status').change( function(){ /* ... */ } );
Why? I need to use variables for this and several other findById references because they're used many times in the script and crawling the DOM for each element every time is regarded as bad practice. It shouldn't be failing to find the element, as the javascript is loaded after everything except and .
Try changing the variable to something other than "status."
It's confusing your variable with window.status (the status bar text). When I typed var status = $('#status') into the debugging console, the statusbar changed to [Object object]. Must be a bug in Safari.
If you put the code inside a function, so that status becomes a function-local variable, it should work.
It's standard practice in jQuery to wrap things in a
$.onready(function() {
});
This makes sure the DOM is loaded before you try to manipulate it.