sorry if I am repeating this question, but I am quite new in requireJS and I do not fully understand the way it works.
I am trying to implement amazon-like navigation with diagonal movement over elements. I found a jQuery plugin (https://github.com/kamens/jQuery-menu-aim) for that but I want to implement it with help of requireJS.
In common way you just include all necessary scripts with <script> tag (Jquery and the plugin). Then you find your navigation and assign some functions on activating/ deactivating submenu. Like example:
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../jquery.menu-aim.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
// jQuery-menu-aim: <meaningful part of the example>
// Hook up events to be fired on menu row activation.
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {//do something}
function deactivateSubmenu(row) {//do someting else)
</script>
In requireJS way. In the navigation.js file i required menu-aim plugin in the beginning and tried to implement it like this:
var menuAim = require('lib/menu-aim');
// some code
var $menuT = $('#nav-main-deep');
$menuT.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(){
console.log('test1');
}
function deactivateSubmenu() {
console.log('test2');
}
And i put whole plugin menu-aim.js between:
define(function () {
//whole menu-aim plugin
});
Probably, this is not the way how to run requireJS plugin, cause its doing nothing (i tried to do some console logs). I tried to look at requireJS doc but I still dont understand how to do it right..
Will be very thankfull for advices..
From the GitHub code, it looks like jQuery-menu-aim is not using a universal module definition, so it needs some help from your RequireJS config.
A shim can help RequireJS sequence the dependencies since this is a jQuery plugin and jQuery must be loaded first and passed into it. Click here for more information on RequireJS shims.
Add this code to your RequireJS config file
requirejs.config({
shim: {
'menu-aim': {
deps: ['jquery']
}
}
});
and when you call
require('lib/menu-aim', function() {
// put your menu code here
});
jQuery and the menu plugin will be loaded.
Related
I'm working on a Magento2 site. Magento2 uses requirejs and the theme I'm using makes use of it as well. Part of the theme uses Owl Carousel. The code used to load the carousel was originally
require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
$("#banner-slider-demo-1").owlCarousel({
// carousel settings
});
});
However I noticed sometimes when I load the homepage (where the carousel is used) the carousel doesn't display, and there are errors in the console
Uncaught TypeError: $(...).owlCarousel is not a function
Thinking jQuery might not be loaded, I changed the require code to serialize the requirements
require(['jquery'], function($) {
require(['owl.carousel/owl.carousel.min'], function () {
$("#banner-slider-demo-1").owlCarousel({
// ...
but this had no effect... Sometimes the carousel loads and there are no errors, other times there are errors and it doesn't load.
Even when there is an error the carousel file has been fetched by the browser. It also seems require has loaded the carousel script per developer tools
Any idea what could be going on?
Your issue is that you are loading jQuery through a script element and through RequireJS. You have to use one method, not both.
If I run this in the console:
console.log("owlCarousel", typeof jQuery.fn.owlCarousel)
I get:
owlCarousel function
But with this:
require(["jquery"], function ($) {
console.log("owlCarousel", typeof $.fn.owlCarousel);
})
I get:
owlCarousel undefined
And if you try require(["jquery"], function ($) { console.log("equal", $ === window.jQuery); }) you'll get equal false. So you have two instances of jQuery loaded. The code that uses RequireJS to access jQuery gets a version without .owlCarousel. That's because Owl Carousel installed itself on window.jQuery.
If you must load jQuery through script for some reason, you should move the script element that loads it before you load RequireJS. (You should do this for all scripts you load that you want to load with script and that are AMD-aware.) Then for RequireJS, you should just define this fake module:
define("jquery", function () {
return jQuery;
});
This makes it so that when RequireJS loads jQuery it just uses the jQuery already defined in the global space. The ideal place for this fake module would be just before you configure RequireJS.
While you're at it you should define a shim for owl.carousel/owl.carousel.min:
`owl.carousel/owl.carousel.min`: ['jquery']
This way there's no need to nest the call to load owl.carousel/owl.carousel.min inside a call to load jquery. You can just do what you were trying initially:
require(['jquery', 'owl.carousel/owl.carousel.min'], function($) {
$("#banner-slider-demo-1").owlCarousel({
// carousel settings
});
});
I've linked jQuery, animate.css, and morphtext.js in my document's header.
Within h1 I've created a span with the id 'js-rotating'. I've then called it directly in the html like so
<script>
$("#js-rotating").Morphext({
animation: "bounceIn",
separator: ",",
speed: 2000,
complete: function () {
}
});
</script>
However, the plugin is not responding. I've verified that I can access the linked css and js files via the direct links. What could cause this issue?
your code works perfectly for me,but the problem is that your script is executed before the complete loading of Dom.
to fix this issue,put your script inside jQuery ready() Method to ensure that the DOM is loaded properly before executing any functions.
<script>
$( document ).ready(function() {
$("#js-rotating").Morphext({
animation: "bounceIn",
separator: ",",
speed: 2000,
complete: function () {
}
});
});
</script>
this a working demo
Your Theme is enqueueing jQuery 1.7.2:
And WordPress is enqueueing jQuery 1.8.3:
See also, Frank's answer regarding jQuery no-conflict mode.
Edit
WordPress bundles a version of jQuery. You will inevitably encounter problems if your Theme (or a Plugin) enqueues a separate version of jQuery - whether by enqueueing that separate jQuery version along side the WordPress-bundled version, or else by deregistering the core-bundled version, and enqueueing a custom version.
Don't register a custom version of jQuery via your Theme or any Plugins. If you need to use jQuery, just use the core-bundled version, via:
wp_enqueue_script( 'jquery' );
I am using Lean Modal: http://leanmodal.finelysliced.com.au/ in a Rails app with a React front-end.
When I put the link to the modal in application.html.erb it works fine but when loaded through a React link using the same code, nothing happens.
I have jQuery loaded and checked 10 times if the code is the same. What could cause such an issue?
Here is the link code in React:
<a rel="leanModal" name="login" href="#login">
The template file (html.erb) script:
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
And I am loading the modal JS from my application.js file in Rails.
Thanks for any help!
You should wrap things that interact with DOM (e.g. jQuery plugins) in a component.
var LeanModal = React.createClass({
componentDidMount: function(){
$(this.getDOMNode()).leanModal({
top: this.props.top || 200
});
},
render: function(){
return <div>{this.props.children}</div>;
}
});
Note that you also need to provide a componentWillUnmount to handle clean up, and that the plugin can't do things like add/remove elements. Plugins that don't allow cleanup or make destructive changes are incompatible with react.
Sometimes implementing it with just the existing CSS and using react components instead of the jQuery plugin can be very simple and end up with a better result.
I am trying to use tooltip on a View that has reference to both jQueryUI and Bootstrap 3. I have made a sample here. If I load the Boostrap after jQueryUI's js then the tooltip() call is successful but if I call jQueryUI after Bootstrap then I get an error and nothing works. You can try it out yourself. There is a lot of talk going on about this on the Internet and I asked around GitHub but I could not find a solution yet.
Ideal solution will be to take QueryUI without tooltip. This will work. In case you don't want to do that please include Bootstrap after JQueryUI. Ensure you have unique components from each (you can custom build both libraries with required components)
Bootstrap has a way to to reset any component like:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
The above code will work when bootstrap is loaded after JQueryUI
Ref: http://getbootstrap.com/javascript/
Here is relevant code from Bootstrap:
var old = $.fn.tooltip
$.fn.tooltip = function (option) {
....
}
$.fn.tooltip.noConflict = function () {
$.fn.tooltip = old
return this
}
Instead of including jquery-ui.js, include individual libraries as needed and leave out jquery-ui tooltip.
For example if all you need is jquery-ui sortable then use this:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
the simplest solution is put jquery-ui.js first and then bootstrap-datepicker.js
this works for me.
I have posted a relevant answer with more details in this SO thread: https://stackoverflow.com/a/71176542/1932141
Basically, you can do something like this:
<script src="/js/bootstrap.js"></script>
<script>
var bsTooltip = $.fn.tooltip;
</script>
<script src="/js/jquery-ui.js"></script>
and then you can initialize bootstrap tooltips this way:
// initialize tooltips
bsTooltip.call( $( "[data-toggle='tooltip']" ) );
Ok, I have included the google api libraries for Jquery UI, like so:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js' ></script>
Now I have a script that updates some spans and a hidden input on document slide and not only, on document ready:
<script type="text/javascript">
$(document).ready(function()
{
var slider=$('#slider_range').slider({
range:true,
min:0,
max:5,
step:1,
values:[0,3],
slide:function(event,ui)
{
$('#level').val(ui.values[0]+'-'+ui.values[1]);
$('#low').html(ui.values[0]);
$('#high').html(ui.values[1]);
}
});
var s=slider;
if(s.slider("values",0)==s.slider("values",1))
{
$('#level').val(s.slider("values",0));
$('#low').html(s.slider("values",0));
$('#high').html(s.slider("values",0));
}
else
{
$('#level').val(s.slider("values",0)+'-'+s.slider("values",1));
$('#low').html(s.slider("values",0));
$('#high').html(s.slider("values",1));
}
});
</script>
The ideea is that on a page it shows the slider and on another not.
The error message I get from Firebug is this:
$("#slider_range").slider is not a function
And points to the line
slide:function(event,ui)
What could be causing this? Why on a page the slider can be seen and on another (which uses the same template that loads the above) can`t?
Please help!
There were two differing jquery libraries included on the second page.
I just had the same error while i used the foundation framework from zurb along with jquery ui slider.
Problem #1:
the foundation framework 3.2.4 already delivers jquery 1.8.1 and i tried to include my own copy of jquery 1.9 just before the foundation files. (= duplicate jquery inclusion)
Problem #2:
the order of my inclusions. jquery ui needs to be included AFTER the foundation framework files.