I have mootools and Twitter Bootstrap (which uses JQuery for their Javascript capabilities) working nearly "well" using JQuery.NoConflict() inside the bootstrap-dropdown.js .
Well, now I'm trying to use bootstrap-popover.js and it's not working as smoothly as bootstrap-dropdown.js. Well I guess that it's a compatibility mode issue that I cannot understand pretty well.
I have this javascript with error:
<script type="text/javascript">
$(function () {
$('td[rel=popover]')
.popover({
offset: 10,
live: true
})
.click(function(e) {
e.preventDefault()
})
})
</script>
And the error is:
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
EDIT:
I've successfully used popover before (but not with mootools) and i tried to repeat the same way and codes. Just before this javascript code with error, i'm linking the files like this (which are successfully loading):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="../js/html5.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-alerts.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-popover.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
I know that it should be better between <head></head> but it should work as well inside <body> And it is working for other bootstrap-alerts.js and dropdown.
Also, I'm calling the popover this way in a <table>:
<thead>
<tr>
<th>Título</th>
<th>Data</th>
<th>Horário</th>
<th rel="popover" data-original-title="A title" data-content="And here's some amazing content. It's very engaging. right?">Ticket Associado <img src="../img/alert-icon.gif"></th>
<th>Entrar no Chat</th>
</tr>
</thead>
And mootools are being called after twitter-Bootstrap/JQuery.
Any help? Thank you so much in advance!
erm. seems as if there's an issue with the twitter popover code, more likely than anything.
Property '$' of object [object DOMWindow] is not a function - sounds as if the $ is not what you think it is. I thought the point of noConflict was to revert to using jQuery() and not $ - the code that you post is not exactly doing that.
conversely - mootools, if loaded AFTER jquery and if of version 1.2.3 or higher, will NOT take over the $ declaration and fallback to document.id instead.
when do you get the exception, runtime or when you interact with a popover element? do console.log(window.$) and see what has declared it, it sounds like it's a primitive object property and not a function.
do you run any specific mootools stuff that requires use of $? need more data than what you have provided.
one thing you may want to look at is the MooTools port of BootStrap here: http://dev.clientcide.com/?version=MooTools%20Bootstrap - still a work in progress but it has the important stuff.
Related
I am using date picker in my form using http://code.jquery.com/ui/1.10.3/jquery-ui.js
using 1.9.1 jquery.js
But in this file I am getting error
TypeError: $.isPlainObject is not a function
if ( $.isPlainObject( value ) ) {
So what's going wrong. Please tell me
My index.php code is here
<!-- Load jQuery JS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Load jQuery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- Load jQuery UI Main JS -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load SCRIPT.JS which will create datepicker for input field -->
<script src="script.js"></script>
If it really is a conflict, this should work:
(function($){
$(function(){
// run code here
});
})(jQuery);
Check this Link
Host objects (or objects used by browser host environments to complete the execution environment of ECMAScript) have a number of inconsistencies which are difficult to robustly feature detect cross-platform. As a result of this, $.isPlainObject() may evaluate inconsistently across browsers in certain instances.
instead of $ try to use jQuery, May be your problem get fixed
e.g.
if ( jQuery.isPlainObject( value ) ) {
Because sometime when $ is override then this problem may occur.
Also check have you applied $.functionname() instead of $('id\class').functionname(); because $. sign applies the function to the whole jquery element which also cause Type-error issue sometime.
I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.
use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})
For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.
Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>
You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.
The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.
And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.
I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").
I've been reading through the answers on here but nothing seems to be working on their solutions, for some reason I am getting a console error "Uncaught TypeError: Object [object Object] has no method 'datetimepicker'" when I am using a button to load up the script using fancybox, but the crazy thing is. If I natively call the function using JavaScript through the calendar we are using directly it works fine, but we would like it to work on the button, which it previously did before the installation of new plugins.
$('#Time').datetimepicker({
datepicker:false,
format:'H:i',
step:30,
minTime: '07:00',
maxTime: '21:00'
});
Anyone have any ideas? The HTML is below
<tr>
<td>Time:</td>
<td>
<input type="text" id="Time" name="Time" value="<?php
if(isset($Time)) echo $Time; ?>" class="inputBoxSmall time" />
</td>
</tr>
Update: I've just noticed this -> Uncaught ReferenceError: jQuery is not defined jquery-ui.min.js:5
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
First of all Jquery is the base source file and jQuery UI uses the jQuery source file. So the order of the including script has to be reversed. And secondly i guess you are using jQuery DateTimePicker plugin. "A jQuery plugin is simply a new method that we use to extend jQuery's prototype object".The idea of a plugin is to do something with a collection of elements. Usually almost all plugins comes with a separate js file and if needed a stylesheet also. So in your case
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="path to your datepicker plugin here"></script>
<link rel="stylesheet" type="text/css" href="path to your plugin style sheet here"/>
You can see working examples here
You are including scripts in the wrong order.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"> </script>
jQuery must come before jQuery UI.
My javascript is loaded before on a blogger template here: http://fashioncherry.blogspot.no/ I've also tried to make sure it is only loaded once by adding the code:
function loadAdlinkAd(){
if( !adlinkAdLoaded ){
adlinkAdLoaded=true;
Before the post footer () I've added the code:
<a class='adlink-stylemag-btn' href='http://stylemag.no'> <img alt='stylemag' height='150' src='http://adlinkmedia.no/wp-content/uploads/2013/09/STYLEmag_knapp_150x150.png' width='150'/> </a>
<script type='text/javascript'>loadAdlinkAd();</script>
I tried the same thing on http://www.camillaabry.com/ and it worked great there. So I cannot understand why I get the uncaught referenceerror $ is not defined. I'm also a newbie when it comes to this, so I'm not sure how to fix it...:-(
$ is the variable jQuery is normally stored under. Include the jQuery library before you initialize the code that throws the error and it will probably work fine.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I'm trying to use the zurb foundation tooltip script without loading any of the other foundation library for my site but when I try to load it, it's throwing this js error.
My mark-up looks something like this:
<span class="has-tip tip-right" data-width="200" title="This is a tip">This is a tip</span>
<script src="js/jquery.js"></script>
<script src="js/jquery.foundation.tooltips.js"></script>
<script src="js/app.js"></script>
JS error:
Uncaught TypeError: Object [object Object] has no method 'tooltips' app.js:5
(anonymous function) app.js:5
fire jquery.js:1075
self.fireWith jquery.js:1193
jQuery.extend.ready jquery.js:435
DOMContentLoaded jquery.js:949
Here is how I'm loading the script
(function ($) {
$(function(){
// initialize tooltips
$(document).tooltips();
});
})(jQuery);
Does anyone know why this is happening?
I think you aren't calling the function by the correct name. It should be $(document).foundationTooltips() and NOT $(document).tooltips()
Full example:
(function ($) {
$(function(){
// initialize tooltips
$(document).foundationTooltips(); //This line right here
});
})(jQuery);
The new doc should have this:
<span data-tooltip class="has-tip tip-right" data-width="200" title="This is a tip">This is a tip</span>
Notice the "data-tooltip". That is very hard to find documented right now.
Foundation tooltips appears to use the title attribute as a default tooltip as do most tooltip libraries. data-tooltip is a custom field used only by someone who wants to use it themselves - not as a documented item. Google "data attributes in html5".