Is jQuery UI tabs broken in rc6? - javascript

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

Related

W2UI 1.5rc1 not working fine with jQuery 3.2.1?

I'm trying to reproduce the example from W2UI 1.5rc-1 using an installed version of jQuery (3.2.1). I tried a grid, say. Nothing works fine. I switched to the exact jQuery version used in the example, i.e. 2.1.1 and everything ran fine.
Does someone know if W2UI 1.5rc1 is compatible with jQuery 3.2.1 and, if it is, what should I do to make this example work: w2ui grid example

Triggering click event on an element not working in IE8

I am making an angular app but I have found an instance where I need to use jQuery. I need to click a button which raises a click event on another hidden button. I know this seems odd but I need this functionality because an angular module I am using, ng-file-upload, will not work on styled icons.
My solution was to create two buttons, one hidden, one transparent. I then put the styled icon on the transparent button and made the other button hidden. I then used jQuery to cause the second button to be clicked when the first is clicked. This works fine in modern firefox/chrome but not at all in IE8.
<button id="firstClick" class="fa fa-camera-retro"></button>
<button ng-hide="true" id="secondClick" ng-file-select ng-model="files">Upload</button>
$(document).on('click', '#firstClick', function() {
$('#secondClick').trigger('click');
});
I am currently using jQuery version 1.10.2. Any help with this or alternative ways to achieve this would be greatly appreciated. Thanks in advance!
UPDATE:
I think the problem may have to do with angular-file-select as the secondClick is now firing. However angular-file-select is not. Also I set secondClick to visible and when I click it directly it fires ng-file-select.
As you have not mentioned the angular version of your app is using. But if you are using angular 1.3.x then you have to know that it does not support IE8 browser anymore.
docs for IE guide.
There is a note:
Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
As per your comment:
every other part of the site is 100% percent angular, and works perfectly. It is just this one situation where I could not think of an angular solution.
Then i want to suggest you that angular does have a lite version of jQuery in it, called jqLite. You can make use of it, like:
angular.element('#firstClick').on('click', function() {
angular.element('#secondClick').trigger('click');
});
Docs for angular.element
Change the jquery version to lower. By seeing this thread i think version 1.10.2 is not support for ie8. i also tried in jsfiddle and test in ie8 there isissues. when i change to change the version it's working Fiddle
$('#secondClick').click();
Edit: You can forward mouse events through elements with good browser support using: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
If you're fortunate enough to not have to work with older browsers then you can get away the pointer-events CSS property.
#firstClick {
pointer-events: none;
}

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

ngTouch fast click not working on mobile Safari

I'm creating an iOS web app with AngularJS 1.2.10 and use ngTouch to achieve fast click functionality. However it does not seem to work. There is still a noticable delay when using ng-click.
As a test I removed ngTouch and added the fastclick.js library and this seems to work as expected.
Any ideas?
I've found that including jQuery seems to break ngTouch on Angular 1.2.9 (I've not tested it on 1.2.10). My solution was to remove jQuery (which in my case wasn't too painful, as I don't include any plugins that depended on it).

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.

Categories