I'm using jqplot to do some Graphs, and they work fine, but I'm trying to use the 'smooth' attribute in order to smooth out the lines but when I add the js files, my jquery breaks. and I don't know why. I'm running it on FF and firebug doesn't seem to show me any errors.
These are the js files I was using to draw the graphs ( which work fine)
<script type="text/javascript" src="/miloWeb/js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="/miloWeb/js/jqplot/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="/miloWeb/css/jqplot/jquery.jqplot.css" media="screen" />
but then I add these in, the jquery breaks .
<script type="text/javascript" src="/miloWeb/js/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="/miloWeb/js/jqplot/plugins/jqplot.highlighter.min.js"></script>
<link rel="stylesheet" type="text/css" href="/miloWeb/css/jqplot/jquery.jqplot.min.css" />
the way I'm building the graph is like this:
$( "#chartPointsBmi" ).dialog( "open" );
var plot2 = $.jqplot('bmiChartDiv', coordinates, {
title:'BMI/Time Graph',
gridPadding:{right:35},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d, %y'},
// min:'May 01, 2011',
tickInterval:'1 year'
},
yaxis:{
min:0,
max:40,
tickInterval:'5'
}
},
series:[{lineWidth:5, rendererOptions: {smooth: true}, markerOptions:{style:'filledCircle'}}]
});
Any ideas as to why they're not playing along?? Thanks!
~Myy
EDIT:
here's the rendered html
<link rel="stylesheet" type="text/css" href="/miloWeb/css/redmond/jquery-ui-1.8.11.custom.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/miloWeb/css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/miloWeb/css/view.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/miloWeb/css/ezmark.css" media="screen" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.milo #content { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript" src="/miloWeb/js/jquery.ezmark.js"></script>
<script type="text/javascript" src="/miloWeb/js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="/miloWeb/js/random.js"></script>
<script type="text/javascript" src="/miloWeb/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="/miloWeb/js/jquery.maxlength-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").button();
});
function loading(){
$( "#loadingPopUp" ).dialog( "open" );
return false;
}
function unloading(){
$( "#loadingPopUp" ).dialog( "close" );
return false;
}
</script>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/miloWeb/js/jqplot/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="/miloWeb/js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="/miloWeb/js/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="/miloWeb/js/jqplot/plugins/jqplot.highlighter.min.js"></script>
<link rel="stylesheet" type="text/css" href="/miloWeb/css/jqplot/jquery.jqplot.min.css" />
<script language="javascript">
Related
I've checked other answers on here and I don't think there's one that covers my problem. I am trying to include two JQuery plugins (Datepicker and Select2) and I just want to download them, include them in the head of my site and initiate them in...
$(document).ready(function() {
// HERE!
$('[data-toggle="datepicker"]').datepicker();
$(".js-example-basic-single").select2();
});
...as both suggest I should be able to do... but both give me a ReferenceError: require is not defined in the console and if I go into the .js files and comment out the offending line (as suggested in other answers) the plugin doesn't work at all and I just get an undefined function in the console.
I'm sure this is something simple that's simply outside of my understanding, if anyone can help, that would be great.
This is the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- fonts -->
<link rel="stylesheet" type="text/css" href="/fonts/roboto.css" media="screen" />
<!-- end fonts -->
<link rel="stylesheet" type="text/css" href="/css/general.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/message_boxes.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/loading_screen.css" media="screen" />
<link href="/css/datepicker.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/js/retina.min.js"></script>
<script type="text/javascript" src="/js/jscolor.min.js"></script>
<script type="text/javascript" src="/js/datepicker.js"></script>
<script type="text/javascript" src="/js/general.js"></script>
<script type="text/javascript" src="/js/message_boxes.js"></script>
<script type="text/javascript" src="/js/loading_screen.js"></script>
<script type="text/javascript" src="/js/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped.css" />
<link rel="stylesheet" type="text/css" href="/css/icheck_blue.css" />
<script type="text/javascript" src="/js/icheck.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 5 years ago.
I can't use the tooltipster library along with tablesorter one as it throws an error:
Uncaught TypeError: $(...).tooltipster is not a function
And my code:
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript" src="llibreries/tooltipster/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="css/vista.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="llibreries/tooltipster/dist/css/tooltipster.bundle.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
contentCloning: false
});
});
</script>
<script type="text/javascript" src="llibreries/jquery-latest.js"></script>
<script type="text/javascript" src="llibreries/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/docs.js"></script>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(function()
{
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")
});
});
</script></head> ....
If I comment the second script $("table").tablesorter... The tooltip script works. Otherwise, it doesn't. Can't make it work, what am I doing it wrong?
Please check the links for the CDN embedded in the header
Please check the link CDN for the Tooltipster.
This is wrong
<script type="text/javascript" src="llibreries/tooltipster/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="llibreries/tooltipster/dist/css/tooltipster.bundle.min.css" />
Try this
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" />
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="css/vista.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
contentCloning: false
});
});
</script>
<script type="text/javascript" src="llibreries/jquery-latest.js"></script>
<script type="text/javascript" src="llibreries/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/docs.js"></script>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(function()
{
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")
});
});
</script></head>
<body>
</body>
</html>
$(document).ready(function() {
$('.tooltip').tooltipster({
contentCloning: false
});
});
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.js"></script>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="css/vista.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" />
<script type="text/javascript" src="llibreries/jquery-latest.js"></script>
<script type="text/javascript" src="llibreries/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/docs.js"></script>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
</head>
<body>
</body>
</html>
I try different solutions for this problem such as:
Use a modified html5shiv. The html5shiv script adds the ability to add HTML5 tags into older versions of Internet Explorer.
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
Use excanvas to provide a fallback to the
<!--[if lte IE 8]>
<script type="text/javascript" src="/Scripts/excanvas.min.js"></script>
<![endif]-->
Nothing helps. Get an error:
Canvas is not available. If you're using IE with a fall-back such as
Excanvas, then there's either a mistake in your conditional include,
or the page has no DOCTYPE and is rendering in Quirks Mode.
Some other solutions?
all scripts above i include before including flot.js.
Changing of DOCTYPE also doesn't help.
Source of Page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="/favicon.ico" />
<!-- common styles & scripts -->
<link rel="stylesheet" type="text/css" href="/Content/css/custom-fonts.css?v=201306210000" />
<link rel="stylesheet" type="text/css" href="/Content/css/styles.css?v=201306210000" />
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/common.js?v=201306211714"></script>
<script type="text/javascript" src="/Scripts/control-custom-alert-scripts.js?v=201306211714"></script>
<!-- custom styles & scripts -->
<script type="text/javascript" src="/Scripts/jquery.tools.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.form.js"></script>
<script type="text/javascript" src="/Scripts/localization/en/JsMessages.js?v=201306210000"></script>
<script type="text/javascript" src="/Scripts/jquery.maskMoney.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ad-gallery.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.effects.blind.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.selectmenu.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/Scripts/jquery.selecttime.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="/Scripts/jquery.number_format.js?v=201208031818"></script>
<script type="text/javascript" src="/Scripts/jquery.blockUI.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/Content/css/jquery.tree/jquery.tree.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/Content/css/jquery.ad-gallery.css" />
<!--[if lt IE 8]>
<style>
/*body {background:none}*/
/*
#global-wrap .nav, #global-wrap .footer, #global-wrap .content-wrap, #global-wrap .user-nav{display:none}
#oldb-block {display:block; margin: 0 auto;}
*/
</style>
<![endif]-->
<!--[if IE]>
<script type="text/javascript" src="/Scripts/jquery.defaultText.js?v=201208031818"></script>
<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="/Scripts/excanvas.min.js"></script>
<![endif]--!>
<!--[if IE 7]>
<link href="/Content/css/ie7styles.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link href="/Content/css/ie8styles.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 9]>
<link href="/Content/css/ie9styles.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<title>
Listing Stats
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="Viewed Listings Meta" />
<meta name="keywords" content="commercial real estate marketing, commercial real estate professionals" />
<link rel="stylesheet" type="text/css" href="/Content/css/styles-ui2.0.css?v=201310240000" />
<script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.flot/jquery.flot.selection.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/control-chart-scripts.js"></script>
<!--[if IE]>
<script language="javascript" type="text/javascript">
// Add Default Text to inputs
$(function () {
$.defaultText({
css: 'default-text'
});
});
</script>
<![endif]-->
<script language="javascript" type="text/javascript">
function CustomError() {
$('div.validation-error').each(function () {
var error = $(this, 'span').text();
if (error == '')
$(this).hide();
else {
$(this).show();
}
});
}
$(function () {
CustomError();
$('button').click(CustomError);
});
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
var noAjaxBlock = false;
$(document)
.ajaxStart(function () {
if (!noAjaxBlock) {
startBlockUI();
} else {
noAjaxBlock = false;
}
})
.ajaxStop(function () {
if (!noAjaxBlock) {
$.unblockUI();
}
});
</script>
</head>
<body>
...
</body>
</html>
I ran into this problem the other day, this blog post saved me with these instructions:
Use the excanvas.js (or smaller excanvas.min.js) that is included from within the Flot repository. This one differs from others I believe and contains the necessary amendments to make it work
Include the excanvas JavaScript file before you include the Flot JavaScript file(s).
Make sure Tools->Developer Tools->Browser Mode is set to "IE8" as well!
I've included fancybox2 files like instructed here
http://fancyapps.com/fancybox/#instructions
using my extensions xml and
<action method="addJs">
for javascript files and
<action method="addItem">
for css.
Order of my included js and css files inside my :
<link rel="stylesheet" type="text/css" href="magento/js/calendar/calendar-win2k-1.css" />
<link rel="stylesheet" type="text/css" href="magento/js/n123/fancybox2/source/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/default/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="magento/skin/frontend/default/default/css/print.css" media="print" />
<script type="text/javascript" src="magento/js/prototype/prototype.js"></script>
<script type="text/javascript" src="magento/js/lib/ccard.js"></script>
<script type="text/javascript" src="magento/js/prototype/validation.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="magento/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="magento/js/varien/js.js"></script>
<script type="text/javascript" src="magento/js/varien/form.js"></script>
<script type="text/javascript" src="magento/js/varien/menu.js"></script>
<script type="text/javascript" src="magento/js/mage/translate.js"></script>
<script type="text/javascript" src="magento/js/mage/cookies.js"></script>
<script type="text/javascript" src="magento/js/n123/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="magento/js/n123/jquery/jquery.no.conflict.js"></script>
<script type="text/javascript" src="magento/js/varien/product.js"></script>
<script type="text/javascript" src="magento/js/varien/configurable.js"></script>
<script type="text/javascript" src="magento/js/calendar/calendar.js"></script>
<script type="text/javascript" src="magento/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="magento/js/n123/fancybox2/source/jquery.fancybox.pack.js"></script>
Then inside my template (phtml) I've added following code:
<a id="single_1" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg" title="Assunção - Santo Tirso...a New Dimension... (Alex Matos)">
<img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt="" />
</a>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
</script>
In Chrome this error occurs:
http://www.imagebanana.com/view/6oxxttnx/s02.png
Uncaught TypeError: Object function wrap(wrapper) {
var __method = this;
return function()
{
var a = update([__method.bind(this)], arguments) ;
return wrapper.apply(this, a);
}
} has no method 'unbind'
Every help is welcome!
I've found a soulution: in my case the packed "fancybox.pack.js" didn't work and I got that error posted above but the "fancybox.js" ("unpacked"/normal version) works like a charm! Thanks for your support and attention.
I used more than three JavaScripts in Magento and I tried to fix some of the scripts (conflict I think) and it works but the last jQuery (jcarousel) it can be swapped to another category if I click the tabs "new arrival" and "most popular" but now it doesn't work, but if I comment out accordion js file it works but accordion can't work.. :(
Click here : http://thaiamuletstore.com/main1/index.php
head.phtml
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<link href="http://thaiamuletstore.com/main1/style/tabs.css" rel="stylesheet" type="text/css">
<link href="http://thaiamuletstore.com/main1/style/tabs.css" rel="stylesheet" type="text/css">
<link href="http://thaiamuletstore.com/main1/style/tango/skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/jquery.min.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/Untlitie.js"></script> <!-- this-control-jcarousel-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/470fe3190c7d0ea4aacc14677c226000.js"></script> <!--this-control-Accordion-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/jquery.jcarousel.min.js"></script> <!-- this-control-jcarousel-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="http://thaiamuletstore.com/main1/style/ie.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/hoverIntent.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/superfish.js"></script>
<script type="text/javascript" src="http://thaiamuletstore.com/main1/js/organictabs.jquery.js"></script>
<script src=http://thaiamuletstore.com/main1/js/menu_effect/script.js" type="text/javascript"></script>
jQuery.noConflict();
This is the thing for your rescue.