jquery conflict with hoverIntent - javascript

I have a site that has been working fine however recently we added a form to a specific page. This form was built by someone else and uses javascript/jQuery to process.
Upon adding this form it has broken most of the other jquery on the page, namely the dropdown menu plugin.
This is only happening on the below page:
http://agovo.co.uk/crm-and-sales/crm-sales/bpmonline/
The console error is:
TypeError: $(...).hoverIntent is not a function
But I noticed it has broken the slide out box to the right of the site. and these errors do not happen on other pages.
I realise there is jquery loaded twice, one if by WP and the other is manually, if i remove the manually added one it breaks everything so im not sure what the jquery one is doing!
Any advice? Thanks

You're loading two different versions of jQuery on your page (1.11.1 first, and then 1.10.2).
Every script tag that contains a plugin that occurs after the first version, but before the second version, will be "overwritten" (and you'll see the error you are getting above).
Please only ever include one version of jQuery on your page.

I added no conflict to the form jQuery and it works fine now.

Related

Embedded calendar stopped working

I am responsible for maintaining 2 websites. One is a Wordpress website that is just a list of events using Time.ly's All in One Event Calendar plugin. The other is a conventional built from scratch website using html.
The html website has had code that embedded the Wordpress calendar feed into it for several years, and it's always worked fine and I haven't had to do anything with it. Recently, it just stopped working. The calendar feed is just gone with no errors returned, no problems loading the site or anything. It looks as if somebody just deleted the code for it. However, the code is still there and is as follows:
<script class="ai1ec-widget-placeholder" data-widget="ai1ec_superwidget" data-action="stream" data-tag_ids="45">
(function(){var d=document,s=d.createElement('script'),
i='ai1ec-script';if(d.getElementById(i))return;s.async=1;
s.id=i;s.src='http://www.texascitycommunitycalendar.com/?ai1ec_js_widget';
d.getElementsByTagName('head')[0].appendChild(s);})();
</script>
Can anybody identify any obvious reason that that might have just stopped working?
I don't see a reason for that very last () pair in the script tag (just before the semicolon that is followed by the closing </script>tag. Try to erase it.

Keep getting jQuery conflicts, can't resolve

I'm currently updating the website http://www.dev.optiekvandevecht.nl/, I updated it from Joomla 3.3.6 to Joomla 3.4.1. Before updating to 3.4.1, a few lightbox thigns wouldn't work. Right now, I've updated Joomla, and the lightboxes work fine, however, now the nivoSlider seems to be broken (and I suppose it's got to do with jQuery errors, .nivoSlider is not a function.
I honestly don't see what is wrong, it's a Joomla module called ARI Image Slider, but I can't find anything related to the issues I run into.
I deleted an (apparently) unused extension and the problem was solved
It seems like the jquery is already included in any of the extension. Try disabling jquery in any one extension then check it. I hope it would work.

Fabric.js makes jQuery script fail on Chrome

I use Fabric.js to make a product customizer.
To get an interface with other interactions, I use jQuery. On Firefox everything works fine, but on Chrome, the jQuery part fails. No error is displayed.
I use other javascript scripts on this same page (Tinymce, jQuery Form Plugin). But I made a first debug and if I do not load Fabricjs on the page, the jQuery part executes well.
You will see other plugins loaded, it's from the CMS we use.
The jQuery* part is the one I have problems with. It is the one handling the three tabs on the right part of the page (on click content under them should change).
I try to make a JSFiddle but the problem doesn't appear, so here is the page :
page
You can login with:
Name: demo
Password: demo
Thank you :)
EDIT : I have found a way to avoid the problem : I comment the ""Click" event proxy" in Fabric.js file. This redefinition seems to be in conflict with jQuery.

Object has no method error after no conflict

I am working on a site where I am using Scott Robbins pageslide to show/hide a responsive navigation.
For some reason the pageslide navigation works fine on the rest of the site but, when it gets to the contact page, it breaks: http://kevinpresbrey.com/contact
I took a look at the console in Chrome and I'm getting this error:
Object [object Object] has no method
I updated the jQuery call for pageside from this:
$(".open").pageslide({ direction: "right"});
To this:
jQuery(".open").pageslide({ direction: "right"});
and it's still blowing the error and causing the pageslide not to function on the contact page.
Like I mentioned before, it works fine on all the other pages, but the contact page. I have a feeling that the embedded form that was generated from constant contact might be causing the issue, but other than that, I have no idea.
Any suggestions?
You have multiple versions of jQuery in your code, which could be causing the problem (even though some of the other code seem to be working). You have v1.8.3 and v1.8.2.
One of them is being pulled from:
http://www.formstack.com/forms/js/3/jquery.min.js
the other one from:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=3.6
Fix that and your code should work.
Ok, I figured out what it was.
Looks like it was partially from what Hanlet said. There were two version of jQuery that were being pulled.
Apparently when I commented out the code that pulls in jQuery within my functions.php file it defaulted to the version that comes baked in with Wordpress which is version 1.10.2 and that apparently fixed the issue.
So, yeah. Hooray...I guess?
"pageslide" is not a build-in method for jquery selectors. You may want to double check if you include the "pageslide" javascript library / jquery plugin correctly.

What part of jQuery UI puts the ui-widget-loading class on and how can it be removed?

I am attempting to integrate jQuery UI tabs with knockout and I'm having a problem with tabs added at the start of my js. They seem to have a class ui-tabs-loading and I'm not sure why.
Here is the fiddle: http://jsfiddle.net/edhedges/mPbAL/
As you can see at the bottom of the js I am removing that class, but if you comment that out it breaks the first three tabs.
To "answer" your question, the ui-tabs-loading class appears to be added when an ajax request is spawned to fill the tab content (source: line #801 - https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.tabs.js). As to why this particular case is being treated as ajax by jQuery UI, I'm still looking into that because I'm curious.
I know that jQuery plugins historically don't work well with javascript data-binding frameworks, but there's definitely always a work around.
I'll update my answer if I figure something out.

Categories