Why does my jQuery .ready() function not work? - javascript

I have recently updated my Wordpress blog which appears to have broken all my jQuery on the page.
I include a core.js file which contains a .ready method that modifies page behaviour, however since the update its stopped working. I believe its because Wordpress injects its own version of the jQuery library which is somehow conflicting with my script.
Webpage
Core.js file
Snippet of file
console.log('loaded core.js');
jQuery(document).ready(function($) {
console.log('inside ready function');
// other stuff goes on here
}
The 'loaded core.js' debug line will fire, however the second debug line will not.
I'm not sure how to resolve, will greatly appreciate advise.

You need to deregister the default jquery library.
For more information, check Function Reference/wp deregister script.
wp_deregister_script( 'jquery' );
If you are going to deregister jquery, here's a way of removing it and adding a different version:
function my_jquery_lib() {
wp_deregister_script('jquery');
$lib_url = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; // the library URL.
wp_register_script('new-jquery', $lib_url, false, null);
wp_enqueue_script('new-jquery');
}
add_action("wp_enqueue_scripts", "my_jquery_lib");
Your website has an error in the console.
TypeError: f.browser is undefined
This maybe be causing the issue.

Related

How do I fix "Uncaught TypeError: $(".flexNav").flexNav() is not a function?

I'm getting the "Uncaught TypeError" in a custom file that's initializing flexNav with this object:
function setupFlexnav() {
// flexnav setup and options
//var isIE = false || !!document.documentMode;
//if (!isIE) {
$(".flexnav").flexNav({
'animationSpeed': 0,
'transitionOpacity': false,
'buttonSelector': '.menu-button',
'hoverIntent': true,
'hoverIntentTimeout': 100,
'calcItemWidths': false,
'hover': true
});
//}
//other custom code follows, but error is thrown on $(".flexnav").flexNav
}
//initialize flexnav
$document.ready(function () {
setupFlexnav();
});
The 'setupFlexNav()' method is called elsewhere in this file, and is wrapped up in $document.ready() {...}, which should stop flexNav() from being called until jQuery has been loaded.
BundleConfig is loading jQuery-1.10.2.js before my jquery.flexnav-custom.js script, but is loading a jQuery-1.11.3.js file after these 2 files.
I would wonder if loading 2 versions of jQuery on the same page would cause the "Uncaught TypeError" to be thrown, but this code has been unchanged for 6 months in Source Control. I haven't been getting this flexNav() error until today, so something else must be causing the error besides the initialization of flexnav. I just don't know that something is. What would cause my given code to start throwing this error? THANKS!
After looking over my code one more time, I realized that the order of my scripts was indeed causing the issue. The old version of jQuery (1.10.2) loaded before jquery.flexnav-custom.js, which is fine, but the new version (1.11.3) loaded after these scripts. I omitted the older file, loaded the newer file before the flexnav script, and rebuilt the project. The error went away.

Prototype and jQuery conflict with $.when.apply

I have tried multiple combination of usage of code to make the Prototype and jQuery to work, but no luck yet.
Here is what I have currently.
index.html:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="MAIN_JS_FILE.js"></script>`
main_js_file.js:
jQuery(document).ready(function() {
var jsq = [];
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_1);
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_2);
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_3);
var deferredjs = jQuery.when.apply(jQuery, jsq);
deferredjs.done(function() {
//Various variable initialization
//Various function definition.
}
});
Now when page is loaded (page loads properly), chrome console shows an error message:
Uncaught TypeError: undefined is not a function.
When clicked on the error file link, it points to element.dispatchEvent(event); in the prototype.js file, line no 7066.
Any help is appreciated.
Thanks.
Edit: I have changed the MAIN_JS_FILE.js file to use only jQuery instead of $
So now there is not a single javascript code that uses $ and still the undefined error is displayed.
If I now use jQuery.noConflict(); before .ready() function, then the $.when.apply code does not even execute.
As #steven iseki mentioned in comment you, can use jQuery.noConflict. You can read on their website that:
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.
And it's indeed a case with Prototype also using $ sign.
Also, remember to use jQuery instead of $ sign in your jQuery code, e.g.:
jQuery(selector).on('click', function(){...});
I don't think there's jQuery Conflict error here. Try changing your code from main.js. Try alternate method to get your task done here. I analyzed your code but prototype.js has a way of hiding real thing.

TypeError: document.observe is not a function

in my js file i wrote like this
document.observe("dom:loaded", function() {
add();
});
but it show error TypeError: document.observe is not a function
I am using rails 3 & jquery-ui-1.10.0
can any one tell me why i am getting like this ?
Thanks in advance
As rails 3 uses jquery and you are writting code in prototype. That might creating issue here.
So try convert your code in jquery. Your code might look like.
$( document ).ready(function() {
// Run code
});
But consider below and make your changes as per your need
$(window).load(function(){
// Run code ##It will run the js after the whole page is loaded.
});
$(document).ready(function(){
// Run code ##It will run the js just after the loading of DOM.
});

Javascript: Random "Object has no method" error even with jquery.getScript()

I've been working with JavaScript and i need to call a function from another .js file.
The code works most of the time, but sometimes it gives me the error "Object has no method odometer". I've even put the code inside a call to getScript() to make sure it's loaded before it tries to call the odometer() function, but I'm still getting random errors.
Heres the code:
var updateDisplay = function(){
console.log("refreshing Odometers");
$.getScript("/odometer.js", function(){
$.getJSON(
'/getData',
{
product: '',
unit: unitSelection(),
period: salesPeriod(),
reportBegin: $("#datepickerfrom").val(),
reportEnd: $("#datepickerto").val()
},
function(data){
$(".odometer").odometer({
odometerData:data
});
});
});
};
I am getting an error on this line:
$(".odometer").odometer({
odometerData:data
});
It says "object has no method odometer".
I am using the Play framework for development and I've already imported jQuery and my other JavaScript files in the HTML page.
Here's my JS import order:
jquery
odometer.js (even i use getScript, i've put it there just to make sure)
main.js (which the given code resides in..)
What am I doing wrong?
Thanks for helping....
I think
$(".odometer").odometer({...})
is called before odometer extends to jQuery, flow may be like this
$(".odometer").odometer({...}); // first called
$.fn.odometer = function(){...}; // later it was extended to jQuery
seems like its a problem with ajax caching settings.
i've found the answer from this question:
jquery ajax bug
after adding
$.ajaxSetup({ cache: true });
the getScript works fine. thanks for spnding your time guys :)

JQuery getScript reporting error "is not a function" for a function that was not called

I am using JQuery's getScript function to load scripts depending on the device type, to hope fully save on unnecessary requests and load time for mobile devices. I have this code currently:
<script type="text/javascript">
$(document).ready(function(){
$.getScript('http://dev.imadeamerica.com/wp-content/themes/imadeamerica/js/mfc.js', function(){
alert('It WORKED!');
});
});
</script>
But it's not working, because I keep getting the error $(window)._scrollable is not a function. The only weird thing is that if you visit http://dev.imadeamerica.com/wp-content/themes/imadeamerica/js/mfc.js there is no call to that function. When I put a different script in the getScript function it works fine. But for some reason it thinks I am calling a function called $(window)._scrollable even though it's not present in that file.
I haven't found anything like this before and any help would be much appreciated.
The first line of setUp, line 27, has this:
$(window)._scrollable();
So, yes, you are calling that function.
open your script and # line no 27 you have a call $(window)._scrollable(); please define the function cz that functions is not defined
Have the same issue when update bootstrap v4.0 to v4.3.1
Code example:
`https://codepen.io/pasha-oleynik/pen/yWvjaQ?editors=1011`
To fix need to use jquery without slim postfix. (use jquery-3.3.1.min.js instead of jquery-3.3.1.slim.min.js)

Categories

Resources