Develop Reference

Knockout.js 3.4.1 throws multiple bindings error

I'm working on a rather large project where I use KnockoutJS (large as in it would be impossible to post all related code here), and today I upgraded from Knockout 3.4.0 to 3.4.1. After doing this, I am suddenly getting a multiple bindings-error on every pageload ("You cannot apply bindings multiple times to the same element").
I have been using Knockout for a while, and I am very confident that I am in no way applying bindings multiple times to the same element. I only call applybindings once, and I have confirmed that this statement also only ever runs once by debugging that code (and also searching for any other instances of this function).
After debugging this problem for I while, I decided to downgrade again, to Knockout 3.4.0. And as it turns out, the error is only showing up on the latest build, version 3.4.1.
Anyone else noticed this behaviour? What did they change to cause this?
Even when I run the debug-version of KO, the error can not tell me what element it is referring to, which makes it hopeless to figure out where the error actually comes from.
I am also not using the second optional parameter when calling applybindings (no specific element target), as I am only doing this once anyway.

5 months after your question someone raised an issue with the same problem on their Github page. It was fixed here.
Brian M Hunt's (one of the owners) comment:
The issue was that the valueAccessor() needed to be called (if it's a function) to create the dependency. I believe I have the right fix for it in TKO (basically if (typeof valueAccessor() === 'function') {valueAccessor()()} in the render loop), but the TKO fix doesn't back-port/translate directly since it's using the new binding class style.

$ not working for jQuery in new website

I have been using jQuery for quite a few years now, and after I include the jQuery scripts in whatever site I am working on, I would always use the $ for jQuery objects. For example:
$('#my_selector').click(function(){...
I had built a website a few years ago in Joomla 1.6 with over 200 pages and jQuery used in almost all of them, all with the $. Now I am rebuilding the site in Joomla 3.3.0. The funny thing is, now sometimes the $ just doesn't work when identifying jQuery objects, but when I use jQuery it works. For example. the above code example would have to be changed to this:
jQuery('#my_selector').click(function(){...
And that works. And the final strangest thing is that on one page, it seems like the $ works for some of the jQuery but not all. The error that I see is this one:
TypeError: undefined is not a function
Seems like the problem occurs mostly on the functions that run after load complete circumstances. Anyway I am just wondering if people out there know why the $ would stop working with identifying the jQuery functions and objects.
Thanks!

You are most probably using a conflicting library, meaning: another script/library that declares (and thus overrides) the variable $. Wrap all your code in a closure, and you should be good:
(function($) {
$('#my_selector').doStuff();
})(jQuery)
Or, if it needs to be executed after document ready:
jQuery(document).ready(function($) {
$('#my_selector').doStuff();
});

Joomla 3.x is moving progressively to jQuery and replacing all MooTools dependencies along the way.
The default state is to load jQuery in noConflict() mode, but depending on features used on any given page by extensions (templates,plug-ins, components or modules) MooTools may also be loaded.
That means that on some pages, jQuery is defined and not $ and on other pages both are defined, obviously this will result in the issues you are seeing.
Add to that most third-party extensions from the 1.6 era (you have been upgrading to the 2.5.x line along the way right?) just ignored what-ever was going on and loaded whatever they needed (potentially blowing away other libraries) you generally will have to sort out all the conflicts first.
The only guaranteed way to use jQuery is by using the jQuery prefix.
You can read about using JavaScript frameworks with Joomla here, amongst other things it gives you future proof mechanism built-in to Joomla for loading jQuery.
To load jQuery, use: JHtml::_('jquery.framework');
To load the jQuery UI core call: JHtml::_('jquery.ui');
As has been mentioned you can wrap your JavaScript in a closure, in fact this is what the core com_banners does in /media/cbanner.js
var jQuery;
(function ($) {
$(document).ready(function () {
$('#jform_type').on('change', function (a, params) {
var v = typeof(params) !== 'object' ? $('#jform_type').val() : params.selected;
switch (v) {
case '0':
// Image
$('#image, #url').show();
$('#custom').hide();
break;
case '1':
// Custom
$('#image, #url').hide();
$('#custom').show();
break;
}
});
});
})(jQuery);

Are you or joomla using mootools or any other library with the $?
This would mean there is a conflict and the right way to solve it, is by using jQuery instead of $.

Jquery - type error, is not a function

I am working on a widget that is embedded on a customers website, it loads a jquery file. however we need to detect if jquery is already loaded on a customers page to avoid conflicts and then not load our own jquery.
As a sidenote the widget works on all versions of jquery. The code being used is...
if (typeof jQuery == 'undefined') {
console.log("NOT LOADED");
scripts.push("https://d33f10u0pfpplc.cloudfront.net/perun/v1/js/widget/betaV2/jquery-1.8.2-min.js");
}
This works when tested locally, however when it was rolled out on some sites we got a ...
type error $tabs(...) is not a function
it seems that the jquery on the host sites must not have been fully loaded is my initial theory (could be wrong)
is there a way to improve the jquery detection used above? or if you know why it is not working i am happy to learn. thanks

First of all, $tabs is not a standard jQuery function. If it's part of a plugin, you need to make sure that's included as well.
Also make sure that jQuery isn't being run in noConflicts mode. In that case, jQuery may be defined, but not $.

Do you check the loading state of the browser? Javascript is typically executed at the time, when the browser is parsing it. Jquery is a bigger file and sometimes it will execute upcoming code first.
To solve it, verify that your own code is executed after dom is loaded:
$(function() {
// your code here
});
Alternative 2 is to check what
scripts.push()
exactly does. It needs to be asynchronous, just only add the file request does not ensure the file is loaded and parsed. Maybe this is your problem.
Using jQuery in widgets isn't optimal. Is it possible to write it in native js?

It's probably not help, but in example at http://www.initializr.com/
jQuery checked like
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

Please check your jquery version and your version not have a $tabs jquery function.
Then only you got this type error
$tabs(...) is not a function.
Otherwise try new version of jquery_ui file.

Minified JS only works by pasting source into Controller

I'm not sure if there is a clear way for me to show / describe the problem that I'm having. But here goes:
I've developed an app with AngularJS (have not put live yet). It was decided that we needed tooltips for some of the metrics on the tables. We liked the general look of TipTip jQuery Plugin.
On my index file I correctly include the minified.js:
<script src="../assets/javascripts/app/jquery.tipTip.minified.js"></script>
(yes, the path is correct. I can click on the link in chrome developer tools and see the source file).
In my controller, I call it with this:
$scope.addTolltips = function() {
$timeout(function(){$('.results-metrics').tipTip({maxWidth:"300px", defaultPosition: "top"});},500);
}
I added the $timeout to make sure there was enough time for dynamic stuff on the page to be load in the DOM. I know it's probably not necessary anymore though.
But when tipTip() is being called I get a console error:
TypeError: Object [object Object] has no method 'tipTip'
However, if I take the minified source and paste it into my controller before the tipTip(), then everything works perfect. Any thoughts?

angularjs provides jQuery functionality via the angular.element function (http://docs.angularjs.org/api/angular.element), so you should use it instead of $ (however, I cannot explain why $ isn't working in your case)

Can't Diagnose jQuery Error: "Object [object Object] has no method"

I'm working on a Wordpress theme and right now I'm trying to get MediaElement to display audio files on posts.
jQuery is loading fine (tested with jQuery alerts) but for some reason MediaElement doesn't want to work. I get the error
'Object [object Object] has no method 'mediaelementplayer','
and although I've double checked everything I just can't figure out what's wrong. If you need a live demo of the problem, check it out here: http://firstpersontheater.net/video/podcast/painkiller-already-episode-78 (please don't judge the theme, I'm working on getting core functionality done first and haven't really started designing yet, haha).

This worked for me with the WordPress plugin:
mejs.$('.mejs-player').mediaelementplayer();

Had this problem yesterday as well.
MediaElement.js actually includes several different files in the download package. In order to get the full-featured video player you have to include the "mediaelement-and-player.js" file, not the "mediaelement.js" file, which is just the library.

I encountered this same issue.
While I was unable to isolate exactly why this error occurs with the WordPress plug-in implementation of MediaElement.js, I was able to move past it by using the JavaScript of MediaElement only.
I modified the PHP to output the relevant audio and video HTML tags without ID's, and without the script that calls them. I also removed the aspects of the plug-in for cueing scripts, instead linking them myself in my theme.
I then had success calling MediaElement normally using jQuery.

Well what library are you using that adds the api mediaelementplayer? Looks like that plugin either isnt loaded correctly or you are using the API incorrectly.

Quick answer:
You trying to to call a method that does not exits.
var o = {a = 1, b = 2};
o.someFunctionIThinkShoudExist();
It would be nice if it showed what the name of the function you were trying to call was. This happened to me last week and I resolved it by making sure I had linked to the correct JavaScript files.
What you can check is that you are only linking to the libraries you are using, like jQuery, only once. If you link to jQuery and a jQuery extention, then linking to jQuery again will unbind the extension. Causing the above error when you try to call the function you think should exits.