We Keep Coding

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 plugin conflicts

How do you guys resolve conflicts between Jquery plugins. A conflict would be a situation where two or more Jquery plugins (such as a file upload plugin) work properly alone but result in errors or unintended behavior when you include a second plugin.
I have this problem right now and I am considering using an iframe to isolate sections of my page from everything else. But I want to avoid this if possible to work out these conflicts.
Auditing the plugin code is not feasible its mountains of code and there are short development times to consider.
I can't use jquery.noConflict because I would have to fire it and then replace the $ with Jquery in ever line of my code. Editing the plugins is not feasible. I thought jquery.noConflict didn't work for plugins? It only works for javascript/jquery libraries? I'm not reffering to libraries. Just plugins like sliders, galleries, fileuploaders etc etc.
I used:
(function($) {
jQuery.noConflict();
});
Already..

After some digging around on the web I found some resources
Jquery Plugin conflict
How do I solve this jQuery plugins conflict?
http://forum.jquery.com/topic/jquery-plugins-conflict
And the last one
http://www.jotform.com/help/130-Fixing-Jquery-Plugin-Conflicts-jCarousel
It seems that everyone suggest to use noconflict but except for the last one who said it worked - I don't see a reason it should work, since in documentations JQuery explains that it was meant for libraries that don't use JQuery but collide with it. ( see the 3rd resource I pasted here).
Anyway, it seems as if the best option is to dive into the code and modify it.

i had an issue with jquery conflict, but my case was i had also used prototype.js. i worked out a solution for that. here is a pointer checkout if it helps.
jquery conflict occurs when "$" is also used by some other plugins. hence we need to define jQuery.noConflict
so that all the methods are called using some other reference in this case 'jQuery'.
try include the scripts files on the page as follows.
include all the jQuery files (library and all plugins which are dependent on jquery).
fire jQuery.noConflict();
include all other libraries/ plugins.
wherever jquery methods are called use "jQuery" istead of "$"
hope this helps you out..

Custom jQuery UI

I wanted to use some functionality in jQuery-UI. So, I downloaded a custom version of the same from jQuery website, including only those things in my download that were needed by me. This was supposed to trim down the total size of my page, but to my surprise, the page size remained almost the same even after following the procedure provided at jQuery website.
Did I do something wrong? Or is this the expected behaviour?

You should have a look at JQuery UI Packager, it lets you pick what functionality you want.
It bundles it up with both a custom and a minified JQuery.
When I tried it, I removed everything but core functionality, and it ended up 15kb uncompressed.
Then I tried it without removing anything, it ended up 206kb uncompressed.
If you're that concerned you should think about gzipping.
Look at this chart of filesizes and how they improve with the different methods.
Here's a post about a guy asking a similar question, and the answer explains what you should focus on.
Here's a discussion about gzip and minify.

Are there any drawbacks to using head.js?

Things I am aware of:
Screen flicker if scripts alter styles / content (not an issue for me as I currently load scripts at the end of the page and so have workarounds already)
Inability to detect script load failure (not too concerned about this either as everything I develop is required to work with or without javascript. Might affect my workarounds for item 1 but happy with this risk)
It looks to be a very good option to me but I am hoping for some references (feel free to say only positive things!) before I invest time in incorporating it into my next project.
Currently we develop mid-to-large sized sites with, generally, a moderate amount of Javascript (although this is growing rapidly). We also use the jQuery library for the bulk of our Javascript.
Anyone have any experience? Good or bad! :)
P.S. for those interested this is head.js

Nope. As long as you put any code that is dependent on the loading files inside head.ready {} then you will not face any problems with your code.

Here is my conclusion for head.js, I have done some benchmarks myself:
http://blog.feronovak.com/2011/03/headjs-script-is-it-really-necessary.html
It is subjective opinion and benchmarks are not by any means scientific.

I was/am interested and thinking of maybe also using head.js BUT i found something not so nice: In the url that you gave me there are three tab buttons:
SCRIPT SCRIPT SRC head.js
SRC in head on bottom on head
Shift+Ctr+Refresh gives very little differences for me (+/-10ms between the three # 120mbit line, firefox 3.6.13)
When I use Ctr+R refresh, the results on the head.js are consistently 100ms slower than the other two versions without head.js... So, its NOT always faster.

There would be no problem on using jquery or javascript library heavily. Try to main each library as unique.
I am using prototype, scriptaculous, jquery and many more jquery additional plugins. I faced an error while loading entire scripts. Then i found out its due to $ sign which is an important parameter of jquery and prototype.
i had used
$.noConflict();
jQuery(document).ready(function($){
//jquery codes here
})
So keep your script library unique

head.js() gave a problem to my pages. None of my asp:button OnClick events were working. But if I include the scripts in the traditional way (<script type="text/javascript src="") then the events worked perfectly. I tried EnableClientScript = "false" and also CausesValidation="false". But nothing worked. Finally just scrapped the head.js idea since it did not make a lot of difference to my page load time, anyway.

How to get FormCheck jQuery script set up and working

I am trying to use FormCheck for MooTools to validate a basic contact form I am planning to build. The problem is I can't seem to set up the script to work at all =(
If anyone knows about FormCheck or MooTools and can add any pointers they would all be greatly recieved.
My website is here: http://ryanis.me/

You are using jquery AND mootools on the same page? Why would you do that, it's a bad practice and bad form to stuff your users for two frameworks for what is a small page without anything complex. that aside, are you using the noconflict mode in either framework (note that this is only available since mootools 1.2.3 and requires some changes in the source code of the plugins, probably better off namespacing jquery)
first of all, you have a mootools domready function then you do inline js on the body tag onLoad...
then at the bottom of the source, you try the mootools domready again...
then you embed an accordion script (something that mootools can have built in as part of mootools-more). not sure what you use jquery for but you really need to structure your page better and pick a single framework.
the error you are getting in the formcheck js implies that either this.form is undefined (at time of evaluation $("contactform") was not available or that this.form.getElements() is not a valid method, which would imply that the mootools element prototype is not working. once again, are you using the noconflict mode?
it really needs refactoring and rethinking...

If you are using jQuery you may want to check out various jQuery plugins that will do form validation for you. The validation plugin works pretty well. If you want to use jQuery and MooTools together, you probably need to make sure that you are using jQuery in noConflict mode.