Visualforce Fun: Two Handy Tips
I've been doing a fair bit of Visualforce work recently and have been trying to leverage standard controllers as much as possible. To that end I came up with a neat way of dealing with multiple record creation, but I'll save that for another day so that I can flesh it out some more in the meantime. Right now however, I'd like to highlight two quirks that have tripped me up in the last week, and present a couple of work arounds.
Dependant Picklists, Child Without The Parent
Everybody's used these, and 99 times out of a hundred you're going to want the controlling field and the controlled (child) field on the page together, but in the particular scenario I was dealing with the parent field was to always have a fixed value, meaning it made no sense to display it. There was a requirement to have the child field on the page, and that can't be done without having the parent field there as well.
You have gathered from me saying "display it", but the work around here is to simply make the parent field invisible using a tiny CSS class.
<style type="text/css">
.hidden
{
display: none;
}
</style>
<!-- snip! -->
<apex:inputField value="{!obj.Parent_Field__c}" styleClass="hidden"/>
So not exactly rocket science, but useful nonetheless!
Making jQuery UI Play Nice
This cost me a couple of hours, and I still didn't find the time to investigate why the problem happens, though I suspect it's down to the order that scripts are included in a page. Basically if you have issues with jQuery UI with messages like "xyz is not a function", then check to see how you're including the source in your page. I was trying to use the UI dialog box, the source files were being loaded without problems, but some of the methods just weren't defined for some reason.
I was including the script using the standard tag (and using the same for jQuery itself):
<apex:includeScript value="//code.jquery.com/ui/1.10.4/jquery-ui.js"/>
and eventually I tried swapping that out for a regular script tag, like so:
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
at which point, everything started working. Perhaps jQuery UI was binding to the variable used by the platform (I was usingnoConflict()` and that's supposed to flow through to jQuery UI) or perhaps it is to do with the way the files are included and in what order (I did always have UI second), but doing this worked. The odd part is that jQuery itself can be included either way without issue, it's only the UI library that seems to break down. If anybody has done more investigation into this I'd love to hear the results!