I am using wordpress and trying to access this code snippet .It's Showing error in the last line }(jQuery));
(function($) {
$(function () {
// Slideshow 3
$("#slider3").responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 500,
namespace: "callbacks",
before: function () {
$(".events").append("<li>before event fired.</li>");
},
after: function () {
$(".events").append("<li>after event fired.</li>");
}
});
});
}(jQuery));
It's showing Referrence error as : $ not defined .I have searched in stackoverflow but din't found a correct solution.Please let me know where i am doing wrong.
Note : I have placed my main Jquery script above all so that it gets included first before any other script.
Typically this is how I setup a javascript file using WordPress.
Add this code to either your header or footer, depending on the application makes a difference:
<script type="application/x-javascript">
jQuery(document).ready(function() {
your_javascript_function('add any variables here');
});
</script>
Then I would modify your script to look like this:
function your_javascript_function(vars) {
// Slideshow 3
$("#slider3").responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 500,
namespace: "callbacks",
before: function () {
$(".events").append("<li>before event fired.</li>");
},
after: function () {
$(".events").append("<li>after event fired.</li>");
}
});
}
If you are still receiving an error try adding a $ to the js here:
jQuery(document).ready(function($) {
If that doesn't work change all $ to jQuery.
If that doesn't work then something else is causing your issues.
How about enqueue_script function? Have your tried that? Or how is your js embedded?
function mytheme_enqueue_style() {
wp_enqueue_script( 'jquery', $child_uri . '/js/jquery-1.11.1.min.js' );
wp_enqueue_script( 'jquery', $child_uri . '/js/YOURSCRIPT' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
Related
I did a search and found this method here using wp_add_inline_script. And it works.
But what if I wanted to keep my initialization script into an other .js file? That's what I wanted at first. How I can I load correctly?
I tried this but the loading of my init-fancybox must be too early because I get an error.
(my init-fancybox script is not the problem because it works when it is loaded correctly using wp_add_inline_script)
function fancybox_enqueues() {
wp_register_script( 'fancybox', get_theme_file_uri( '/assets/js/jquery.fancybox.min.js' ), array('jquery'), '3.5.7', true);
wp_register_script( 'init-fancybox', get_theme_file_uri( '/assets/js/init-fancybox.js' ), array('jquery','fancybox'), '1.0', true);
wp_register_style( 'fancybox-css', get_theme_file_uri( '/css/jquery.fancybox.min.css' ), '1.0');
if ( is_singular( 'item' ) ) {
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'fancybox' );
wp_enqueue_script ('init-fancybox');
wp_enqueue_style( 'fancybox-css' );
}
}
add_action( 'wp_enqueue_scripts', 'fancybox_enqueues');
Here is the error I get TypeError: $ is not a function
And here is the init-fancybox.js
$('[data-fancybox="single-item__gallery"]').fancybox({
buttons : [
"zoom",
"share",
//"slideShow",
"fullScreen",
//"download",
"thumbs",
"close"
],
thumbs : {
autoStart : false
}
});
It seems jQuery is not loaded by the time your code is running. Try adding the following function around it to make sure jQuery exists before your code runs:
jQuery(document).ready(function ($) {
// Your function goes here:
$('[data-fancybox="single-item__gallery"]').fancybox({
buttons: [
"zoom",
"share",
//"slideShow",
"fullScreen",
//"download",
"thumbs",
"close"
],
thumbs: {
autoStart: false
}
});
});
[UPDATE]
Improved code according to advice here.
--
I have build a grid using dijit and dgrid:
define([
...
], function (declare, _WidgetBase, _TemplatedMixin, ...) {
return declare("MyGrid.widget.MyGrid", [ _WidgetBase, _TemplatedMixin ], {
deleteButton: new MendixButton({
className: "btn mx-button claro haasgridbutton",
iconClass: "dijitIconDelete"
}),
...
postCreate: function () {
...
addButtons();
},
...
addButtons: function () {
...
dojoConstruct.place(this.deleteButton.domNode, this.objectButtonsNode);
this.deleteButton.on("Click", dojo.hitch(this, function () {
this._deleteObjectDialog();
}));
},
});
});
require(["MyGrid/widget/MyGrid"]);
For whatever reason the delete button (or any other) does not work if I move away from the page and come back. the function deleteObjectDialog(); is simply not called and I don't know why, neither do I know how to debug this.
The Debugger starts at the function and I can't find the 'onClick' part using the Inspector.
The syntax you are using here is wrong. The events are not attached using set. They are attached using on. And your reference of this is also not correct. Inside the onClick call, this would refer to the deleteButton and not the grid widget. Instead of:
this.deleteButton.set("onClick", function () {
l_this._deleteObjectDialog();
});
It should be:
this.deleteButton.on("Click", dojo.hitch(this, function () {
this._deleteObjectDialog();
}));
I am trying to implement the ResponsiveSlides (http://responsiveslides.com/) to my local drupal instance but anyway I configure the JS code I get a "TypeError: $ is not a function $(function () {" I tried to put the JS code right in the html.tpl.php or as a separate file but it keeps throwing an error, here is the code:
// JavaScript Document
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
$("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
$("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});
// Slideshow 4
$(".slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
So any help on why this is throwing this console error will be most appreciative.
the correct use is this:
(function ($) {
// code goes here
})(jQuery)
Read this: http://jquery-howto.blogspot.it/2008/12/what-heck-is-function-jquery.html
M.
I have this function but it gives me function statement require name onStop function
<script type="text/javascript">
jQuery( function($) {
$('#Hnav, #Nnav').NestedSortable(
{
accept: 'sort',
noNestingClass: "no-children",
helperclass: 'helper',
autoScroll: true,
onChange: function(serialized) {
onStop : function(){
$('#output').html($(this).id);
},
nestingPxSpace : '0'
}
);
});
</script>
In this context, this refers to the DOM element on which the onStop event happens. A DOM element is not a jQuery object.
jQuery $(this) object doesn't have id property, while the DOM elements do. So, use either:
$('#output').html(this.id);
or:
$('#output').html($(this).attr("id"));
And don't forget to close the bracket in onChange handler function.
Collectively there are two problems in the code,
The inner function was not closed properly.
Used id property of element that is not supported by the jQuery selector.
The modified code is,
jQuery( function($) {
$('#Hnav, #Nnav').NestedSortable(
{
accept: 'sort',
noNestingClass: "no-children",
helperclass: 'helper',
autoScroll: true,
onChange: function(serialized) {
//A empty function
},
onStop : function(){
$('#output').html($(this).attr("id"));
},
nestingPxSpace : '0'
}
);
});
There was a bracket missing and you use wrong syntax getting id try this,
$('#output').html($(this).id);
should be
$('#output').html(this.id);
or
$('#output').html($(this).attr(id));
jQuery(function($) {
$('#Hnav, #Nnav').NestedSortable({
accept: 'sort',
noNestingClass: "no-children",
helperclass: 'helper',
autoScroll: true,
onChange: function(serialized) {
alert("changed");// Changed to fix
},
onStop: function() {
$('#output').html(this.id);
},
nestingPxSpace: '0'
});
});
I used to work with tinymce, but it causes lot of troubles when I want to put it to fancybox (fails with second start of fancybox window). Cleditor doesn't work too (displays "true" instead of editor). Is there any editor which will work without making any strange tricks?
Edit:
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'fbwysiwyg'); },
beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'fbwysiwyg'); }
});
Edit2 (fixed callbacks)
$('.fancybox_with_wysiwyg').fancybox({
padding: 1,
scrolling: 'no',
onComplete : function() {
tinyMCE.execCommand('mceToggleEditor', false, 'fbwysiwyg');
},
onCleanup : function() {
tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' );
}
});
Solution (thanks to Thariama)
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
onComplete: function () { tinymce.execCommand('mceAddControl', false, 'fbwysiwyg'); },
onClosed: function () { tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' ); }
});
>I used to work with tinymce, but it causes lot of troubles when I want to put
>it to fancybox (fails with second start of fancybox window).
The simple solution for this case is to shut down tinymce correctly before you reinitialize it the second time.
To shut your editor instance down call
tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' );
Update: You need to use
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'fbwysiwyg'); },
beforeClose: function () { tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' ); }
});
CKEditor definately works as I've been working on putting it inside a Fancybox this afternoon :)
The problem you may encounter is when a modal window plugin removes and recreates the textarea within the modal. In this case you will need to re-bind the WYSIWYG when the textarea is shown.