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".
Related
IM using the following code and I got error is the console
undifinnd is not a function,what am I doing wrong here ?
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetime').datepicker();
});
</script>
I've also try with and I got the same error...
$('#datetime')..datetimepicker();
It looks like from the code you are only inlcuding the main jQuery library and not including the jQueryUI library for which that method is part of (http://jqueryui.com/datepicker/). If you include the jqueryUI library after your jQuery script call you should stop getting errors.
Datepicker is in JQuery UI. You must include that library as well.
I want to add a datepicker in a website which is using jQuery, appery.io framework. Could anyone please suggest a link or tutorial to do this?Trying to pop up a datepicker in a website where right now it's only showing the current date in an input box like this:
<input type="text" name="cal" id="cal_id".....>
the javascript library have been used are jquery-1.8.2.js, jquery-1.8.2.min.js, jquery.mobile-1.3.0.js etc.
I tried JQuery UI datepicker from http://jqueryui.com/datepicker/. Added the javascript files: code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css, code.jquery.com/jquery-1.10.2.js, code.jquery.com/ui/1.10.4/jquery-ui.js. Added script as this:
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
in the input box made changes like this:
<input type="text" name="cal" id="datepicker"...>
it's not working or popping up the datepicker in the website. I am a new programmer in javascript & appery.io, I guess I am doing something very silly or missing something very basic. please help.
[I also tried some other datepickers from http://www.javascriptkit.com/script/script2/timestamp.shtml, http://javascriptcalendar.org/javascript-date-picker.php, http://www.kean.edu/~cpd/calendar/zapatec/zpcal/doc/wizard.html..nothing seemed to work for me.]
When I try to refresh the page, it shows 'Uncaught TypeError: undefined is not a function' and 'Uncaught TypeError: Cannot read property 'activePageClass' of undefined '.
Update: Now datepicker pops up only when I refresh the page! So when I navigate to this Calendar page and click on the input box, it doesn't work or doesn't pop up the datepicker. But if I refresh the page in browser, then it works!! Please help!
Your script is working for me. Did you add jquery-ui.css ?
Add this to your site:
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
DEMO
Tested with:
jQuery-2.0.2, jQuery-UI-1.10.3
EDIT:
Based on your comments, I deduced that your calendar is added dynamically after the script is called. Your jquery function only affects elements found when the page loads, for dynamically added elements you need to take a look at Jquery's live functions.
Try replacing your script with:
$(function () {
$(document).on('click', "#datepicker", function (e){
$(this).datepicker();
});
});
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").
My URL http://math.pixelworklab.com/.
In the top right there is an "Invite a friend" link that should open a fancybox but instead loads a new page.
In firefox console I see the following and cannot seem to nail the issue...
TypeError: jQuery("a.raf_link").fancybox is not a function
[Break On This Error]
'titleShow' : false
TypeError: jQuery("a.single_image").fancybox is not a function
[Break On This Error]
jQuery("a.single_image").fancybox();
Thanks!
hey I saw your site view source.. You have include jquery library twice.Remove one and it will work
<script type='text/javascript' src='http://math.pixelworklab.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
and
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Looks like you have a problem because of two jQuery libraries attached. First is jquery 1.7.2 and second, stored on Google CDN, ver 1.5.2. fancybox is initialized after 1.7.2 and before 1.5.2
I think you have to wrap your code (raf_script.js) in a document ready function:
jQuery(document).ready(function() {
$("a.raf_link").fancybox({
'titleShow' : false
});
...
});
The jQuery have probably not been loaded before your script loads.
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.