The Silver Lining

Lessons & Learnings from a salesforce certified technical architect.

Posts Tagged ‘component

Salesforce: A better way to work with jQuery selectors and Visualforce Component Ids

with 24 comments

Irregular Expressions

I get very sad when discussing this particular topic. There are a variety of ways of get Visualforce component Ids and using them in JavaScript but all of them keep me awake at night. Srsly. A commenter on one of my posts got me thinking about how we can do this better and I’ve come up with a way that I think is great. Hopefully you’ll agree.

This post means that my older posts here and here are now retired in favour of this method.

If the world was on the brink of nuclear war with no clear path to peace what could you count on to save the day? Regular Expressions of course. If a meteor the size of Pluto was about to crash into Earth and Bruce Willis was too old to land on it and blow it up what could we count on to rid us of the troublesome rock. Yes that’s right, Regular Expressions. I think you can guess where I’m going with this.

jQuery has the ability to understand very simple regular expressions in it’s attribute selectors. The full documentation can be found here.

To solve our particular problem however the code is simple:

<apex:page>
    <head>
        <style>
            a,span{
                display:block;
            }
        </style>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script>
           jQuery(document).ready(function($){
               $('#btn').click(function(e){
                   e.preventDefault();

                   console.log('The following element was found when looking for an id of \'output1\':');
                   console.log($('[id$=output1]')); /* Here's where we're grabbing the element. */
               });
           });
        </script>

    </head>

  <apex:outputText value="She sells seashells by the seashore." id="output1"/>
  <apex:outputText value="Peter Piper picked a pack of pickled peppers." id="output2"/>

  <a href="" id="btn">Click me.</a>

</apex:page>

The important part here is the selector $(‘[id$=output1]’) which says, “Find the id value that ends with ‘output1′”. This comes with a warning though! Do not duplicate the Visualforce Id that you give to your elements otherwise this piece of code will find all of them.

When I first wrote this post I used a selector extension library that gives you the full power of JavaScript-based regular expression but Ryan Fritts has rightly shown that the above will deal with 99% of use cases and is simpler. For those of you that need to deal with the extra 1% I’ve implemented a wrapper to regex selector as an example. It does exactly what jQuery is doing above and gives you access to the regex flags as documented here.

Thanks again Ryan!

Advertisements

Written by Wes

June 24, 2011 at 2:36 pm

Flickr + jQuery + Salesforce = Awesome^5 [Part 2]

with 4 comments

Okay software developing enthusiasts, I’m back from Paris (you didn’t know I was gone did ya?), I’m a year older and culturally, I’m richer (well I’d like to think so at least). It’s time to complete our two-part series on integrating disparate systems using  the most-excellent combination of web services, jQuery and the Force.com platform. In part 1 we learnt how to connect to a third-party endpoint (Flickr in our case), and consume their SOAP-based web services. Now we’re going to jazz it all up with our spiffy jQuery gallery carousel. Let’s have another look at where we want to be at the end of this all,

GalleryView 2.0 Integration
Read the rest of this entry »

VisualForce Component Ids & Javascript

with 33 comments

I have retired this approach in favour of a much neater solution that can be found here.

Salesforce used in conjunction with JavaScript and Ajax can be pretty smashing. I’ve used a number of JavaScript libraries that make you want to high-five yourself when implemented. There can(and probably will) be some frustration while you bend a library and make it fit within the Salesforce framework, although Ron Hess has some pretty sweet examples for you to pore over.

One simple frustration I’ve come across is that of retrieving elements by Id. Salesforce has an intelligent scheme in place which ensures that HTML elements don’t have duplicate Ids and therefore conform to W3C standards. Read the rest of this entry »

Written by Wes

June 17, 2009 at 6:00 pm

%d bloggers like this: