JS and JQuery issues (is not a function)

1

After seeing the latest post on Medium regarding using the forum as a Stack Overflow alternative i though i would reach out to see if my fellow campers can help me with a bug i have.

Been pulling my hair out for two days.

Had a job to create an image gallery webpart for a Sharepoint 2013 website.

You can take a look at my code here: https://github.com/deanhtid/sp-gallery

The solution I used is from a guide here: http://michaelsoriano.com/better-photo-gallery-sharepoint-rest-and-handlebars/

The error i’m getting is as follows:

sp-gallery.js:47 Uncaught TypeError: $(...).magnificPopup is not a function
at buildGallery (sp-gallery.js:47)
at Object.<anonymous> (sp-gallery.js:20)
at c (jquery.min.js:3)
at Object.fireWith [as resolveWith] (jquery.min.js:3)
at k (jquery.min.js:5)
at XMLHttpRequest.r (jquery.min.js:5)

The popup does not function correctly when the page first loads but then seems to work after a refresh of the page.

Any help would be much appreciated :slight_smile:

2

It may be your code was starting to execute before the rest of the page elements have been loaded (slow network connection, lots of remote calls?). On your next refresh, your assets are already cached by the browser and therefore not causes any problem.

If you’re already using jQuery, maybe try wrapping the whole code in a document.ready() function.
https://learn.jquery.com/using-jquery-core/document-ready/

Also, try putting all your scripts at the end of your body tag, instead of the top.