Jason – congratulations for such a fantastic blog! It’s a great resource
Keep up the great work.

Regards
KJ

Thanks,
KJ

element.dispatchEvent is not a function
event.eventName=eventName;event.memo=m…nt.fireEvent(event.eventType,event);}

There is some sort of conflict between JQuery and the another script that is included by salesforce “https://na1.salesforce.com/faces/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript”. I have viewed the developer.force.com forums and found the following solution (http://community.salesforce.com/t5/Visualforce-Development/Not-able-to-Include-jQuery-JS-file-in-Visualforce-page/m-p/161635) albeit (You’ve guessed it!) it doesn’t work for me…

I only use “jQuery(…)” namespace. I don’t use ‘$’. I tried including the following code snippet directly after including the JQuery library in my visualforce page “jQuery.noConflict();” but this doesn’t work. I keep getting the error. I even went so far as to remove all the JQuery from my visualforce page, including the “include” declaration for the JQuery library and the problem persists! Surely one of you gurus must have come up against this error before? If so, can you post a correct solution to this really irritation problem!

Many thanks indeed
KJ

Thanks a lot!
Simona

Best,
KJ

Another note, you used the actual short name for jQuery. If you do any sort of rerendering, as mentioned in this article and my first comment you’ll end up with prototype (or is it extjs?) stealing the $ object. To fix this use the no conflict method Jason shows in his article and call jQuery as jQuery(‘selectorhere’).

What Jason said is exactly how I do this as well. Also lately I’ve been not using outputPanel and using an actual div instead. This is useful if you only need to use it with JavaScript and not necessarily any of the built in AJAX ie: rerendering that panel.

This is possible but it requires a little extra work. The best way is to give all visualforce components id values and then when you look at the source you may see the panel that has an Id like “thePage:panel2″. Then you can do a selector like this:

var componentId = fixId( ‘{!$Component.thePage.panel2}’ );

$(componentId).click(function(){
//cool stuff
});

function fixId(myid) {
return ‘#’ + myid.replace(/(:|\.)/g,’\\\\$1′);
}

You could also put the fixId function straight into the jQuery selector but I seperated it out here to keep it simple.

Wes has put together a good post on this issue here: http://developinthecloud.wordpress.com/2010/02/17/visualforce-ids-in-jquery-selectors/

For example if you have:

$(document).ready(function() {
$(‘panelTwo’).click(function() {…
});

This wont work because the id’s are prefixed with the name of the parent separated by a colon. You can see this if you view the source of the generated HTML of the VF page. I’ve no idea other than to use raw HTML in my code. Any ideas? Thanks