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.
Related
Recently I started having Issues with the Google Tag Manager.
I can't track it to a Tag or a Trigger (activated and deactivated individually to check).
The error started occurring this week (no updates were made to the system or template). I noticed when testing the implementation of a new Tag in GTM. That shortly worked but then this error message started showing in the console. Removing the new Tag didn't change the situation and since the code worked for a while (some 30minutes) I don't expect a direct relationship between the new tag and the error.
All I have is the console in the frontend that shows the following error message:
Uncaught TypeError: Wb.set is not a function
The error stems from this file:
https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX
Wb is started as a Map just a few steps earlier:
Wb=new Map(Vb.h.F);
Wb.set("style",{ya:4});
The GTM Script is copied and pasted from the GTM-Admin without any change made to it and is included in the header.php file of the Wordpress template. I tried copying it again and replacing the script that was in the header.php previously but the result was the same.
If looking at the actual error message in the console helps, the issue can be seen on the following URL:
https://www.bindella.ch
Any help in solving this or at least pointer to where to go look for errors would be very much appreciated.
Thanks
Very interesting, and yes, you're right, the error in the minified code makes no sense:
Let's try something different. First, just export your GTM container (the workspace that is synced with prod/live) as a JSON file in Admin section.
Open the file, look for something like set("style" See if you can find that Wb. Well, don't expect it to be Wb. I guess GTM minifies the code. It may be some weird chat bot, or something like that. From there, you'll be able to find the tag or variable that causes the issue.
I didn't look too deep into it, but that part of code looks sophisticated enough to be a part of the core container code. Actually, we can check it right here, on SO cuz it uses GTM too, let's do that.
Yes, SO has identical code. Looks like it's indeed core GTM. Well, there's a tiny probability that when you built the prod library last time, GTM had an issue and it deployed an artefact.
Try making a new workspace, make a nonsensical change in it and publish it to production. See if it lets you publish. Then see if that fixes the issue.
Now, if it doesn't then the next thing I'd try is trying to re-importing the exported JSON, forcing GTM compare the import to what's there and find differences.
Now if that shows no issues, then I would make a brand new container, load the config in it and try replacing the gtm loading script to see if the error still happens. It sounds like you can do that. If you can't, look a plugin like redirector to redirect the request to a different container.
Still the error with the new container? How about if you load a completely empty container? Got any errors?
There's a very slim chance that your front-end deploys one of a few vars GTM uses too, thus conflicting with your GTM. But it's very unlikely. Why would you use something like google_tag_manager or google_tag_data in the global scope...
If nothing helps and only the empty container doesn't give errors, then... well, then make a list of all tags firing along that error and start disabling them one by one. Or use breakpoints to narrow it down to the tag/library that causes it.
I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.
Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;
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.
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)
Rails 3.2.11
I followed the instructions for this gem: https://github.com/crowdint/rails3-jquery-autocomplete. When I load the page that I want to have the autocompleted field, Jquery, jquery-ui, autocomplete-rails.js, etc are all being loaded. However, upon loading the page, I get this in the error console:
TypeError: 'undefined' is not a function (evaluating 'this.live')
The I uncompress the js file, and this is the function being referred to:
(function(jQuery)
{
var self = null;
jQuery.fn.railsAutocomplete = function() {
return this.live('focus',function() {
if (!this.railsAutoCompleter) {
this.railsAutoCompleter = new jQuery.railsAutocomplete(this);
}
});
};
Anyone have any idea what's going on? Since I'm not using '$' anywhere, the noConflict option doesn't seem to matter, and either way doesn't fix the issue. I didn't make any changes to autocomplete-rails.js
What's weird is that I swear this was working at some point, but I can't for the life of me figure out what changed to break it.
Yup, turns out I had an errant javascript_include_tag that loaded another copy of jquery. That was the issue
I believe the original poster's own answer was part of the solution for me as well. Using rails 3.2.13, jquery 1.9.0 and jquery-ui 1.9.2. More completely I also:
upgraded rails3-jquery-autocomplete to latest (from 1.0.9 to 1.0.11, when I saw: "When possible, use jQuery .on() rather than .live()" in the Changelog in rails3-jquery-autocomplete at github
removed possibly redundant or conflicting jquery includes
reordered includes, specifically placing underscore.js after autocomplete-rails
full stop and clearing of caches and compiled assets
After the first 3 steps, the broken behavior was still there (after each step I restarted server only). The last step was out of laziness, but thankfully showed that the combination of the above worked.