Develop Reference

Morphtext jQuery plugin not working

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' );

Link to leanModal.js works fine in rendered by HTML link but not within React

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.

jQuery dialog with <object>, cannot call dialog('close') from within object document

I have the following situation on a web application.
A dialog is built and opened on the fly when clicking on a link:
var dialogInitiator = $("<div id='dialog-initiator' style='background-color: "+bgcolor+";'>Loading...</div>");
dialogInitiator.appendTo(parentFrame);
dialogInitiator.dialog({
modal:true,
autoOpen: false
}).on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE) {
dialogInitiator.dialog('close');
}
evt.stopPropagation();
});
dialogInitiator.dialog('open');
Right after that, I load a new html page into the dialog, with an < object >, like this:
var objectFrame = $('<object style="border: 0;width:'+(dlwidth-30)+'px;min-height:'+(dlheight-46)+'px;" type="text/html" style="overflow:auto;" data="'+url+'"></object>');
dialogInitiator.html(objectFrame);
Now, the "url" variable contains a link to this new html document. When that page is ready, it will focus on an input field. This prevents the ESCAPE key from closing the dialog. So, I am trying to manually trigger the .dialog('close') event on escape keypress.
I do the following, from within the loaded document:
$('#dialog-initiator', window.parent.document).dialog('close');
It get the following error:
"Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"
Strange thing is, when i call:
console.log( $('#dialog-initiator', window.parent.document).html() );
it shows me the html from the dialog. So it actually IS initiated.
Well, I have tried to fix this error with the help of Google, but without success. I guess my situation is quite specific.
Note: we are forced to use the technique with loading this whole webpage into the dialog due to older functionality we used in modalDialogs. Since they are depricated in the latest Google Chrome, we've built a temporary solution with jQuery dialog.
I hope someone can help me out. I appreciate it!

You can try a global method created after the modal is created
dialogInitiator.dialog({
modal: true,
autoOpen: false,
create: funtion(e,ui) {
window.closeMyDialog = function() {
$('#dialog-initiator').dialog('close');
};
}
})...
Then call it by doing window.parent.closeMyDialog();.

Why not use JQuery UI? It's easier than making your own.
http://jqueryui.com/dialog/#default

Bootstrap and jQueryUI Conflict

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']" ) );

$("#slider_range").slider is not a function

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.