Jquery Uncaught Error - javascript

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<!--loading bootstrap js-->
<!--CORE JAVASCRIPT-->
<script src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setupResponsiveTables();
});
function setupResponsiveTables() {
$(".responsiveTable1").responsiveTable({
staticColumns: 0,
});
$(".overflowContainer").scrollLeft(0);
}
</script>
Uncaught ReferenceError: setupResponsiveTables is not defined
Uncaught TypeError: $(...).responsiveTable is not a function
Kindly help me i cant find any fix :S


There is no reference to the responsive table plugin.
add responsive query plugin;
<script src="js/jquery.responsivetable.min.js"></script>
You can get the plugin from http://declanbright.awardspace.info/jquery-plugin-responsive-table if not already downloaded.

Related

Jquery not loading in Laravel

I have a problem loading jQuery into laravel app. I tried checking if it's installed in the first place and I get success. Using this:
if (typeof jQuery == "undefined") {
alert("JQuery is not installed");
} else {
alert("JQuery is installed correctly!");
}
But then I tried checking if it's loading with code:
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
console.log("jQuery has loaded!");
} else {
// jQuery is not loaded
console.log("jQuery has not loaded!");
}
}
I get no response at all. What could be the problem?
This is my scripts in file (last 2 lines):
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/4-Col-Small-Slider.js"></script>
<script src="assets/js/A-working-Rating-option-for-Contact-Forms.js"></script>
<script src="assets/js/Add%20an%20upsell.js"></script>
<script src="assets/js/add%20to%20cart%20button.js"></script>
<script src="assets/js/ask%20payment%20method.js"></script>
<script src="assets/js/cheque.js"></script>
<script src="assets/js/currency.js"></script>
<script src="assets/js/easings.js"></script>
<script src="assets/js/flickity%20pkgd.js"></script>
<script src="assets/js/flickity.js"></script>
<script src="assets/js/meals%20sizes.js"></script>
<script src="assets/js/menu.js"></script>
<script src="assets/js/modal.js"></script>
<script src="assets/js/plans.js"></script>
<script src="assets/js/realtime%20typing%20card%20expires.js"></script>
<script src="assets/js/realtime%20typing%20card%20number.js"></script>
<script src="assets/js/realtime%20typing%20cardholder%20cvc.js"></script>
<script src="assets/js/realtime%20typing%20cardholder.js"></script>
<script src="assets/js/realtime%20typing.js"></script>
<script src="assets/js/remove%20product%20from%20cart.js"></script>
<script src="assets/js/section%20click.js"></script>
<script src="assets/js/SlideShow.js"></script>
<script src="assets/js/Swiper-Slider-Card-For-Blog-Or-Product.js"></script>
<script src="assets/js/Swiper-Slider.js"></script>
<script src="assets/js/swiper.js"></script>
<script src="assets/js/swipermin.js"></script>
<script src="assets/js/switches%20on%20add%20a%20meal%20page.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/time.js"></script>
<script src="assets/js/upsell.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="assets/js/jquery.min.js"></script>
I'm using Laravel mix, it seems there's problem somewhere in app.js I suppose.
I managed to load jQuery, I get success message, but it still doesn't work. For example:
$(document).ready(function () {
$("#category_image").on("change", function () {
var image = $("#category_image");
var preview = $("#preview-image");
var objectURL = URL.createObjectURL(e.target.files[0]);
preview).css("background-image", 'url('+objectURL+')');
})
});
This code doesn't work, unless I messed something up. If I use plain javascript onchange and I use jQuery id selector it works. Am I doing this function wrong?

Converting HTML div to pdf using jsPDF shows doc.fromHTML is not a function

I am trying convert the html div element to pdf file using jspdf. i have included all js script including form_html.js. still i am getting "TypeError: doc.fromHTML is not a function".
<script type="text/javascript" src="jsPDF-master/jspdf.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.cell.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.ie_below_9_shim.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.javascript.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jsPDF-master/libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.sillysvgrenderer.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jsPDF-master/jspdf.PLUGINTEMPLATE.js"></script>
<script src="jspdf.debug.js"></script>
<script src="jspdf.plugin.from_html.js"></script>
and javascript is
jQuery(function($) {
$("#button1").click(function(){
var doc = new jsPDF();
var specialElementHandlers = {
'#simple': function (element, renderer) {
return true;
}
};
var source = $('#simple').html();
doc.fromHTML(source, 0.5, 0.5, {
'width': 75,'elementHandlers': specialElementHandlers
});
doc.output("dataurlnewwindow");
});
});
Pls help me in fixing this

i might be wrong because i have not run your code but i notice is you have not included a jquery library into the script tag and you are using a jquery function. Try including Jquery and retry hope that solves your problem..

Merge two Jquery scripts

I downloaded two scripts from the net,
one looks like this
<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script>
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
and the other
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
<script>
$(function () {
$("#mybook").booklet();
});
</script>
When I place both in one page only the latter works, however individually they work fine.
I understand you can't call jQuery twice within the same page, but when I remove all the jQuery additions and just use /jquery.js none of them work. This is the scripts as I downloaded them, I figured the HTML between them is not needed to post here.
How can I make both work on one page?

You are adding 2 js libraries in first script and 4 to the second script. All the libraries essential to run their respective scripts.
One problem here is, you are adding jQuery twice which is 1.6 and 2.1. Which is unnecessary.
Try doing like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
//required for first script
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
//-------------
<script>
$(function () {
//this is your second script
$("#mybook").booklet();
//this is your first script
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
});
</script>
This should keep your second script running. And if first doesn't run then it means 'jqzoom' plugin is not compatible with jquery 2.1

Most problems from older jQuery versions are solved in their Migrate Plugin, you should check that out.
Just add the newest version and that plugin and your scripts should theoretically work.

with all other library include j query standard librery at once.
<script src="jqzoom/js/jquery-1.6.js" type="text/javascript"></script>
<script src="jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom/css/jquery.jqzoom.css" type="text/css">
<script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script>
<script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.min.js"><\/script>') </script>
<script src="booklet/jquery.easing.1.3.js"></script>
<script src="booklet/jquery.booklet.latest.js"></script>
<script>
$(function () {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:true
});
$("#mybook").booklet();
});
</script>

Drupal Bootstrap Scroll Conflict with Readmore Plugin

When I call a window resize and click the readmore link that is provided I get this message Additionally, the close link appears to get appear stuck when the characters are at a "in the goldie locks" line height area:
Uncaught TypeError: undefined is not a function bootstrap.js?n4eadf:121
(anonymous function) bootstrap.js?n4eadf:121
jQuery.event.dispatch jquery.js:5095
elemData.handle jquery.js:4766
This is my actual function:
jQuery(document).ready(function($) {
jQuery(window).resize(function($){
jQuery('.subcontainer').readmore({
speed: 75,
maxHeight: 129
});
});
});
Here is the reference error:
$scrollableElement.once('bootstrap-anchors', function () {
$scrollableElement.on('click.bootstrap-anchors', 'a[href*="#"]:not([data-toggle], [data-target])', function(e) {
this.scrollTo(e);
});
});
And Finally my called js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.js'>\x3C/script>")</script>
<script src="http://tsunami.crabdance.com/misc/jquery.once.js?v=1.2"></script>
<script src="http://tsunami.crabdance.com/misc/drupal.js?n4eadf"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script>window.jQuery.ui || document.write("<script src='/sites/all/modules/jquery_update/replace/ui/ui/jquery-ui.js'>\x3C/script>")</script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.js?v=1.2.1"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script src="http://tsunami.crabdance.com/modules/contextual/contextual.js?v=1.0"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/jquery_update/replace/ui/external/jquery.cookie.js?v=67fb34f6a866c40d0570"></script>
<script src="http://tsunami.crabdance.com/sites/all/modules/gss/scripts/autocomplete.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/modules/toolbar/toolbar.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/affix.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/alert.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/button.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/carousel.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/collapse.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/dropdown.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/modal.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/tooltip.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/popover.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/tab.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/readmore.js?n4eadf"></script>
<script src="http://tsunami.crabdance.com/sites/all/themes/bootstrap_tsunami/bootstrap/js/transition.js?n4eadf"></script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"bootstrap_tsunami","theme_token":"zeb-lBs7FuYRH5wwgGZbBZ5IpDYYfIqZkbQjisS0Auk","js":{"sites\/all\/themes\/bootstrap\/js\/bootstrap.js":1,"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.js":1,"0":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.2\/jquery-ui.js":1,"1":1,"sites\/all\/modules\/jquery_update\/replace\/misc\/1.9\/jquery.ba-bbq.js":1,"sites\/all\/modules\/jquery_update\/replace\/misc\/1.9\/overlay-parent.js":1,"modules\/contextual\/contextual.js":1,"sites\/all\/modules\/jquery_update\/replace\/ui\/external\/jquery.cookie.js":1,"sites\/all\/modules\/gss\/scripts\/autocomplete.js":1,"modules\/toolbar\/toolbar.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/affix.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/alert.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/button.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/carousel.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/collapse.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/dropdown.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/modal.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/tooltip.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/popover.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/tab.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/readmore.js":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/js\/transition.js":1},"css":{"modules\/system\/system.base.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"misc\/ui\/jquery.ui.menu.css":1,"misc\/ui\/jquery.ui.autocomplete.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/contextual\/contextual.css":1,"modules\/field\/theme\/field.css":1,"sites\/all\/modules\/footer_sitemap\/footer_sitemap.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/bootstrap_tsunami\/bootstrap\/css\/bootstrap.min.css":1,"sites\/all\/themes\/bootstrap_tsunami\/css\/style.css":1}},"gss":{"key":""},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"pathPrefixes":[],"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height","bootstrap":{"anchorsFix":1,"anchorsSmoothScrolling":1,"popoverEnabled":1,"popoverOptions":{"animation":1,"html":0,"placement":"right","selector":"","trigger":"click hover","title":"","content":"","delay":0,"container":"body"},"tooltipEnabled":1,"tooltipOptions":{"animation":1,"html":0,"placement":"auto left","selector":"","trigger":"hover focus","delay":0,"container":"body"}}});</script>
</head>

I got the similar error when integrating with flexslider plugin. Try to go to your Bootstrap Settings (yourdomain/admin/appearance/settings/yourtheme), unchecked the "Fix anchor positions". I turn that off and the error disappeared. See if it works for you.
Javascript (Tab) > Anchors > Fix anchor positions

BBC glow carousel: Error: glow.widgets is undefined

I use BBC carousel http://www.bbc.co.uk/glow/docs/1.7/furtherinfo/widgets/carousel/. Here is my script code
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>
it generates Error: glow.widgets is undefined. What am I doing wrong?

Ok, I figured out the problem: You're not including the widgets script or css, per the Widgets section of http://www.bbc.co.uk/glow/docs/articles/getting_started.shtml
So, to resolve your error, you need to modify your script so that it looks like this:
<script src="/themes/javascript/glow/1.7.7/core/core.js" type="text/javascript"></script>
<script src="/themes/javascript/glow/1.7.7/widgets/widgets.js" type="text/javascript"></script>
<link href="/themes/javascript/glow/1.7.7/widgets/widgets.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
glow.ready(function() {
var carousel4 = new glow.widgets.Carousel("#snapwrap",{
loop: true,
});
});
</script>

Categories