angular ui date with latest jquery ui datepicker reopening IE(11) - javascript

I am trying to use the latest angular 1.5.8, jQuery 3 and jQuery UI 1.12 versions together with angular ui date 1.0.1.
These versions combined work fine in chrome / firefox. But now it seems that in IE11 the datepicker keeps reopening after selecting a date.
A very basic fiddle with a failing example:
https://jsfiddle.net/37zt9pj7/
HTML code in the example:
<body ng-app="test">
<input type="text" ng-model="datum" ui-date>
</body>
And angular module:
angular.module('test', ['ui.date']);
I've tried many fixes for 'reopening issues' with previous versions, but it looks like these don't work for the current versions.
Related:
https://bugs.jqueryui.com/ticket/9125
Has anyone found a fix for this already?

seems like this is a bug in the ui date 1.0.1 version of the library, unrelated to angular/jquery/jquery-ui. Using 1.0.0 solves my issue.
Will close the question, and report a bug for the library.

Related

Get easy commenter and Bootstrap to work with same version of jQuery?

I am using bootstrap 3 and jQuery version 1.10.2
I am also using easy commenter and they require jQuery version 1.5.2 I have tried to just keep version 1.10.2 , just keep version 1.5.2 and keep both of them. But in every case one of them does not behave as expected. With version 1.5.2 the collapsible menu in header stops working with version 1.10.2 easy commenter stops working. How should I deal with this problem?
Here is a link to the page I am working on http://8mags.com/lessons/php/phpcalendar.php
Use the newer JQuery plus the migrate plugin
The correct answer is: If the "easy commenter" plugin doesn't work with a current version of jQuery, rather than one from three years ago, you want to find a different plugin or take the existing one and modify it so that it works with the current jQuery. The differences between 1.5.2 and 1.11.2 (the current version as of this writing) aren't really all that big, and are easily updated.
If you don't want to do that (why not?), then you can use both versions of jQuery on your page, but it doubles the size of an already-large library, increasing page load time.
Here's how:
<script src="jquery-1.5.2.js"></script>
<script src="easy-commenter.js"></script>
<script>
var $old = jQuery.noConflict(true);
</script>
<script src="jquery-1.11.2.js"></script>
<!-- all your other plugins and such, including bootstrap -->
You load jQuery 1.5.2, load the easy commenter plugin, then use noConflict to release both the $ and jQuery symbols, and load jQuery 1.11.2.
When you want to use the easy commenter plugin, use $old rather than $.

How to create something like jQuery Accordion?

We need to create a FAQ page that has a requirement that clicking the title will open up the answer.
jQuery Accordion popped immediately to mind, and I have spent the last couple of days trying to get that to work with our code.
In short, it can't (at least, not easily) because migrating our version of jquery up from 1.7.1 causes a number of our other controls to break.
All of our controls load from a Template, like the one below:
<?php include(SITE_ROOT.'lib/templates/masterPage.php'); ?>
I could modify masterPage.php to use the latest jquery, but then we would need to stop all of our software department to spend the next few months regression testing. The company is not ready for that.
I have gotten Accordion to work with 1.8.3 and up (see fiddle, but we are locked into 1.7.1 for now.
Is there something else out there that I can use to create this effect besides the latest jQuery?
Is there anything in HTML5? I can use that.
You can create an accordion with HTML 5 and CSS3 see http://www.expression-web-tutorial.com/accordion-menu-tutorial.html
This is a really nice accordion with just plain CSS3, though if you support IE lower than 9, it won't be useful, as it use pseudo classes.
http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
There's also this other one that I remember adapting to my needs on a project I made about a year ago.
http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3
Again, CSS3, IE will cause issues.
You could try another accordion plugin, there 2 that are bundled with the two best frontend frameworks available
I believe foundation 4 may be compatible with your version of jQuery
http://foundation.zurb.com/develop/download-f4.html
http://foundation.zurb.com/docs/components/accordion.html
or
Bootstrap should work too.
http://blog.getbootstrap.com/2013/05/17/bootstrap-2-3-2-released/
http://getbootstrap.com/2.3.2/javascript.html#collapse
^^^ This is an older version of bootstrap, the newest version might be compatible too. might be worth checking if you go down this route as you would want to be on the latest stable release really.
I prefer foundation by miles though
UPDATE
Foundation don't seem to mention that any specific version of jQuery is required and there seems to be people using zurb foundation 5 with jquery 1.1..... and you can just choose the accordion using the customise tab http://foundation.zurb.com/develop/download.html#customizeFoundation

LoopedSlider suddenly stopped working

I have been styling a predefined site, and after adding some box-shadows last night my loopedSlider has stopped working.
I have installed a clean version of the template I am using alongside. The page in question is
scorpionhosting.net
and the clean template is:
scorpionhosting.net/cleanhostpay
I've been back through the CSS, checked the html and w3c validated both to double check it wasn't something obvious (closing tags etc). I notice that the clean template is using loopedslider.min.js while my page is not. I don't understand why this is, I'm afraid I don't speak javascript very well yet!
The clean version has jQuery 1.3.2 loading:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Your new version has no jQuery.
The latest version of jQuery is 1.9.1, by the way, so I'd update for a new site. You may have trouble with your slider if you go that far, though, since 1.9 removed some deprecated methods. I'd try 1.9.1, and if it doesn't work, try 1.8.3.

jQuery slider not "sliding" because of differing jQuery/UI versions

I adapted the jQuery slider code from http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/ into my website which is based on Twitter's Bootstrap v2.0.
The problem is that the slider from webdeveloperplus.com is using an older version of jQuery and jQueryUI (1.3.2 and 1.5.3 respectively). The slider works fine if I import the two specified versions of jQuery/UI but Twitter's Bootstrap JavaScript components doesn't seem to work with the those versions. And if I use the latest version of jQuery/UI the slider won't work.
On the webdeveloperplus.com page, the author said to change the following line of code for it to work with the "latest" version of jQueryUI
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
to:
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
but it still won't work. The article was probably last updated 2008 or 2009.
My guess was that the line of code above is using something deprecated and removed/changed in the current version of jQuery/UI but I checked jQuery UI's API and it seems to me that's not the case. I would appreciate it very much if someone could help me find out what's the show stopper here. Thanks.
You could use jQuery's noConflict() function to include two different versions of jQuery.
<script type="text/javascript" src="older_version_of_jquery"></script>
<script type="text/javascript">
//Do slider work
//...
$.noConflict();
</script>
<script type="text/javascript" src="newer_version_of_jquery"></script>
Documentation: http://api.jquery.com/jQuery.noConflict/

Is jQuery UI tabs broken in rc6?

I've been using jQuery UI v1.6rc2 for a while, and wanted to upgrade to 1.6rc6 to see that they haven't made any breaking changes. It seems they have; all of my tabs stop working whenever I switch to rc6.
There seems to be two things wrong. First, the manual advocates using the following:
$('#container').tabs();
However, with rc2 I've always had to do this:
$('#container > ul').tabs();
So when rc6 is in effect, none of these methods work.
Also, Firebug reports the following error when rc6 is installed:
$.Event is not a function.
this.namespace+'-state-disabled').attr("...event[prop]=event.originalEvent[prop];}}
All Javascript/jQuery executed before the call to .tabs() work fine. It breaks in both Firefox and Chrome.
You need to upgrade to jQuery core version 1.3.1
UI 1.6rc6 only works with 1.3.1

Categories