Cannot read property 'length' of undefined [Galleria-1.4.2.js] - javascript

I'm getting the following error in my console:
Uncaught TypeError: Cannot read property 'length' of undefined galleria-1.4.2.min.js:2
trying to use Galleria.io, version 1.4.2 with the basic "classic theme". I do have jQuery (v1.10.2) included and the following code which should be the basic code for getting the galleria image gallery to work:
<script src="galleria/galleria-1.4.2.min.js"></script>
<script>
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
</script>
and guess what, it seems to work perfectly. BUT, I'm having this error in my console and I'm not allowed to have errors in my console. Neither do I like error messages in my console...
I have no clue what is causing this and what I can do about it, all I know it's triggered by the following line:
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
Even if I would leave the options blank. I'm also using bootstrap v3 if that might have anything to do with it.
The selector is a class and not an ID, but I've seen it in example code so it souldn't be a problem. I have multiple small image galleries on one page, so 0, 1 or more so working with ID's is not a good option. My application does require this.
Thanks in advance for helping.

Hello fellow Galleria User. Your problem is
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
You have to ensure its loaded before
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
is called.
To do so, I loaded the Theme in the Header after the Galleria.js.
I invoke the Galleria.run Command in a script-tag after the Galleria Container containing the Pictures.

Related

Resolve the not a function error in the webpage

This is a screenshot of the error from Developer console in browser:
Now, I understand that the error occurs because .suggest() is not a function but it is being called in ajax.js?ver=1.6.5:1287. I don't fully understand what the errors information provided below that means. The lines i etc. Am I supposed to find the .suggest() function in jquery.js?ver=1.12.4-wp:2?
Here is the code from ajax.js:
jQuery(document).ready(function ($) {
$('#wpf_tags').suggest(
window.ajaxurl + "?action=wpforo_tag_search",
{ multiple:true,
multipleSep: ",",
resultsClass: 'wpf_ac_results',
selectClass: 'wpf_ac_over',
matchClass: 'wpf_ac_match',
onSelect: function() {}
}
);
// More code
This is from a WordPress plugin which works fine with the default 2019 theme. However, it throws up the error when I use it with a theme I created. I am loading jQuery version 3.3.1 in the footer of my theme. Can this be the reason for the above error?
Thanks.
UPDATE
I added the plugin to the footer of the webpage but the error still did not disappear. After that I looked at the source code of the page by pressing Ctrl + U. This showed me that the problematic file ajax.js loads on line 102. However, the suggest plugin loads on line 515.
I have no control over the source code on that page because it is generated by the WordPress plugin. How can I load these files in proper order?
Thanks.

Dialog method supported in one page but not in another

I have 2 .NET web pages that have the same popup box in both pages The JavaScript is exactly the same in both pages, I copied the code from the page that works to the other page and it doesn't work. the one that doesn't work gives me the error message:
Scripts/jquery-3.3.1.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.
I have tried putting the code at the end of the page, no difference. Best I can tell jquery is being load into the page in the header when I check the page with the IE developer. Hope someone can point me in the right direction.
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href ="~/Styles/Default.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../Scripts/jquery-ui-1.12.1.js"></script>
<script>
$(document).ready(function() {
$("#dd2875").dialog({
buttons: {
"Cancel": function() {
$("#dd2875").dialog('close');
}
},
dialogClass: 'myTitleClass',
draggable: false,
width: 800,
height: 400,
hide: 2000,
show: 'slidedown',
hide: 'explode',
autoOpen: false
});
$("#btnNewAccount").click(function(evt) {
evt.preventDefault();
$("#dd2875").dialog('open');
});
});
</script>
The DOM probably does not contain an element with the ID dd2875,
Verify that #dd2875 actually exists on the page at the point that you are calling dialog()
I entered the code you sent and this is what I got back in the console.
jQuery.Deferred exception: Object doesn't support property or method dialog' TypeError: Object doesn't support property or method 'dialog'
at Anonymous function (http://localhost:60086/Add_CAC_ID.aspx:14:13)
at mightThrow (http://localhost:60086/Scripts/jquery-3.3.1.js:3534:10)
at Anonymous function (http://localhost:60086/Scripts/jquery-3.3.1.js:3602:12) undefined
I figured it out, had to go back and rewrite the page one section at a time to do it. The problem was a conflict between the JavaScript and the asp validation controls. When I put the control on the page it caused the error with the dialog. I found two solutions to the conflict. I could add the first line in the page load or the second line in the JavaScript either one worked. Thanks for the help in getting me pointed in the right direction.
Unobtrusivevalidaionmode = Unobtrusivevalidaionmode .none
or
$j = $.noConflict;

Telerik modal mvc Unable to get property 'scripts'

Using Telerik controls version 2012.1.214.340 with mvc 3. I want to open a modal window to an external page and thought it would be straight forward....but either it is not...or more likely I am not googling / reading the correct documentation.
I don't really want to load the content into a hidden div and then pop it modal later if the user chooses to do so.
I would prefer to just do it all in javascript / jquery and so my research led me to write this:
What I wrote thus far in javascript is:
var windowElement = $.telerik.window.create({
title: "Test Modal",
html: "<strong>Where am I</strong>",
contentUrl: 'http://www.google.com',
modal: true,
resizable: false,
draggable: true,
scrollable: false,
onClose: function () { }
});
cshtml razor is:
#(Html.Telerik().ScriptRegistrar()
.jQuery(false)
.jQueryValidation(false)
.DefaultGroup(grp => grp
.Add("telerik.window.min.js")
))
)
When I run the site I get this error on load of the page:
0x800a138f - JavaScript runtime error: Unable to get property 'scripts' of undefined or null reference
and the debugger is on this line in the telerik.window.min.js
b.scripts.push("telerik.window.js")
Based upon the line it broke on I went looking for telerik.window.js and didn't find it in the project...huh? The previous owner didn't include that one file?
So I went to google code and found this.
Created the file and added it as such and still I get the error...
So I think I am missing something else but not sure exactly what.
TIA
You shouldn't have to manually include a telerik JS file, they should be loaded automatically (as long as they are in a correct folder).Do you have a folder /Scripts/2012.1.214 with a lot of telerik.js file + jquery ?
Can you try again without adding that file to the DefaultGroup ?
But you'll have another problem, as I see you declare jQuery(false). Was it done on purpose ? Because if you set it to false, and don't declare another jQuery file in the DefaultGroup, nothing will work.
I had the same problem, doing this worked for me:
#(Html.Telerik().Window()
.Name("_placeholder")
.Visible(false)
)
Including somewhere on the page a static window that will never be used - telerik seems to only include scripts when an control of that type is used.

Problems with Masonry, jQuery and imagesLoaded

Web noobie here. I'm having a problem getting Masonry to work properly with the site I'm building. Here is the code I'm trying to execute:
$( document ).ready(function() {
...
var $article_display = $('#article_display');
$article_display.imagesLoaded(function() {
$article_display.masonry({
columnWidth: Math.floor($('#article_display').width() *.3) + 2,
itemSelector: '.article',
isAnimated: !Modernizr.csstransitions
});
});
...
});
I'm getting this error: "Uncaught TypeError: Object [object Object] has no method 'imagesLoaded' ." I've looked around for the past two days to find some kind of solution to this before posting this question here and have been unsuccessful so far. It seems like my browser isn't recognizing that I've included the imagesloaded.pkgd.min.js file...? According to the reference material here: http://masonry.desandro.com/appendix.html this code should work.
Any help would be greatly appreciated, I can try to get a jsfiddle set up if that would make a difference.
Thanks!
Edit: Here's a JSFiddle showing the issue: http://jsfiddle.net/DDQtD/
Figured it out. I had a typo when I was loading my scripts, it looked like this:
<script type="filepath/imagesloaded.pkgd.min.js"></script>
I needed to switch out type with src. So many simple mistakes!
I would try Salvattore, it works in a different way so images don't have to load before the script is loaded, and you can configure the script with CSS and HTML.
http://salvattore.com/

Pretty photo not working: "prettyPhoto is not a function"?

I'm trying to setup PrettyPhoto on a wordpress site.
Example of page that loads script: http://kaarma.pixelworklab.com/quick-pay/
This is one of the errors output in firefox console:
[cycle] terminating; zero elements found by selector
jquery...test.js (line 27)
TypeError: $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").prettyPhoto is not a function
[Break On This Error]
showTitle: true /* true/false */
Basically when you click on the images (bottom 3) they open in a new screen and never trigger prettyPhoto..
Any ideas greatly appreciated!
Thanks!
PrettyPhoto javascript and CSS files are not loaded, you have specified wrong urls
http://kaarma.pixelworklab.comLIBRARIES_URIprettyPhoto/css/prettyPhoto.css?ver=3.4.1
http://kaarma.pixelworklab.comLIBRARIES_URIprettyPhoto/js/jquery.prettyPhoto.js?ver=3.4.1

Categories