jQuery ui failing to load 1 in 10 times (approx) - javascript

We're am building a SharePoint 2013 site (not sure if SharePoint is affecting it or not) with which I am using jQuery, jQuery-ui, requireJS and angular.
We've got require and angular to play nicely together, loading in the required js files/controllers as and when they are needed.
However, we are having issues with jQuery-ui.. Ever so often (1 in 10 approximately), it fails to load properly. The page has fully loaded, and the jquery and jquery UI files are listed under sources, yet no UI functions work.
For example, my calendar controls error when loading, with "undefined is not a function".
I can type " $('#datepicker').datepicker" in the console window, and I get "undefined" back. When jQuery UI does successfully load, I get the expected result in the console window..
I have tried loading the jQuery and jQuery UI files directly at the top of the page, and not via require, but this fails to work to resolve the issue..
Can anyone suggest what may be going wrong here please?
Thanks
Danny

Issue fixed: I was loading jQuery a second time in require, which was causing the issues. I've taken jQuery out of require now, and loading directly on page, as pretty much every page in the site uses it anyway. –

Related

javascript scratchblocks squarespace

I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.

Typo3 - t3jquery integration is not working

so first i have to say that i'm realy new to Typo3, so i dont rly know much about the cms.
Actually i have a Problem with my Page.
I want to integrade a Image Slider in my Page with the Nivo Slider Plugin.
The Problem is, that the Slider is not shown.
The page gives the error
TypeError: jQuery(...).nivoSlider is not a function
so i think, there is some problem with the jQuery.
For that i installed t3jquery but its still not working.
i nearly tried every configuration for t3jquery and also analysed the other extensions on my Page with the plugin, but nothing works.
Some of you have advice what i can do?
The page is hxxp://www.eventbringer.de/skireisen/opening-slider/ (so you can see the error in the JS Console)
TYPO3 has a very versatile way of getting content of code to the front-end.
One way is to use typoscript.
read : https://docs.typo3.org/typo3cms/TyposcriptReference/
You can see typoscript as a huge configuration 'array' that can declare all sorts of settings.
One of the settings is about how the 'page' itself needs to have.
If you need, for example, some javascript in your page, you could use
page.includeJs
https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#setup-page-includejs-array
if you need yous JS at the footer, and its an external lib, you could use
includeJSLibs.twitter = http://twitter.com/javascripts/blogger.js
includeJSLibs.twitter.external = 1

primefaces jquery ui tabs

Context: Trying to use jquery ui plugins (tabs and dialog) in a primefaces application directly from javascript (due to a certain requirement).
Problem: Getting 'length undefined' and 'undefined not a function' errors on the calls. More specifically, $("#id").tabs() is throwing the error.
What I did: search in stackoverflow; checked $.fn.* and $.ui.* in the console; surprisingly a lot of ui plugins are available (datepicker, droppable, selectable) but dialog and tabs seem to be missing. $.ui.version is 1.11.3. I tried using outputScript and directly <script> tags to include jquery ui, but none seemed to include these plugins; tried noConflict.
Additional info: It worked at some point intermittently.. not sure what caused it to work and what is preventing it from working now. Spent a lot of time troubleshooting this.
Advance thanks for your time and shall drop additional info if required.
PrimeFaces contains a customized (subset) of the jQuery-UI components. The others have to be added by you. And make sure you use them from a compatible version. Compatible with the jQuery version that PrimeFaces uses.
Including them should be done like you normally would include separate jquery-ui components or jquery-ui compatible ones by normally loading them via a javascript tag

jQuery UI returning "undefined" for Timepicker add-on in Wordpress

I am attempting to utilize Trent Richardson's TimePicker jQuery UI plugin to add a time picking widget to a Wordpress plugin. jQuery and jQuery UI are both enqueued as they should be and are working fine (the Datepicker/Slider requirements for TimePicker have both been verified to be included and working as well as the TimePicker script is loading fine).
However, Firebug is giving me the following error:
TypeError: $.ui is undefined
The line in question is this:
$.ui.timepicker = $.ui.timepicker || {};
I understand that it's occurring because for some reason this script isn't finding $.ui (which I assume is a standard notation for referring to jQuery UI?) I also tried simply pre-defining the $.ui at the top and I got rid of that undefined error, but then it threw another for
$.datepicker
That is further on down in the code on line 973. There doesn't seem to be a lot of sense in explicitly defining $.ui and $.datepicker in the top of the script when they should be valid references to the jQuery objects... I'm just not sure how to fix what appears to be a broken link.
I ended up finding another TimePicker plugin that worked right "out of the box" so to speak. Literally just changed the reference from the old jquery.timepicker.js to the new jquery.ui.timepicker.js and everything is working beautifully.
My general intuition/feeling on the "old" script is that it might be using either an outdated or advanced api calling method that is causing problems with jQuery's/UI's version.

jQuery UI 1.7.3 datepicker conflict with date.js causing "too much recursion"?

I'm trying to use jQuery UI 1.7.3 datepicker widget in a jQuery UI dialog. The contents of the dialog are from a page template which includes all the various imports of javascript required to make the page function. One of the things I also import is the famous date.js file.
This page that I load in the dialog also exists by itself as a standalone page. The datepicker works like a charm there. Everything breaks when I load it in the dialog. When focus is given to the date input field, the datepicker should show up. However, I get a disgusting error like so:
too much recursion
[Break on this error] return w;};Date.prototype.isDST=function...ase"z":return"";}}):this._toString();};\n
The datepicker calendar doesn't show and I get 1 error in my firebug saying that it's date.js that is puking. I've ran into similar problems like this in the past dealing with too much recursion but I am never too sure how to fix such errors.
Can someone tell me what's the matter?
I'm running jQuery UI 1.7.3 and date.js as well for a modal window and was having the same problem. I was sending all of the scripts needed for the standalone page and for the dialog all in one go, but this meant that some of the same scripts were actually duplicated from the main application window to the dialog. Removing references to the duplicated scripts (for the dialog) fixed the problem.
In essence, Date.js was being loaded twice, and fixing that fixed the problem.
I'm successfully using the datepicker in a modal jqueryui dialog, version 1.8.9. But I'm including the .js as a 'all-in-one'.
You should try to update jqueryui or use the complete package as one file for testing, and if it does not work, provide a failing test case so we can look at it.

Categories