initialization of dojo widget - javascript

I tried to create custom widget for my site. when I loaded page it says:
mixin #0 is not a callable constructor.
clsInfo.cls.prototype is undefined
I can't find any information about clsInfo, so I don't know what is it. maybe the problem that I use dojo from google:
and my own script is located on localhost. so when my dojo on page initializes something goes wrong with my script. I can't find any good info on dojo, maybe I search in wrong places?
please help me to resolve my problem

I ran into this when I was trying to override a dijit.Dialog so I could bind events to controls within it. We've yet to see if the binding part will work, but if you look at the source, this happens when one of the bases passed in as the second argument fails to resolve to an "[Object function]". In my case, I was passing a String in.
dojo.declare takes 3 arguments:
The name of the custom object "class" you're building
An array of base classes, parents to provide functionality (not the string names of those classes)
A hash of functions and declarations
So if I want to override dijit.Dialog, I have to do:
dojo.declare("myDialogType", [dijit.Dialog], {
function1() {/*Code*/},
function2() {/*Code*/}
}
I had ["dijit.Dialog"] as my second argument and that was the problem.
I strongly recommend using Web Inspector or Firebug with uncompressed local copies of the Dojo library rather than the CDN to figure out what's going on and debug these types of problems. Dojo's documentation is extensive but not complete in some areas and some behaviors have to be figured out by looking at what the code expects. That's not intended as a slight to the authors; once you get it going it's a pretty awesome product, and any documentation for volunteer work is appreciated.

Are you sure Dojo is loading? Did you put your code in a dojo.addOnLoad()? When using a CDN you sometimes run into issues with execution times. dojo.addOnLoad() will not only trigger when the DOM is loaded, it gets called when dojo resources have downloaded, such as dijit._Widget.

I've run into this problem when I screw up the order of my requires which makes _WidgetBase not what _WidgetBase really is. Seems like a simple spot to screw up.

Related

I'm trying to call event but my Visual Code say ("event is deprecated ts(6385)")

I'm studying Javascript using Visual Code and every time a similar exercise that uses 'event' (the event shows in the code with the strikethrough like e̶v̶e̶n̶t̶) appears I can't complete it because of this annoying issue. In the description pop up a warning showing the issue ("event is deprecated ts(6385)"). I look out in the forums and stack over flow but I can not find any answer for this problem, only a few places says the lib dom and #deprecated, but I don't what to do.
Please, any way to help and learn to pass this problem out will be very useful.
function sayMyFirstName(element){
alert("My First name is..." + element.value)
}
function sayMyLastName(){
console.log(event)
}
It sounds like you're getting TypeScript validation for a simple JS project. There are several things you can try:
In your settings file (settings.json):
"typescript.validate.enable": false
... OR ...
In your .js source file(s):
/*tslint:disabled*/
A separate issue is why you're getting the "deprecation" warning in the first place. This is the reason:
https://developer.mozilla.org/en-US/docs/Web/API/Window/event
The read-only Window property event returns the Event which is
currently being handled by the site's code. Outside the context of an
event handler, the value is always undefined.
You should avoid using this property in new code, and should instead
use the Event passed into the event handler function. This property is
not universally supported and even when supported introduces potential
fragility to your code.
In other words, "event" should really be passed as an argument to a JS event handler. You shouldn't be using the global object; you shouldn't NEED to use the global object.
Here are a few good tutorials:
Introduction to events (MDN.com)
JavaScript Events
Strong suggestion:
If you're learning JavaScript, please make sure your study materials are up-to-date (definitely covering ES6!). This is a good book: Secrets of the JavaScript Ninja 2nd Edition
It looks to me that the TypeScript Validator is saying the implicit passing of event is deprecated. A simple fix would be to pass the event into the function as a parameter
function sayMyLastName(event){
console.log(event)
}
I'm migrating a lot of functionality from JS to Angular and found this issue a lot
You can use "window.event" to replace the deprecated "event".
You just need to open >Preferences: Open Workspace Settings (JSON) by Ctrl + Shift + P in VSCode then add this line to JSON file "editor.showDeprecated": false to disable a show deprecated in case if you only need to some workspace.
If you want to disable all workspace then use >Preferences: Open Settings (JSON) instead.

Why jQuery-migrate in not replacing depreciated functions directly in the code?

Im using jQuery-migrate on a big project. I corrected all the warnings I could but now the warnings are inside libraries.
Some libraries are not updated anymore so I can't update them to make them work with jQuery-3.3.1.
Also, I can't replace the depreciated functions directly in the libraires because it is creating errors.
So I think that I'll keep jQuery-migrate in my project.
My question is : If jQuery-migrate is able to correct the depreciated functions when called, why it can not correct them directly in the code ?
JavaScript does not lend itself to static code analysis.
Say you needed to replace the foo function.
That would be fairly trivial if the code that called it was simply:
something.foo();
It becomes rather harder if it is:
function call(bar, method) {
bar[method]();
}
call(something, "foo");
… and even harder if the logic needed to get there was more complicated.
Creating something.foo so it just exists if anything try to access it at runtime is much simpler.

How can I debug this JavaScript error?

I have been asked to fix an issue with a website and I am encountering an issue with a JavaScript error.
On the home page, [removed website link], I am receiving the error Uncaught TypeError: undefined is not a function. However, the function being called on that line (line 30) should exist, as the jQuery plugin is being loaded.
The call-stack just shows a series of anonymous functions pointing towards the jQuery file. I am having trouble determining why this is producing an undefined function error.
I have tried using the Chrome debugger to step through the code where the error occurs but it just seems to highlight the jQuery source file for every step.
My question is this:
How do I go about tracking down the source of the issue when the trail is just a series of anonymous functions in the jQuery source file?
Is there something I am missing here or that I am not considering?
Thank you.
Edit:
As is it not clear, the method being called, jQuery.ContentSlider is in fact being included within the page within the file testimonials.js.
This is not just a "What's wrong with my code" question, but also an inquiry into how I handle situations such as this in the context of JavaScript & jQuery specifically.
A call stack of anonymous functions is confusing to me, and I have already attempted to take the obvious steps, such as verifying the plugin is included and that this inclusion takes place before attempting to utilize that plugin.
Sorry for the confusion.
Edit - Solution Found
It appears that although jQuery and the plugin were included prior to use, another copy of the same jQuery file was being injected by a Joomla! module. Since this was the exact same Google hosted jQuery file, it did NOT appear twice in the Resources tab in the Chrome Developer Tools. It appears that Chrome will parse jQuery twice, but doesn't show it as being included twice. So, the version with the plugin attached was being overwritten.
Thank you to those who answered. Thanks to A. Wolff for bringing that piece of information about the Resource tab to my attention.
You're loading the slider after you instantiate it.
Reverse the order of these two blocks:
<script type="text/javascript">
$(function() {
jQuery('#two').ContentSlider({
width : '440px',
height : '240px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});
</script>
<script src="/templates/sp/javascript/jquery.sudoSlider.min.js"></script>
Edit: To the heart of your well-formed question about debugging, generally, Undefined is not a function, especially when dealing with frameworks, is a symptom of trying to access a method before it exists, which is why your attempted function call returns undefined rather than a function.
It's almost always the result of loading a framework after trying to call it, or in an asynchronous context, of not waiting for the framework to load or do something important.
EDIT 2: The above answer is not correct, as A.Wolff points out: it's not that you must reverse the order of the two blocks, but that:
1) The second framework is probably not the one you want, or
2) You have called jQuery('#two').ContentSlider when you meant to call .sudoSlider, (or whatever is appropriate for that framework).

Export Flash parameters to JavaScript

I'm trying to pass parameters from Flash (as 3.0) to JavaScript.
Tried all methods I found in via. Google, as:
ExternalInterface.addCallback ("fonts", recieveFromJS);
Always one and the same problem; when I try to call the fonts () swfobject, JavaScript gives the error that the method doesn't exist.
Assuming your javascript code does not have a syntax error somewhere, this usually happens because of jquery (or some other js bundle) is stepping on your code. Try using a test page with just the javascript you need, removing all other code and header entries. If it works, then add scripts and links back, one at a time, and you will find which code is breaking it. If it does not work even in your test page, then you have a code/syntax/logic problem with the snippet of code you are working with. If you still have a problem with a code snippet, post it here and I or someone will surely help debug it for you.

prototype and jQuery peaceful co-existence?

I know very little about JavaScript but despite this I'm trying to cobble something together on my wordpress blog. It's not working, and I don't know how to resolve it, and hey, that's what StackOverflow is for, right?
Firstly, the error message is:
Error: element.dispatchEvent is not a function
Source File: http://.../wp-includes/js/prototype.js?ver=1.6
Line: 3936
It happens on page load. My page load handler is registered thusly:
Event.observe(window, 'load', show_dates_as_local_time);
The error goes away if I disable some other plugins, and this (plus googling) led me to conclude that it was a conflict between prototype and jQuery (which is used by some of the other plugins).
Secondly I'm following the wordpress recommended practice of using wp_enqeue_script to add a dependency from my JavaScript to the Prototype library, as follows:
add_action( 'wp_print_scripts', 'depo_theme_add_javascript' );
function depo_theme_add_javascript() {
wp_enqueue_script('friendly_dates', 'javascript/friendly_dates.js', array('prototype'));
}
Now I'm also aware that there are some potential conflicts between jQuery and Prototype which are resolved using the jQuery noConflicts method. I've tried calling that from various places but no good. I don't think this is the problem because a) the noConflict function relates solely to the $ variable, which doesn't seem to be the problem here, and b) I would expect wordpress to sort it out for me because it can...
Lastly, using the Venkman debugger I've determined that the element referenced in the error message is indeed an HTMLDocument but also does lack a dispatchEvent. Not sure how this could happen, given it's a standard DOM method?
There is a nasty trick many libraries do that I've taken a distinct liking to, and it looks like prototype is one of these.
Mootools does this, If I am right, and it involves overloading many of the prototypes on the basic classes, monkey patching them.
And likewise, I similarly encountered strange behaviour when mootools and jQuery were present, usually jQuery dying because it was calling some object method which had been somehow overloaded/monkey patched by Mootools.
Also, mysteriously, taking mootools out of the script usage list, resulted in everything running much faster, which I concluded was due to less object pollution.
Now I could be wrong, but I concluded from my experience such libraries just simply don't like to co-exist with each other, and seeing how mootools code seemed to me to degrade speed at which normal things were done, I sucked up and ported all mootools based code to jQuery ( A time consuming deal I assure you ), and the result, was code that was fast and didn't have weird errors that were unexplainable.
I recommend you consider migration as at least One of your options.
One More thing, when writing:
I tend to use this syntax with all my jQuery driven code, for a bit of safe encapsulation in the event somebody breaks '$' somehow.
Runtime Code
This waits for document.ready before executing:
jQuery(function($){
code_with_$_here;
});
jQuery Plugins
(function($){
code_with_$_here;
})(jQuery);
Using these will make it easier for people using any jQuery you happen to write to be able to use it without much of a conflict issue.
This will basically leave them to make sure their code isn't doing anything really magical.
Its worth reading this article on the JQuery site about Using JQuery With Other Libraries. It deals with more than just the noConflict option.
I think you should search well because all jQuery plugins has a prototype version and all prototype plugins has a jQuery version.
If you really don't find what you look and you can't use only one library, take a look here at
jQuery.noConflict();
But again, i think it make no sense to load over 15-20kb for each library :)
Thanks for the suggestions all. In the end I think Kent's explanation was the closest, which basically amounted to "Prototype is broken". (Sorry if I'm summarizing you incorrectly :)
As for the jQuery.noConflict option - I already mentioned this in the question. It makes a difference when you run this method, and I have very little control over that. As I said, I have tried running it in a couple of different places (specifically the page header and also from my script file), to no effect. So, much as we'd all like it to be, "just use noConflict" is not an answer to this question, at least not without additional information.
Besides, jQuery.noConflict seems to be about the $ variable, and the code around the error point does not deal with that variable at all. Of course they could be related indirectly, I haven't tracked it down.
So basically I ended up rewriting the script using jQuery instead of Prototype, which actually had its own problems. Anyway I've published the whole war story on my blog, should you be interested.

Categories