I am trying to follow this tutorial on the WordPress Customizer JavaScript API, but I am running into the following snag:
When I try to run this code, I get the following error:
Uncaught TypeError: Cannot read property 'bind' of undefined
(function($){
var customize = wp.customize;
customize.previewer.bind( 'preview-edit', function( data ) {
// Some code
} );
})(jQuery);
I am enqueueing the script in my functions.php with the following hook:
function wf_customize_control_js() {
wp_enqueue_script( 'wf_customizer_control', get_template_directory_uri() . '/assets/js/wf-customize.js', array( 'customize-controls', 'jquery' ), null, true );
}
add_action( 'customize_controls_enqueue_scripts', 'wf_customize_control_js' );
Considering discussion on your question: wrap your function into jQuery(document).ready function to prevent your code running earlier than defined variable from other js script you're trying to use.
Related
I am trying to get the imageuploader working with CKeditor and I get the following error:
Uncaught SyntaxError: Invalid shorthand property initializer load_ckeditor.js
Here is the contents of_ckeditor.js
CKEDITOR.plugins.addExternal(
'imageuploader',
'/themes/blog/imageuploader/',
'plugin.js'
);
CKEDITOR.replace( 'editor1',{
extraPlugins = 'imageuploader'
});
The error line number refers to this:
extraPlugins = 'imageuploader'
I have copied the code exactly per the example here: https://cdn.ckeditor.com/
When I remove, extraPlugins = 'imageuploader', the CKEditor loads properly but it is missing the plugin.
There's an error in your syntax, CKEDITOR.replace takes an object so it requires a colon not an equals. The correct implementation should be:
CKEDITOR.replace( 'editor1',{
extraPlugins: 'imageuploader'
});
I'm having some difficulty including the datatables plugin from https://datatables.net/manual/installation#Local-installation in my widget.
In the jquery.datatables.js there is a function that is supposed to assign jquery to the variable $
if ( typeof define === 'function' && define.amd ) {
// AMD
alert('AMD');
define( ['assets/js/jquery/jquery-3.2.1'], function ( $ ) {
alert('Common1');
alert( $ );
return factory( $, window, document );
} );
However, my alert ( $ ) shows that $ is undefined where it's supposed to be the function constructor for JQuery
In any case, in the subsequent function of jquery.datatables.min there is a main function that takes in:
(function( $, window, document, undefined )
and in this function, on the first use of $ is where I get
Uncaught TypeError: $ is not a function
Why am I getting this error and is it due to my define of the jquery causing this issue?
Even if I do:
var $ = require define( ['assets/js/jquery/jquery-3.2.1'])
right before the main function, I still don't get the $.fn.datatables function in the global?
I know this question is kind of a mess but I was hoping someone could give me pointers of where to start looking on how to resolve this issue.
Try to load jquery directly from CDN in the header and to not try to load using AMD.
Make sure jquery is the first library to be loaded in the header, example:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- other scripts below -->
</head>
I'm building a Wordpress site that has the following bit of JS:
jQuery(window).load(function($) {
console.log('Everything loaded');
$('.slides').fadeIn();
});
I'm seeing "Everything loaded" in the console, but the following line causes an error:
Uncaught TypeError: n is not a function
I don't understand what's causing the problem. The JS file has jQuery as a dependency, and there are other jQuery functions that are working fine. It's just the above section that's causing an error.
Here's a screenshot from the console, because some people are having difficulty believing the above code is causing the error.
The issue is because you have set the event parameter as provided to the handler function with the name of $. This overwrites the jQuery instance of $, hence the error. You just need to remove the $ from the function parameters:
jQuery(window).load(function() { // < remove the $ here
console.log('Everything loaded');
jQuery('.slides').fadeIn();
});
Note that from your comments you're looking to alias the jQuery variable as a $ after using noConflict(). To do this you can use this signature document.ready handler:
jQuery(function($) {
$(window).load(function() {
console.log('Everything loaded');
$('.slides').fadeIn();
});
});
//try below code (remove $ )
jQuery(window).load(function() {
console.log('Everything loaded');
$('.slides').fadeIn();
});
I have attached a validator to the container and got a reference by doing below:
var validator = $("#sectionContainer").kendoValidator().data("kendoValidator");
When I run the code below I get an error saying " JavaScript runtime error: Unable to get property 'validate' of undefined or null reference".
if (validator.validate()) {
//do my logic to save form
}
});
What am I doing wrong here ? Am I missing something?
Using jquery version jquery-1.10.2.js and jquery-ui-1.10.3.custom.min.js
I have read a half-dozen examples of how to pass parameters to javascript and they all describe the process in a very similar manner but don't speak to one event: how does the javascript code actually get called? I have seen several examples where the code is tested in $document.ready, but can't get them to work.
Here is my php code:
$base_id = 'id_'.wp_create_nonce("postlister");
$url = $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$parms = array(
'url' => $url,
'action' => $action,
'base_id' => base_id );
wp_localize_script(self::slug.'-postlister', 'postlister_parms', $parms);
And my jQuery code:
jQuery(document).ready(function (postlister_parms) {
if (postlister_parms !== undefined) {
var parms = postlister_parms;
$.diagnostic('postlister loaded');
}
});
When the page loads, there is a div generated were my code writes some additional html:
echo '<div id="'.$base_id.'"></div>';
produces:
<div id="id_c8aca14643"></div>
The footer contains:
<script type="text/javascript" src="http://localhost/mkpusa.org/nw/wp-content/plugins/rhj4-postlister/js/postlister.js?ver=3.9.2"></script>
When the jQuery code executes, postlister_parms is a function:
postlister_parms: function (a,b){return new n.fn.init(a,b)}
But postlister_parms.url, .action and .base_id are all undefined.
Please help me spot what I am missing.
The resulting code should look something like this:
var postlister_parms = {"url":"the_url","action":"the_action","base_id":"the_baseid"};
Make sure that the script with the handle self::slug.'-postlister' is enqueued before you call wp_localize_script
Have you read the Notes section of the documentation The call to wp_enqueue_script and wp_localize_script should be in a wp_enqueue_scripts action and the script should be enqueued before it is localized. That being true, it should work